プラグインの「Meta Slider」で
カッコいい画像の配置をしたいっピ！
どうやればいいっピ？
こちらの記事をご覧になれば
「Meta Slider」で以下のようなスライドショーを記事に配置できます！
【サンプル動画】
漫画のレビューブログなどにピッタリですね！
- インストール方法
- スライドショーの作成
- 記事への挿入
- オススメのカスタマイズ
Meta Sliderは、他のスライダープラグインと比べて
操作がシンプルであり、初心者でもすぐに使用できます！
無料版でも多くの機能を利用できるため、
コストパフォーマンスにも優れています。
それでは、一緒にやっていきましょう！
Meta Sliderの使い方 完全解説Meta Sliderのインストール
まずはMeta Sliderをブログに
インストールしましょう！
- WordPressの管理画面にログインします
- 左のメニュー：プラグイン
> 「新規追加」をクリック - 検索バーに「Meta Slider」と入力し、
プラグインを見つけて「今すぐインストール」をクリック - インストール後、「有効化」ボタンを押して完了！
※作者や、インストール数などを確認しながら
まちがえないよう注意です！
Meta Sliderの使い方 完全解説スライドショーの作成方法：実践解説
Meta Sliderをインストールしたときは
以下のポップが出てきます。
こちらを和訳すると
MetaSlider をご利用いただきありがとうございます。
現在MetaSliderの次のバージョンを構築中です。
非機密な診断情報を共有することで、私たちを助けることができますか？
また、重要なセキュリティと機能のアップデートを
不定期にメールでお送りしたいと思います。
詳細はプライバシーポリシーをご覧ください。
メールアドレスを教えると
アップデート情報などを教えてくれるみたいですね。
「No thanks」でポップを閉じましょう！
Meta Sliderの使い方 完全解説画像をスライドに追加する方法
それでは、画像を追加していきます。
左のメニュー：MetaSlider クリック
「Add New」クリック
「スライドを追加」クリック
スライドショーしたい画像を選択します。
（複数選択はShift押しながら）
右下の「Add to slideshow」クリック
Meta Sliderの使い方 完全解説Meta Slider画面説明
画像の順番を変更するには
写真のタイトル（★）をドラッグします。
Meta Sliderの使い方 完全解説一般タブ
「一般」タブでは画像のキャプションを
入力できます。
キャプションってなんだっピ？
「写真の説明」になります。
入力したものは写真の上に表示されます。
※キャプションで写真の一部が見えなくなってしまうため、
私はキャプションはいつも入れません。
キャプションを入れたい場合は
「Manual entry」を選択して文字を入力しましょう。
Meta Sliderの使い方 完全解説Linkタブ
こちらは、画像をクリック（タップ）した時に
ちがうページを表示する場合、入力します。
「New window」を選ぶことで
（パソコンでは）新しいタブでちがうページが表示されます。
Meta Sliderの使い方 完全解説SEOタブ
SEOタブの
「画像の代替文字列」に私は記事のタイトルを
入力しています。
代替文字列は
どこに表示されるっピ？
こちらは「写真の読み込みエラー」になった時に
表示される文字です。
スライドショーに選んだ写真を
まちがえて削除してしまった…
そうした時に
「ここには、こんな写真がありましたよ！」と
読者に教える役割になります。
（ただ、写真ごとに説明を変えるのは
大変なので…私は記事のタイトルにしています）
その他のタブはデフォルトのままでOK！です。
Meta Sliderの使い方 完全解説Main Options
幅
スライドショーの幅サイズ
（画像に合わせる）
高さ
スライドショーの高さサイズ
（画像に合わせる）
Transition Effect
写真スライド時のエフェクト
矢印
次（前）の写真をクリックしてスライドする時の
矢印を表示／非表示の設定
好みですが、私は読者の方に分かりやすいように
デフォルトの「Visible」にしています
ナビゲーション
写真の下の「写真枚数」を表示するか？しないか？を
設定できます。
私は読者の方に分かりやすいように
デフォルトの「点」にしています。
100％ Widht
スライドショーの横幅を
画面の幅（100％）に合わせるか？です。
写真が切れてしまったりするので
ここはデフォルトのままでOK！
Meta Sliderの使い方 完全解説Themeの設定
こちらがMeta Sliderで
私が一番おどろいたところです！
こちらはスライドショーの「テーマ」を変えられます。
【デフォルト】
【テーマ変更】
1枚目のデフォルトから
矢印の種類や、ナビゲーションの表示が変わりましたね！
他のスライドショーのプラグインを
私は使ったことがありますが、
ここまで分かりやすい設定は
Meta Sliderが一番だと思います♪
（これが無料って すごすぎるっ）
他にもテーマがあるので、
ぜひ自分のブログに合うテーマを見つけてください♪
Meta Sliderの使い方 完全解説Advanced Options
「Advanced Options」こちらの設定は
デフォルトのままでOKです！
あえて言うなら…
★「Slide Delay」です。
Slide Delay
スクロールの速度を変更する
デフォルトは「3000」ですが、
- 数字を小さくすると
>> スクロールが早くなる - 数字を大きくすると
>> スクロールが遅くなる
自分の好きな速度を探してみましょう♪
Meta Sliderの使い方 完全解説Accessibility Options・Developer Options
こちらの設定はデフォルトでOKです！
これでMeta Sliderの設定は完了です！
デフォルトのままでも、キレイなスライドショーになってくれるのは
ありがたいですね♪
最後に忘れずに
右上の「保存」をクリックしましょう！
次に、ついに
記事にスライドショーを挿入するっピ♪
Meta Sliderの使い方 完全解説ブログ記事に埋め込む方法
スライドショーを
記事に挿入するには「ショートコード」を使います。
1）まずは右下にあるショートコードをコピーします。
※IDは毎回 変わります。
2）スライドショーを挿入したい記事に
移動しましょう。
3）挿入したい場所をクリックして、
左上の「＋」をクリック
4）ウィジェット
>> ショートコード をクリック
5）先ほどコピーしたものを貼り付け
これで記事への挿入が完了しました！
お疲れさまです～！
Meta Sliderの使い方 完全解説スライドショーを魅力的にするためのカスタマイズ
この章では、
もっと魅力的にするためのカスタマイズ方法です！
Meta Sliderの使い方 完全解説高品質な画像の選び方と最適化
スライドショーに使用する画像は、解像度が高く、
サイズが最適化されているものを選びましょう。
画像の容量が大きすぎると
ページの読み込み速度に影響するため、
JPEG形式で圧縮するとよいです。
画像の圧縮には
圧縮サイトを利用しましょう！
オススメ圧縮サイト
>> https://tinypng.com
ブログに挿入する画像の目安
- 容量：200KB以下
- 画像「横幅」サイズ：1000pxぐらい
画像の容量・横幅は小さすぎると
画質が荒くなるので注意です！
Meta Sliderの使い方 完全解説画像は全て同じサイズにする
スライドショーに使用する
画像のサイズは全て同じにしましょう。
たとえば、
画像Aが縦サイズ：500px
画像Bが ：1000px ... となると、
画像Bは「切れて」表示されます。
画像サイズの変更などをして
サイズは合わせるようにしましょう。
Meta Sliderの使い方 完全解説デザインテーマはブログで統一する
Meta Sliderは
「テーマ」を変えることができることは お伝えしました。
>> Themeの設定
ついつい、いろんなテーマを
利用したくなりますが…
テーマはブログ全体で統一することをオススメします。
なぜなら、
リピーターの方が分かりやすいから です。
記事ごとにテーマを変えてしまうと、
「前回とスクロールのやり方がちがう！
どうやって次の画像にいくの！？」と困ってしまいます。
少し考えれば分かると思いますが、
その「少し」の時間がストレスになり、
ブログに二度とこない…なんてことも。
せっかくリピーターになってくれた人に
ストレスを感じさせてしまうのは申し訳ないですよね。
いろんな記事を読んでもらうために、
ブログ全体でテーマを統一しましょう！
Meta Sliderの使い方 完全解説まとめ
Meta Sliderは、
WordPressで カンタンに魅力的なスライドショーを
作成・表示できる便利なプラグインです！
操作がカンタンででカスタマイズ性が高く、
SEOにも貢献します。
この記事で紹介した手順を参考にすれば、
初心者でもすぐに！ブログやサイトにスライドショーを導入できるので
ぜひ やってみてくださいね♪
ここまでご覧くださり、ありがとうございました！
また別の記事でお会いしましょう(^^♪