【ワードプレスにスライドショーを設定「プラグイン使用」】

12分10秒

ワードプレスにスライドショーを設定「プラグイン使用」。スライドショーの設定は、誰でも簡単にできます。今回は、ワードプレスにスライドショーを設定「プラグイン使用」について書いていきます。

画像をスライドショーで表示させるには、プラグインの「MetaSlider/メタスライダー」を使うと便利です。ブログのトップページなどにスライドショーを配置して、ネットショップなどの商品画像を載せれば効果的です。

結論を先に話ししておきます

初めに、利点について話しをすると「訪問者に対し、イチオシ情報を知らせることが可能」「訪問者に対し、おススメ記事などに誘導できる」「トップページ上部のスライドショーに目がいき、興味を持たせる」など。

また、選定基準としては「スライドショーを簡単に導入できるプラグインであること」「日本語化されているプラグインを優先して掲載する」「利用者が多く、評価が高いプラグインを優先して掲載する」などがあります。

当記事では、スライドショーを設定する際、プラグインの「MetaSlider」を用いて解説していきます。スライドショーを設定するプラグインは「MetaSlider」以外にもありますが、特におススメなのが「MetaSlider」です。

以前投稿した下記の記事にも目を通して貰えると幸いです。

目次はコチラ

【スライドショーとは】

そもそも「スライドショー」とは、何を意味するものなのかですが「スライドショー」とは、ブログに於いて、複数の画像などを切り替えて表示させることを指します。複数の画像を切り替えるとは。

例えばですが、バナーにおける画像だけではなく、何らかのお知らせ等、テキストを切り替えることも可能。切り替え方法には、横に流れるスライドの他、徐々に切り替わるフェードなどいくつかあります。

デジタルサイネージに似ているとされる「スライドショー」で、コンテンツを配信することが可能であり、静止画を使用する為、比較的コストが低く、更新が容易にできると言うメリットがあります。

「デジタルサイネージ」とは「屋外」「店頭」「公共空間」「交通機関」など、あらゆる場所でディスプレイなどの電子的な表示機器を使い、情報を発信するメディアを総称したものを言います。

この章では、図解を用いて解説していきます。このまま下へスライドさせていくと「「MetaSlider」内の各種設定」と「「MetaSlider」を表示させる方法」の見出しが出てくるのでしっかり設定していきましょう。

プラグインの「MetaSlider」を予めインストールし、有効化しておいて下さい。

図解を見ながら設定していく前に、まずはコチラの動画を視聴してみて下さい。題して「Wordpressのヘッダー画像を5分でスライド表示させる方法！プラグインMeta Sliderで簡単に！」です。

「MetaSlider」をインストールし、有効化すると「オレンジ色枠」で囲まれているように、サイドメニューに新しく「MetaSlider」が追加されます。その「MetaSlider」にマウスを合わせてみましょう。

すると、プルダウンが表示され「黄色枠」で囲まれている「MetaSlider」を開いて下さい。

「MetaSlider」を開くと「Thanks for using MetaSlider」が開き「赤色枠」で囲まれている「Agree and continue」を開いてみましょう。

その画像の中で、スライドショーとして設定してみたい画像を複数選択してみて下さい。こちらでは、テスト用として「オレンジ色枠」で囲まれている「6個」の画像を選択してみました。

画像の選択が終わったら、右下にある「水色枠」で囲まれている「Add to slideshow」を押します。

この章では「MetaSlider」内における各種設定をしていきます。設定方法に関しては、下記「ボックス内の色」と「図解内の色」を照らし合わせながらおこなってみて下さい。それでは見ていきましょう。

MetaSlider内の各種設定①
「赤色枠」。	スライドショーの「タイトル名」を記入します。こちらでは「新規スライドショー」としています。
「紫色枠」。	基本「一般」を選択します。
「緑色枠」。	この「SEO」と「Crop」については、特に触る必要はありません。
「水色枠」。	この「Schedule」は「有料」なので、特に触る必要はないでしょう。
「黄色枠」。	「Media library caption」と「Media library description」は触らず、右端の「Enter manually」を選択します。
「桃色枠」。	「Enter manually」を選択すると、画像に合わせたテキストを入力することができ、実際の画面では、スライドショーの左下にテキストが表示されます。
「オレンジ色枠」。	最後に「Preview」を押して、確認してみましょう。

MetaSlider内の各種設定②
「桃色枠」。	画像に適した「URL」を貼り付けることができます。広告先に飛ばしたい場合など、アフィリエイトリンクのURLを貼り付けて下さい。
「緑色枠」。	「Open in a new window」の箇所に於いてチェックを入れると、別窓が開いてスライドショーが表示されます。

MetaSlider内の各種設定③
「紫色枠」。	ここでは「Nivo Slider」を選択した方が良いでしょう。
「緑色枠」。	スライドショーの「幅」と「高さ」を調整する為の数字を入力します。
「黄色枠」。	上記で「Nivo Slider」を選択した場合、多数のスライドショーを選択することができます。
「オレンジ色枠」。	基本、デフォルトのままでも大丈夫です。
「水色枠」。	このタグは、この後の項目「「MetaSlider」を表示させる方法」で解説していきます。
「赤色枠」。	「100% width」については、ご自分で決めて頂き「中央揃え」と「自動再生」に於いては、チェックを入れた方が良いでしょう。
「桃色枠」。	基本、デフォルトのままでも大丈夫です。