ワードプレスにスライドショーを設定「プラグイン使用」。スライドショーの設定は、誰でも簡単にできます。今回は、ワードプレスにスライドショーを設定「プラグイン使用」について書いていきます。
画像をスライドショーで表示させるには、プラグインの「MetaSlider/メタスライダー」を使うと便利です。ブログのトップページなどにスライドショーを配置して、ネットショップなどの商品画像を載せれば効果的です。
| 結論を先に話ししておきます |
| 初めに、利点について話しをすると「訪問者に対し、イチオシ情報を知らせることが可能」「訪問者に対し、おススメ記事などに誘導できる」「トップページ上部のスライドショーに目がいき、興味を持たせる」など。
また、選定基準としては「スライドショーを簡単に導入できるプラグインであること」「日本語化されているプラグインを優先して掲載する」「利用者が多く、評価が高いプラグインを優先して掲載する」などがあります。
当記事では、スライドショーを設定する際、プラグインの「MetaSlider」を用いて解説していきます。スライドショーを設定するプラグインは「MetaSlider」以外にもありますが、特におススメなのが「MetaSlider」です。
以前投稿した下記の記事にも目を通して貰えると幸いです。 |
目次はコチラ
【スライドショーとは】
そもそも「スライドショー」とは、何を意味するものなのかですが「スライドショー」とは、ブログに於いて、複数の画像などを切り替えて表示させることを指します。複数の画像を切り替えるとは。
例えばですが、バナーにおける画像だけではなく、何らかのお知らせ等、テキストを切り替えることも可能。切り替え方法には、横に流れるスライドの他、徐々に切り替わるフェードなどいくつかあります。
| デジタルサイネージに似ているとされる「スライドショー」で、コンテンツを配信することが可能であり、静止画を使用する為、比較的コストが低く、更新が容易にできると言うメリットがあります。
「デジタルサイネージ」とは「屋外」「店頭」「公共空間」「交通機関」など、あらゆる場所でディスプレイなどの電子的な表示機器を使い、情報を発信するメディアを総称したものを言います。 |
プラグインの「MetaSlider」を使用する(動画付き)
この章では、図解を用いて解説していきます。このまま下へスライドさせていくと「「MetaSlider」内の各種設定」と「「MetaSlider」を表示させる方法」の見出しが出てくるのでしっかり設定していきましょう。
| プラグインの「MetaSlider」を予めインストールし、有効化しておいて下さい。 |
図解を見ながら設定していく前に、まずはコチラの動画を視聴してみて下さい。題して「Wordpressのヘッダー画像を5分でスライド表示させる方法！プラグインMeta Sliderで簡単に！」です。
- 「MetaSlider」をインストールし、有効化すると「オレンジ色枠」で囲まれているように、サイドメニューに新しく「MetaSlider」が追加されます。その「MetaSlider」にマウスを合わせてみましょう。
すると、プルダウンが表示され「黄色枠」で囲まれている「MetaSlider」を開いて下さい。
- 「MetaSlider」を開くと「Thanks for using MetaSlider」が開き「赤色枠」で囲まれている「Agree and continue」を開いてみましょう。
- 次に「桃色枠」の中の「水色枠」で囲まれている「Create blank slideshow」を開いてみて下さい。
- すると「紫色枠」の中の「黄色枠」で囲まれている「×」を押して、その画面は閉じて下さい。
- 上記の画面を閉じたら「赤色枠」で囲まれている「スライドを追加」を押しましょう。
- スライドを追加を押すと「オレンジ色枠」で囲まれている「画像」が開きます。
- その画像の中で、スライドショーとして設定してみたい画像を複数選択してみて下さい。こちらでは、テスト用として「オレンジ色枠」で囲まれている「6個」の画像を選択してみました。
画像の選択が終わったら、右下にある「水色枠」で囲まれている「Add to slideshow」を押します。
- 画像を選択した後「Add to slideshow」を押すと、縦に6個の画像が表示されるようになりました。
「MetaSlider」内の各種設定
この章では「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」については、ご自分で決めて頂き「中央揃え」と「自動再生」に於いては、チェックを入れた方が良いでしょう。 |
|
基本、デフォルトのままでも大丈夫です。 |
「MetaSlider」を表示させる方法
この章では、上記の「水色枠」で囲まれている「スライドショーのタグ」を「外観」の中の「テーマファイルエディター」内に貼り付け、表示させる方法について、図解を用いて解説していきます。
予め「水色枠」で囲まれている「スライドショーのタグ」をコピーし、メモ帳などに貼り付けておいて下さい。コピーする方法は、右下にある「Copy all」を押すと、タグがコピーされます。
- まず初めに「黄色枠」で囲まれている「外観」にマウスを移動するとプルダウンが表示され、その中の「オレンジ色枠」で囲まれている「テーマファイルエディター」を開きましょう。
- 次の画面では「桃色枠」で囲まれているプルダウンを開き、その中にワードプレステーマの「親テーマ」があるので選択します。ここでは「diver」を選択してますが、あなた側の親テーマとは違っているかも知れません。
親テーマを選択したら「緑色枠」で囲まれている「選択」を押しましょう。
- すると「紫色枠」で囲まれているように「テーマヘッダー」があるので選択しましょう。
- 次に「赤色枠」で囲まれている「テーマヘッダー(header.php)」となっていることを確認した後、一番下までスクロールし「水色枠」で囲まれている箇所に先程コピーした「スライドショーのタグ」を貼り付けます。
最後に「桃色枠」で囲まれている「ファイルを更新」を押しましょう。
| ファイルを更新したら、必ずトップページを開いてスライドショーの確認をおこない、サイズが「大きい」もしくは「小さい」場合、上記の「緑色枠」で囲まれている「幅」と「高さ」で調整して下さい。 |
今回は以上となります。ワードプレスにスライドショーを設定「プラグイン使用」については、他にもプラグインはありますが、この「MetaSlider」が一番簡単で種類も豊富にあることからおススメしました。
以前投稿した下記の記事にも目を通して貰えると幸いです。
