WordPressにスライドショー「Meta Slider」を導入する手順と設定ビフォーアフター

WordPress

2020年02月20日

「プラグインMetaSliderを使ってトップページにだけスライドショーを付けたい」
「スライドショーでトップページの装飾と同時にSEO対策もしたい」

スライドショーは動画よりも作成が簡単で、見ている人に印象を覚えてもらいやすいため、企画のプレゼンテーションや広告などで昔から用いられてきた手法です。

WEBサイトの制作でも複数枚の画像があれば訪問者への印象づけがしやすい(覚えてもらいやすい)ためよく導入されています。動きがあると視覚効果が高く、つい目で追ってしまうため滞在時間も長くなるといわれています。

そのほか、ストーリー展開をしたり、印象の違う写真を見せて興味関心を引きつけたりと、スライドショー導入のメリットはたくさんあります。

WordPressではプラグインを利用することで簡単にスライドショーをつくることができます。今回はその中でも多く利用されていて、柔軟にカスタマイズできるプラグイン「Meta Slider」の詳細な設定やビフォーアフターを実例でお見せしていきます。「Meta Slider」の活用の参考になれば幸いです。

1.WordPressプラグイン「Meta Slider」の基本機能

「Meta Slider」は無料で使えるWordPressプラグインで、スライドショー(スライダー)機能をWordPressに組み込むときにプロもよく使っているプラグインです。

トップページだけ、記事ページだけ、その両方など、コードを入れる位置によって自由にスライドショーを設置できます。枚数も1枚〜自由な枚数で入れることができ、スライドのデザインなども多様にあります。


https://ja.wordpress.org/plugins/ml-slider/

日本語で作られたプラグインではないので英語表記の部分もありますが、日本語に翻訳されている項目も多いです。

ただ、全体的に管理画面がシンプルで機能の説明が少なく、使いこなすにはコツが必要だと思いますので、この記事で細かく説明していきます。

2.「Meta Slider」の始め方

WordPress公式プラグインですので、WordPress管理画面のプラグイン検索ページで「Meta Slider」と検索。インストール・有効化します。

「左サイドメニュー>MetaSlider」へ進みます。

とりあえずスライドショーの設置をスタートさせるには、管理画面真ん中の”Quick start”へ、画像を1枚(後から変えられるので何でも)ドラッグ&ドロップで入れます。

“New Slideshow”という名前のスライドショーパーツが1つ出来上がりますので、そこからお好みの形に設定していきます。「Meta Slider」はレスポンシブ対応のため、1つのスライドショーでパソコン用・スマホ用の両方ができます。

2.「Meta Slider」の初期設定

まず始めに変えておいたほうがよいのは、以下の2箇所です。

◯タイトル
◯幅と高さ

右のサイドにその項目が出ていますので、修正します。
修正が終わったら”保存ボタン”を必ず押してください!見落としやすいところにあるので気をつけてくださいね。

幅と高さですが、px単位で入力します。写真のサイズをパソコンで見るとpxというサイズで表されていますので、馴染みのある方も多いかもしれません。

パソコンの画面の横幅いっぱいいっぱいに広がった大きな画像を入れたい方が多いと思うのですが、何pxにすれば良いのかわからないときは、(Wordpressのテーマによって変わるのですが)デザインの横幅が1200px以下のテーマが多いので、まずは1200pxに設定しておきましょう。高さは写真の内容によりますが、400〜600pxくらいが見やすいと思います。

ただ、元の写真の横幅が設定サイズより小さいと引き伸ばされたようにボケてしまいますので、元の写真の横幅も確認しましょう。小さければいくつかの画像を合わせて大きな1枚の画像をつくればOK。ちょっとひと手間が必要ですが、その工夫をすれば解決できます。

ここまで出来たら、実際にデザインの中に組み込んでいきます。
写真は後から付け足せるので、まずは表示の確認のための1枚か2枚を入れておけばOKです。

<注意>
「Meta Slider」で一度幅を狭く設定してしまってから大きく(例えば500pxで設定した横幅を次の更新で1200pxにした場合など)すると仕様でボケてしまうことがあります。デザインに組み込んだ後に実際の見た目を確認し、画像がボケたり荒くなったりしている…ときは、お手数ですが写真を一度「Meta Slider」から削除して入れ直してください。

3.「Meta Slider」をデザインに埋め込む(タグを設置する)

「Meta Slider」は初期設定しただけではWordPressのデザインに反映されないため、管理画面にあるショートコードを表示させたいところに埋め込む作業をします。

ショートコードは「Meta Slider」の管理画面からコピーできます。

■全ページに入れたい場合(トップページ、個別の記事ページ等)
WordPress管理画面の「左サイドメニュー>外観>テーマエディター>テーマヘッダー(header.php)」と進みます。

テーマファイルを触るため、もし間違った操作でデザインが崩れてしまったときのために、ショートコードを貼り付ける前に、まずはこのページの中にある全てのタグをコピーしてどこかに保存しておきましょう。

