OUTPUT STYLE BLOG

WordPressで複数画像のスライドを記事内に簡単に表示する方法

何かをブログ内で紹介したいとき、複数の画像を一気に見せたいときってありませんか?

でも見せたい画像を全部貼り付けてしまうと、縦長になってかっこわるい……

ひとつの画像スペースで複数の画像を見せることができたらカッコいいですよね

そこで今回は以下のように複数の画像をスライドによって表示させる方法をご紹介していきます

おすすめ
VersionTek
USB3.0 ポータブルDVDドライブ
2,750円(税込)
※2019/8/12時点 Amazon調べ
Amazonで詳細を見る 楽天市場で詳細を見る

プラグインひとつでできるのでHTMLなどの知識がなくても簡単に使うことができますよ

ではさっそくやり方を見ていきましょう

MetaSliderをインストールする

まずは、プラグイン>新規追加から「MetaSlider」と検索しましょう

検索をしたら以下のように一番左上に表示されるかと思いますので、同一アイコンのプラグインを「今すぐインストール」してください

注意ポイント

似たようなプラグインがいくつかあるので画像を参照して間違えないように注意してください

 

インストールしたら「有効化」をクリックします

これで「MetaSlider」が利用可能になります

スライドを新規に作成する

インストールと有効化が完了したら、ワードプレスの左メニュー内に「MetaSlider」という欄が追加されます

「MetaSlider」にカーソルをあわせて「MetaSlider」をクリックしましょう

すると初回のみ上記のような画面になりますが、慌てずに「Create blank slideshow」をクリック

上の画像が「MetaSlider」の基本的な設定画面になります

  1. スライドの名前変更ボックス
  2. スライドへの画像追加ボタン
  3. 新しいスライド作成ボタン
  4. 設定保存ボタン
  5. スライド画像サイズ変更ボックス

詳細は以下で1つずつ解説していきます

スライドの名前を変更する

まずは①のボックスをダブルクリックして、作成するスライドに名前をつけましょう

名前は好きに付けてしまって良いと思いますが、あとからスライドを追加していったときに分かりにくくならないように紹介する商品名や記事名などにするのがオススメです

スライドに画像を追加する

次に②の「スライドを追加」ボタンから画像を選択していきます

画像を複数選択して右下の「Add to slideshow」をクリックすることでスライドに画像を追加することができます

ポイント

Windowであれば「control」キー、Macであれば「command」キーを押しながら画像クリックすることで複数の画像を選択することができます

スライドの画像サイズを変更する

⑤のボックスに数字を打ち込むことでスライド画像のサイズを変更することができます

こちらは記事に挿入したあとでも変更可能なので、自分のサイトに合ったサイズを探してみてください

スライドを記事に挿入する

スライド設定画面を下に少しスクロールすると「How to use」と書かれた箇所があるので、ここにある[]で囲まれた箇所をクリックしてみてください

すると、ショートコードが自動的にコピーされます

あとはこのショートコードをスライドを表示したい箇所に挿入するだけ

これでスライドを記事内に表示することができます

さいごに

Metasliderは商品紹介などに効果的に使えるプラグインです

テキストよりも画像のほうが効率的に情報を伝えられるようなシチュエーションでは、積極的にスライドショーを記事内に盛り込んでいきましょう

ブログランキングに参加中!

あなたのワンクリックがブログ運営の励みになります
にほんブログ村 にほんブログ村へ
にほんブログ村

-OUTPUT STYLE, BLOG

Copyright© イキカタシフト , 2019 All Rights Reserved Powered by AFFINGER5.