WordPressプラグイン

スライドショーが簡単に作れる!「Meta Slider」の導入・設定方法を徹底解説!

 

こんな方に読んで欲しい!

  • ブログの見た目を華やかにしたい
  • ブログの直帰率を改善したい
  • 特定のサービスやメッセージをブログの目立つ場所に配置したい
  • ブログを見に来た人に、たくさんの画像を見せたい!

よくwebサイトの上部に、次々に画像が変わる部分がありますよね?

これは「スライドショー」と呼ばれるもので、「カルーセル」とか「コンテンツスライダー」とも呼ばれる"パーツ"だと思ってください。画像のスライドショーをブログに配置すると、サイトが華やかに見える、最も見せたい記事に誘導できるなど、さまざまなメリットがあります。

今回は、WordPressにアップロードされているメディアライブラリーから簡単にスライドショーを作成、配置できるプラグインMeta Sliderを徹底解説します!

1. スライドショーを配置するメリット

スライドショーをブログに配置することで下記のようなメリットが得られます。

  • サイトの特色をわかりやすくアピールできる
  • SEOを高める効果が期待できる
  • 画像が動くことで、ユーザーの注目を集められる
  • サイトの目立つ場所に複数のコンテンツを配置できる
  • ユーザーに見てほしい画像を一か所に配置できる

Meta Sliderは画像の表示数、サイズ、表示方法を簡単に設定できるうえに、ブログのheaderやサイドバー、記事本文など、あらゆる場所に配置できます。

本当に手軽にできるので、先に使い方をざっくり紹介します。導入方法は「2. MetaSliderの導入方法」からお伝えします! 

 

1-1. Meta Sliderの超簡単な使い方

Meta Sliderを使ってメディアライブラリーの画像からスライドショーを作成し、ブログ記事の本文に配置するまでを実際にやってみようと思います。

1-1-1. ステップ1 スライドショーの作成

WordPress管理画面>MetaSliderからスライドショーを作成します。Meta Sliderではスライドショーを独自の画面で管理します。

画面右上の「画像を追加ボタン」→メディアライブラリから画像を追加→スライドショーの名前をつけて保存、これでとりあえずのスライドショーが完成

 

ここに注意!

スライドショーに画像を追加したときにサムネイルが正しく表示されない場合は次の記事が参考になるかもしれません。

サムネイル画像を一括修正するプラグイン「Regenerate Thumbnails」を徹底解説!

テーマの変更などでサムネイルサイズが合っていないことが考えられます。

1-1-2. ステップ2 記事本文にスライドショーを配置する

投稿>新規追加から記事を作成、ブロックエディタのMetaSliderブロックでリストボックスからスライドショーが選択できますので、先ほど作った「スイーツ特集イメージ画像」を選びます。

以上です!

ものすごい簡単ですね。

スライドショーをブログの記事本文に配置するだけなら、これだけのステップで作れます。

2. MetaSliderの導入方法

Meta Slider はWordPress公式プラグインなので、WordPress管理画面>プラグイン>新規追加 から簡単にインストールできます。

2-1. Meta Sliderのインストール方法

右側のキーワード検索テキストボックスで「 metaslider 」と検索すると一番目にヒットしますので、「今すぐインストール」をクリックし、有効化します。

インストール済みプラグイン一覧にMeta Sliderが表示されていればインストール完了、このプラグインは初期設定などがないのですぐに使えます。

3. Meta Sliderをしっかり使ってみる

1ではMeta Sliderを使って簡単なスライドショーを作ってみましたが、使い方を覚えればより実用的なスライドショーが作れます。

3-1. SEO対策のAlt属性を追加する

ここがポイント!

Alt属性とは、「この画像はこのような内容が含まれています」といったように画像に解説を付けられます。googleなどの検索エンジンに対するのSEO効果が期待できます。

Meta Sliderではスライドに指定した画像ごとにAlt属性を追加できます。

3-2.スライドの演出効果を切り替える

Meta Sliderのスライド作成画面右側上部からスタイルを変更すれば、選択可能なスライド効果の切り替えが可能です。

それぞれのスタイルの特徴と選択できるスライド効果は下記のとおり、 これらのスタイルはMeta Slider内部で使われているj-queryと呼ばれるプログラムのこと です。

3-2-1. FlexSlider

FlexSliderは最も一般的に使われているレスポンシブ対応なスライドショーです。

含まれる効果

  • フェード
  • スライド

3-2-2. R.Slider

レスポンシブ対応されているスライダーです。

含まれる効果

  • フェード

3-2-3. Novo Slider

最もスライダー効果が豊富なスタイル、レスポンシブ対応です。

含まれる効果

  • ランダム
  • スライドダウン
  • スライドアップ
  • スライドアップ左
  • 上下から短冊をスライド(左から右へ)
  • 上下から短冊をスライド(右から左へ)
  • 左から短冊ワイプ
  • フェード
  • 右にスライドイン
  • 左にスライドイン
  • 角切りランダムワイプ
  • 右下へ角切りワイプ
  • 左上へ角切りワイプ
  • 左上へ角切りワイプ(サイズ増)

3-2-4. Coin Slider

Coin SliderはNovo Sliderとは異なる効果が特徴のスタイル、しかしレスポンシブ非対応なので使う場合には注意が必要です。

含まれる効果

  • ランダム
  • 回転
  • レイン
  • ストレート

3-3. スライドショーのサイズを変更する

スライドショーの幅と高さが指定できます。ただし、Coin Slider以外のスタイルはここでサイズを指定してもレスポンシブなサイズに変更されます。

3-4. 画像の順番を入れ替える

Meta Sliderのスライド作成画面で、画像の順番をドラッグして変更することで、スライドショーで表示する順番を変えられます。

3-5. スライドショーを切り替える

下記ではスライドショーの画像を切り替える矢印と、どの画像を選択しているかを示すナビゲーションの表示非表示を選択できます。

3-6. スライドショーの外見を切り替える

スライドショーのテーマ一覧からナビゲーションポインタや画像の切り替えスイッチの形や場所などの外見を変更できます。

MetaSlider右側メニュー「Select a custom theme」のリンクをクリックするとテーマ一覧が表示、サムネイルをクリックすると右側にテーマの説明コメントがありますのでスライドショーの目的に応じて好みのものを選びます。

プレビューボタンを押すと、テーマ適応後のスライドショーが表示されますのでスライドショーの目的とテーマがマッチしているか確認できます。

4. まとめ

スライドショーをサイトに配置することで、外見を華やかに演出でき、特定のサービスやメッセージに注目してもらえる効果が期待できます。

ここがポイント!

本来スライドショーをブログに配置するには、j-queryと呼ばれるJavaScriptを配置する必要があるため一定のスキルが要求されますが、Meta Sliderを使えば固定ページや投稿記事などブログのあらゆるところにスライドショーを簡単に配置できます。

今回紹介したMeta SliderはWordPress公式プラグインで導入が簡単、しかも無料!

テーマにスライドショー機能が無い場合は、とても重宝するプラグインです。

\参考になったらポチッとお願いします!/

-WordPressプラグイン
-, ,

© 2020 インターネットビジネスラボ