皆さんこんにちは。
今日はWordpressで画像を横並びに表示する方法をまとめていきたいと思います。
この記事でお伝えすることは、
１、PC表示で横並び（２カラム）、スマホでは縦並び（１カラム）
２、PC表示で横並び（２カラム）、スマホでも横並び（２カラム）
この２パターンです。
キレイに画像を横並びにするのは、プラグインを使えば超簡単です。
ただ、意外に多い悩みが２番のレスポンシブデザイン（スマホ表示）の際にも横並びにしたいということ。
このあたりも誰でも簡単にできますので、解説していきたいと思います。
PCで横並び スマホで縦並び
一般的な横並びな表示方法ですね。
PCで画像キレイに横並びに表示し、スマホでは縦並びに表示させる方法です。Wordpressのレスポンシブ対応テーマでは、スマホ表示は基本１カラム表示になり、その方がユーザビリティの向上に繋がるとされています。
今回紹介する方法は、初心者でも簡単にできるように『shortcode ultimate』というプラグインを使っていきます。
プラグイン『shortcode ultimate』
このプラグインは記事を編集する際に、様々な効果を簡単に実装してくれる優れものです。
↓こんな機能が簡単に記事に実装できるプラグインです。
関連記事：Shortcode Ultimateでアニメーション効果を付けてみよう！
ではさっそく画像の横並び表示の方法です。
STEP1 プラグインをインストール
| 『プラグイン』>『新規追加』>『Shortcode Ultimate』>『インストール』>『有効化』 |
こんな感じでインストールし、『有効化』するだけでオッケーです。
STEP２ ショートコードを挿入
赤枠の『ショートコードを挿入』→『Columns』を選択します。
STEP３ 画像を挿入
『ショートコードを挿入』→『Columns』を選択すると、
※これをコピペしても使えませんので、ショートコード挿入から行ってください。
↑というショートコードが入りますので、この中の『画像』というところにそれぞれ画像をいれます。
するとこんな感じになります。
それぞれの画像をセンタリングしてあげると、よりきれいに表示されます。
■PC表示↓
PC表示
■スマホ表示↓
スマホ表示
『画像』と書いてある部分にテキストを入れても使えますので、色々と用途に応じて試してみてください。
PCで横並び スマホも横並び
次はスマホ表示でも横並びさせる方法です。
実際は画像も小さくなりますし、レスポンシブの場合は縦に表示させた方がユーザーのことを考えたらメリットは多いです。
ただ、バナーを表示させたり、ちょっとしたときにスマホでも横に並べたいときってありますよね。
そんなときは↓のコードを使います。
<div style=””display: inline-block;”><img src=”画像URL” width=”50%” /><img src=”画像URL” width=”50%” />
１、画像をメディアに入れておく
２、↑のコードを編集ページの『テキスト』に貼り付ける
３、『画像URL』の箇所に入れたい画像のURLを貼り付ける
以上で出来ます。
試しに表示させてみると、
こんな感じに表示されます。
■PC表示↓
PC表示
■スマホ表示↓
スマホ表示
以上、２つの画像を並べるときの配列パターンと、挿入方法でした。
意外とかゆいところに手が届くような表示方法です。参考にしてみてください。