ショートコードを貼り付けるする場所ですが、

の一つ前にある

タグの前の行あたりに入れてみましょう。ファイルを保存したらWEBサイトを表示させてデザインが崩れていないか確認してください。

WordPressのテーマによって挿入箇所が変わってくるため、必ずここに入れればいいとは言えないのですが、このショートコードを入れたことでデザインが崩れてもショートコードを削除すれば元に戻ります。もし前後のタグを消したなどのミスで表示が元に戻らなければ、最初の段階でコピーしたタグを貼り直していただければ元に戻ります。

■トップページにだけ入れたい場合
基本的な工程は同じですが、ショートコードを貼り付けるファイルが異なります。

WordPress管理画面の「左サイドメニュー>外観>テーマエディター>メインインデックスのテンプレート(index.php)」と進みます。↑の場合と同様にページ内の全部のタグをコピーしてどこか別のファイルに保存しておきます。

1つ目の

タグの次行に貼り付けてみてください。
こちらも同様でWordPressテーマによってデザインが崩れる場合もあります。一度保存してからWEBサイトを表示させ、挿入部分の確認をお願い致します。

■特定の記事にだけ入れたい場合(ブロックエディタを使っていないとき)
ショートコードをコピーしておくのは同じです。
WordPressの記事を書く画面を開き、ブロックエディタを採用していない場合は、文字を打つ画面にそのまま貼り付けます。

■特定の記事にだけ入れたい場合(ブロックエディタを使用しているとき)
ブロックエディタの場合はアイコンが出ます。そこからスライドショーのタイトルを選ぶだけで挿入できます。

※ブロックエディタを使っている方はまだ少ないかもしれませんがプラグインとの相性もとてもよく、作業が効率的になります。もしまだご利用でない場合は、ぜひご検討ください。

4.「Meta Slider」を組み込んだビフォー・アフター

WordPressのテーマはブログ風のものが多く、トップページをどうデザインするか悩みのタネになることも多いです。しかし、このスライドショーを1つ入れるだけでずいぶんと印象がアップします。

◯ビフォー

◯アフター

◯スマホ

スライドショーがトップページに入ったことで、とても受ける印象が変わります。
(今回のビフォーアフターに使っているWordPressテーマは公式のもので、MetaSliderを入れた以外、デザインは一切触っておらず初期設定のままです)

5.「Meta Slider」のデザインカスタマイズ

スライドショーのデザインですが、「Meta Slider」の管理画面から変えることができます。大きく分けると4種類のスライダーを作ることができます。

◯FlexSlider(定番)
◯R.Sliders
◯NivoSlider
◯Coin Slider(画像が一部分ずつバラバラ表示される、レスポンシブ非対応)

それぞれに効果の設定が違うので、スライドされるときの動きが異なります。
目で見ながら選ぶのがいちばんわかりやすいので、設定を変えてWEBサイトの表示で確認して…を繰り返してみてください。少し手間がかかりますが、どのデザインがいちばんしっくりくるか、4種類すべてをぜひ見て選んでいただくことで、訪問者様に与える印象がより強いものに仕上がります。

6.「Meta Slider」で1ページに複数のスライドショーを設置する

これは非常に簡単で、管理画面のメニュー(MetaSlider>上部のNewアイコン)からもう1つスライドショーを新規で作成します。そのショートコードを↑上記で説明したのと同様の手順で表示させたい場所に設置します。

上下に並べるとこのようにスライドショーが続きます。
ストーリーを見せたいときや複数の事業の紹介をしたいときはスライドショーの間にタイトルや文章を入れると訪問者様にたくさんの情報を一度に見ていただけます。

7.「Meta Slider」でできるSEO対策

「Meta Slider」にはSEOと名前の付いたタブがあります。
これはスライドショーに含める画像ごとに文章(キャプション、画像タイトル)を入れられる機能です。

画像ごとに文章を設定していくことで、ページ内に記載するキーワードを増やし、Googleなどの検索エンジンで評価を上げようという意図があります。

実際に画像に文章を入れるとソースコード内にその文章が反映されています。

Googleはこれを読み込んでいるため、検索エンジンが「このWEBサイトにはこういう内容が書かれているんだ」ということが画像だけの場合より読み取りやすくなります。作業に余裕があればぜひ文章を入れておいてください。

8.まとめ

スライドショーを1つ入れるだけで、ずいぶんとWordPressで見せるWEBサイトの印象が変わることがわかっていただけたかと思います。

スライドショー以外にもトップページのデザインを装飾するプラグインは他にもあり、くまWEBの過去記事「トップページをおしゃれに装飾するWordPressプラグイン5選」でもまとめています。デザインの工夫で悩まれている方はぜひご参考になさってください。

今すぐ無料で見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」
そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。

カテゴリ

最新記事

今すぐ無料でお見積もりを依頼する

「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。