「プラグインMetaSliderを使ってトップページにだけスライドショーを付けたい」
「スライドショーでトップページの装飾と同時にSEO対策もしたい」
スライドショーは動画よりも作成が簡単で、見ている人に印象を覚えてもらいやすいため、企画のプレゼンテーションや広告などで昔から用いられてきた手法です。
WEBサイトの制作でも複数枚の画像があれば訪問者への印象づけがしやすい（覚えてもらいやすい）ためよく導入されています。動きがあると視覚効果が高く、つい目で追ってしまうため滞在時間も長くなるといわれています。
そのほか、ストーリー展開をしたり、印象の違う写真を見せて興味関心を引きつけたりと、スライドショー導入のメリットはたくさんあります。
WordPressではプラグインを利用することで簡単にスライドショーをつくることができます。今回はその中でも多く利用されていて、柔軟にカスタマイズできるプラグイン「Meta Slider」の詳細な設定やビフォーアフターを実例でお見せしていきます。「Meta Slider」の活用の参考になれば幸いです。
１．WordPressプラグイン「Meta Slider」の基本機能
「Meta Slider」は無料で使えるWordPressプラグインで、スライドショー（スライダー）機能をWordPressに組み込むときにプロもよく使っているプラグインです。
トップページだけ、記事ページだけ、その両方など、コードを入れる位置によって自由にスライドショーを設置できます。枚数も1枚〜自由な枚数で入れることができ、スライドのデザインなども多様にあります。
https://ja.wordpress.org/plugins/ml-slider/
日本語で作られたプラグインではないので英語表記の部分もありますが、日本語に翻訳されている項目も多いです。
ただ、全体的に管理画面がシンプルで機能の説明が少なく、使いこなすにはコツが必要だと思いますので、この記事で細かく説明していきます。
２．「Meta Slider」の始め方
WordPress公式プラグインですので、WordPress管理画面のプラグイン検索ページで「Meta Slider」と検索。インストール・有効化します。
「左サイドメニュー＞MetaSlider」へ進みます。
とりあえずスライドショーの設置をスタートさせるには、管理画面真ん中の”Quick start”へ、画像を1枚（後から変えられるので何でも）ドラッグ&ドロップで入れます。
“New Slideshow”という名前のスライドショーパーツが1つ出来上がりますので、そこからお好みの形に設定していきます。「Meta Slider」はレスポンシブ対応のため、1つのスライドショーでパソコン用・スマホ用の両方ができます。
２．「Meta Slider」の初期設定
まず始めに変えておいたほうがよいのは、以下の2箇所です。
◯タイトル
◯幅と高さ
右のサイドにその項目が出ていますので、修正します。
修正が終わったら”保存ボタン”を必ず押してください！見落としやすいところにあるので気をつけてくださいね。
幅と高さですが、px単位で入力します。写真のサイズをパソコンで見るとpxというサイズで表されていますので、馴染みのある方も多いかもしれません。
パソコンの画面の横幅いっぱいいっぱいに広がった大きな画像を入れたい方が多いと思うのですが、何pxにすれば良いのかわからないときは、（Wordpressのテーマによって変わるのですが）デザインの横幅が1200px以下のテーマが多いので、まずは1200pxに設定しておきましょう。高さは写真の内容によりますが、400〜600pxくらいが見やすいと思います。
ただ、元の写真の横幅が設定サイズより小さいと引き伸ばされたようにボケてしまいますので、元の写真の横幅も確認しましょう。小さければいくつかの画像を合わせて大きな1枚の画像をつくればOK。ちょっとひと手間が必要ですが、その工夫をすれば解決できます。
ここまで出来たら、実際にデザインの中に組み込んでいきます。
写真は後から付け足せるので、まずは表示の確認のための1枚か2枚を入れておけばOKです。
＜注意＞
「Meta Slider」で一度幅を狭く設定してしまってから大きく（例えば500pxで設定した横幅を次の更新で1200pxにした場合など）すると仕様でボケてしまうことがあります。デザインに組み込んだ後に実際の見た目を確認し、画像がボケたり荒くなったりしている…ときは、お手数ですが写真を一度「Meta Slider」から削除して入れ直してください。
３．「Meta Slider」をデザインに埋め込む（タグを設置する）
「Meta Slider」は初期設定しただけではWordPressのデザインに反映されないため、管理画面にあるショートコードを表示させたいところに埋め込む作業をします。
ショートコードは「Meta Slider」の管理画面からコピーできます。
■全ページに入れたい場合（トップページ、個別の記事ページ等）
WordPress管理画面の「左サイドメニュー＞外観＞テーマエディター＞テーマヘッダー（header.php）」と進みます。
テーマファイルを触るため、もし間違った操作でデザインが崩れてしまったときのために、ショートコードを貼り付ける前に、まずはこのページの中にある全てのタグをコピーしてどこかに保存しておきましょう。
ショートコードを貼り付けるする場所ですが、
の一つ前にある