先日クライアント様に、 WordPressのブログ記事内で「画像を横に並べて入れたい」「画像の近くに説明文を入れたい」と尋ねられましたので、その方法を投稿いたします。
画像にキャプション
挿入した画像の下に小さめの文字で説明文を添えられます。
サンプルがこちら↓
画像キャプションの付け方
- 挿入した画像を選択すると、アイコンが並んだ編集バーが現れます。
- 四角内に…がついたアイコン「キャプションを追加」を押します。
- 画像下に入力箇所が現れます。薄く”キャプションを追加”と書かれたところへ説明文を入力します。
画像を左寄せ・右寄せ
サンプルです↓
私のサイトではパソコン表示の時、左寄せにした画像が他と比べてなぜか少しはみ出ていますが、皆さんのサイトではないと思うので、これは無視してください。
文章量が多い時の見本。ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
画像の左寄せ・右寄せの仕方
- 画像幅を小さくします。
- 編集バーの”配置”で
「左寄せ」にすると、文章が画像の右側に入ります。
「右寄せ」にすると、文章が画像の左側へ入ります。 - 文章量が多いと、文章は画像の下側へと流れていきます。
「画像」以外での画像の挿入方法
「ギャラリー」と「メディアとテキスト」の２つをご紹介いたします。
WordPress管理画面での操作を記します。
ギャラリー
複数画像をセットにして並べる「ギャラリー」。
パソコン画面では3カラムでの表示例です。
ギャラリーの作成方法
ブロック「ギャラリー」を選択すると、下の画像のようなギャラリーを作成するダイアログが出ます。
あらかじめメディアライブラリに画像をアップロードしておいて選ぶだけの形にすると作業がしやすいです。
画像を複数枚選びます。選んだ画像にはチェックが付きます。
選び終わったら右下の「ギャラリーを作成」ボタンを押します。
その後、下の画像を参考にギャラリーの設定をしてください。
カラム（列）数を1から選んだ画像数まで指定でき、割り切れない分は、最終行で均等割されます。
ただし、スマホでは反映されず、最大2列になります。
横並びの画像の高さを合わせたい場合は、「画像を切り抜いて調整」を選択します。
ギャラリー画像の拡大表示
ページ上で画像をクリック（タップ）すると、ページを移動することなく画面上に拡大表示する機能を付けられます。ライトボックスと呼ばれる機能です。
※WordPressテーマにライトボックスのプラグインが入っている方の設定となります。
ギャラリー画像の拡大表示機能の付け方
二つ前の画像にある通り、ギャラリー設定の「リンク先」で「メディアファイル」を選択します。
ギャラリー画像の順番の並び替え
並べ替えたい画像を選択し、編集バーの＜＞で前後に移動して順番を入れ替えることもできます。
ギャラリー画像の追加
先頭行の画像と画像の間にカーソルを合わせると＋マークが表示されるので、押すと画像を追加できます。
ギャラリー画像の削除
削除したい画像を選択したまま、下記どちらかの方法で削除します。
- deleteキーを押す
- 編集バー右端の”オプション”から一番下にある「削除」を選択する
メディアとテキスト
画像とテキストを２列でセットにして表示します。
表示位置の違いで３パターンの例です。
メディアを左側に表示
垂直配置：上揃え
メディアを右側に表示
垂直配置：中央揃え
文章量が画像の高さより多い場合、パソコン画面では画像の上下に空きができます。
・上揃え→下側に空き
・中央揃え→上下に空き
・下揃え→上側に空き
メディアを左側に表示
垂直配置：下揃え
画像の幅を少し大きくし、文字サイズをブロックのスタイル設定でSにしています
「メディアとテキスト」の設定
「メディアとテキスト」ブロックを選ぶと、下の画像のような画面になります。
メディアエリアに挿入する画像を1枚選んだ後、テキストを入力します。
メディア（画像）とテキストの配置を選びます。
ブロック設定で「モバイルでは縦に並べる」を選択すると、スマホの場合は1列表示になり、画像の後にテキストが表示されます。
スマホではその方が断然見やすくなるので、選択をお勧めします。
テキストの文字サイズは、「スタイル」を押すと現れる「タイポグラフィ」で変更できます。
なお、「メディアとテキスト」の場合は、画像にキャプションはつけられません。
以上、いかがでしょうか？
他にも画像を並べる方法はいくつかありますが、今回はやりやすそうな方法をご紹介しました。
活用してブログ内容をより豊かに、華やかにしていってくださいね。
WordPressのブログ投稿で「こんなことできないかな？」というご質問がございましたら、気軽にお尋ねください！