【WordPress】記事にギャラリーを挿入する

WordPressの記事にギャラリーを挿入する

WordPressの記事にギャラリーを挿入する方法をまとめておきます。

目次

ギャラリーブロックで挿入する

ブロックエディターのデフォルト機能です。

ギャラリーブロックの追加

記事編集画面でメディア「ギャラリー」ブロックを追加します。

「ギャラリー」ブロックをクリック

アップロード及びメディアライブラリからギャラリーに表示させたい画像を追加します。

「アップロード」及び「メディアライブラリ」をクリック

ギャラリーに追加したい画像を選択して、「ギャラリーを作成」をクリックします。

必要であれば、それぞれの画像に「代替テキスト」を設定して下さい(記事編集画面でも設定可能)。

画像を選択して「ギャラリーを作成」をクリック

ドラッグ&ドロップで画像の順番を入れ替えて、「ギャラリーを挿入」をクリックします。

キャプションを入力しても構いませんが、入力した文字列は説明文として画像の上に重ねて表示されます。

ドラッグ&ドロップで画像の順番を入れ替える

問題がなければ、記事にギャラリーが挿入されます。

ギャラリーブロックの編集

ギャラリーブロックでは、カラム数や画像のリンク先を設定することができます。

レイアウトやカスタマイズできる項目はテーマによって異なるので、プレビューを見ながら設定して下さい。

ギャラリーのオプション設定

スクロールできます
詳細
カラム 一列に表示させる画像の数(最大8)
画像の切り抜き アスペクト比(縦横比)の統一
リンク先 画像のリンク先
新しいタブで開く target="_blank"が追加される
画像サイズ 使用する画像のサイズ(小さなサイズ推奨)
ギャラリーブロックの背景色
ギャラリーのキャプション ギャラリーブロックの説明文

全て任意です。お好みで設定して下さい。

ギャラリー画像の編集

ギャラリー画像では、個々の画像の詳細設定を変更することができます。

ギャラリー画像の設定

スクロールできます
詳細
スタイル デザインの変更
ALTテキスト(代替テキスト) alt属性alt=""(SEO効果あり)
画像サイズ ギャラリー一覧で表示される画像の大きさ
キャプション 画像の上に重ねて表示する説明文

既に代替テキストやキャプションが設定されている場合は、ギャラリー画像にもそのまま設定が反映されます。

基本的な設定方法は画像の挿入と同じなので、分からない方は下記の記事を参考にして下さい。

あわせて読みたい
【WordPress】記事に画像を挿入する WordPressの記事に画像を挿入する時の設定をまとめておきます。 【記事に画像を挿入】 記事編集画面で、「画像」ブロックを追加します。 アップロード、メディアライブ...

ショートコードで挿入する

記事編集画面で、ウィジェット「ショートコード」ブロックを追加します。

ショートコードブロックを追加

ショートコードブロックにギャラリーショートコードを挿入します(画像が複数ある場合は「,」で区切る)。

ギャラリーショートコード
[gallery ids="メディアファイルID"]

ギャラリーショートコードを挿入

ショートコードには下記のオプションを追加することもできます。

デフォルトは、「サムネイルサイズ」「3カラム」「添付ファイルのページにリンク」が設定されています。

スクロールできます
効果
columns="数字" カラム数を変更(最大9)
link="file" メディアファイルにリンク
link="none" リンクなし
size="medium" ミディアムサイズの画像を表示
size="large" 大サイズの画像を表示
size="full" フルサイズの画像を表示
orderby="rand" 画像の順番をランダムで表示

Gallery Shortcode « WordPress Codex

メディアファイルIDが分からない時は、メディアライブラリで音声ファイルを選択して、表示されたURLを確認して下さい。URLの「item=〇〇」「post=〇〇」に表示されている数字がメディアファイルIDです。

メディアファイルIDの確認

カスタマイズできる項目やデザインはブロックエディターのギャラリーと異なります。

また、テーマによってはレイアウトが崩れる可能性もあるので注意して下さい。

最後に

ギャラリーは、複数画像をまとめて表示させたい時に使うと便利です。

ショートコードで挿入することもできますが、基本的にはブロックエディターのギャラリーブロック推奨です。

コメント

コメントする

目次