ワードプレスでブログやサイトを作り始めると気になってくるのがデザイン！豊橋オレ的情報局ブログも最初の頃はただ記事を書いているだけで、デザインはあまり気にしていませんでした。記事を書くことに慣れてきた頃に、デザインもこだわりだし導入したのが「MetaSlider」というプラグインです。
MetaSliderとは何か？
画像をスライドさせるプラグインで、サイトやブログで一度は見たことがある、
そう！よく見るあれです！
トップページを見るとわかるようにヘッダーとメニュー（PC表示の時）の下に画像がスライドする様子はブログを華やかにして、目立たせたい記事にリンクできるのでそこから飛んでもらうこともできます。PC表示だけではなくスマホにも対応していることから自分的にはかなりおすすめなプラグイン！４種類のスライドショーから選択して作成でき、画像の表示速度を変えたりできることから記事だけしかない素っ気ないデザインから一変すると思います。
よく見るあの画像スライドショーはどのプラグイン？と導入を検討している人の為にも使い方などを簡単に紹介するので参考にしてみてください。
MetaSliderの使い方「設定方法」
最初にプラグイン「MetaSlider」はインストールと有効にしないと使う事ができません。
ワードプレス管理画面→プラグイン→新規追加の順！
検索ボックスに「MetaSlider」と入れるとプラグインが出てきます。
上の画像はすでにMetaSliderをインストール有効化しているため、このような表示ですが、初めての場合は「今すぐインストール」→「有効」の順で進めていきます。
MetaSliderを有効にするとワードプレス管理画面の左メニュー下にMetaSliderが追加されているのが確認できると思います。
MetaSliderの使い方（設定方法）
ここからはメタスライダーを使って画像スライドショーの作り方を紹介します。①の管理画面メニューのMetaSliderをクリックすると作成画面に切り替わります。
②の「＋NEW」という所で新規にスライドショーを作ることができます。自分はすでに「トップ上表示」という画像スライドショーを作っているので表示されています。青色で囲ってある場所には画像スライドショーのタイトルを書いておくとわかりやすいです。どの部分に挿入するか決まっている時はタイトルに自分のようにトップ上などにするとわかりやすいと思います。
③の「スライドを追加」で画像ファイルを選択して追加することができます。複数可能！
画像を追加すると上のような設定画面に変わりますが、最初はテスト的に作って設定でどう変わるかを見ながらやるといいと思います。
赤く囲ってある線の設定説明
- 一般（ここは結構重要でスライドショーの画像の下にタイトルやちょっとした補足説明を入れるキャプションになっていて、その下には記事のリンクURLを張ることができます。写真に目が行ってクリックすると記事に飛べるので、自分的には一番最初の画像は厳選した記事の中から選びました。）
- SEO（画像タイトルテキストと画像の代替文字列を記入します。）
- 切り抜き（画像の位置的ポジションを決めることができます。自分はデフォルトの中央中央。）
青く囲ってある線の設定説明
一番上から４種類スライダーを選ぶことができます。自分が使っているのは「FlexSlider」でシンプルで分かりやすいから決めました。幅と高さはスライダーの大きさで、ブログやサイトによって大きさが変わってきます。効果は画像がスライドする時の効果で、自分はテーマと効果はデフォルト設定にしています。矢印とナビゲーションもデフォルト状態でどちらも見やすさに関係してくると思います。
保存の横には「プレビュー」があるのでどう変化するか見ながら設定するのをおすすめします。
【高度な設定】
自分は高度な設定はほぼデフォルト状態で、画像スライドが変わる設定だけ変えてみるのもいいかもしれません。
赤い線で囲ってあるのが画像スライドさせる設定で、「スライド遅延」が画像スライドの表示時間。「アニメーション速度」が画像スライドの切り替わる時間。速度や表示時間を変更する場合は保存の横にあるプレビューを見て設定してみるとどう変更するか分かりやすいです。
自動再生のチェックを外すと矢印方向を押さないと画像が変わらないので、そのままのほうがいいと思います。
設定が完了したら「保存」を忘れないように！
MetaSliderの設定方法はこんな感じで、保存をしたら次に画像スライドショーのショートコードをブログやサイトに挿入することで表示されるようになります。
ショートコードをコピーして張り付ける
MetaSliderのショートコードは高度な設定の上に表示されているの部分で、コピーして挿入したい場所に貼り付けて初めて画像スライドショーが表示されます。
①外観→②ウィジェット→「テキスト」を選び「インデックスリストトップ」の③「内容」にさきほどコピーしたショートコードを貼り付けて「保存」。これでトップとカテゴリーに画像スライドショーを挿入できます。テーマによっては画面トップ（インデックスリストトップ）のウィジェット表示が変わってくると思うので画像スライドショーを貼り付けたい場所にショートコードを貼り付けてください。トップ画面だけや固定トップページだけ画像スライドショーを挿入する事も可能です。
投稿ページにもMetaSliderを挿入する事も可能！
投稿ページの中に画像スライドショーを挿入するやり方は、ショートコードを貼り付けるだけでOK！ショートコードをコピーしてない場合は、青い線で囲ってある「スライダーを追加」で画像スライドのタイトル（名前）を選んで挿入するやり方もあります。最後にちゃんと表示されているかプレビューで確認してみてください。
MetaSliderはショートコードをコピーして張り付けるだけなので超簡単！最初は慣れない設定に少し時間がかかりますが、それさえ終われば画像スライドショーをアイデア次第で挿入することができます。
プラグインのMetaSliderを使ってみた感想
自分の場合は、注目してほしい記事を画像とともにスライドさせていて、MetaSliderによってブログの見映えはよくなったと思います。画像スライドショープラグインを挿入するとページなど表示速度など重くなる印象がありましたが、特に変化はないように感じました。ブログのデザインを重視するなら、よく見るあの画像スライドショーはおすすめなので参考にしてみてください。ワードプレス初心者でも簡単にできます！
