ビデオ: ブログにフォトギャラリー(写真一覧)を添付・表示する方法[動画] 2025
WordPressのメディア挿入ウィンドウを使用して、ポストにフルフォトギャラリーを挿入できます。すべての画像をアップロードし、[REPLACE INTO Post]ボタンをクリックする代わりに、[メディアの挿入]ウィンドウの左側にある[ギャラリーを作成]リンクをクリックします。ギャラリーの作成ウィンドウが開き、サイトにアップロードしたすべての画像が表示されます。
フォトギャラリーをブログ記事に挿入するには、次の手順を実行します。
<！ - 1 - >-
ギャラリーの作成ウィンドウで、ギャラリーで使用するイメージを選択します。
各画像をクリックしてギャラリーで使用するように選択します。選択した画像の右上隅に小さなチェックマークが表示されます。
-
[新しいギャラリーを作成]ボタンをクリックします。
ギャラリーの編集ページが開きます。
<！ - 2 - > -
（オプション）[この画像のキャプション]領域をクリックし、画像のキャプションまたは簡単な説明を入力して、各画像のキャプションを追加します。
-
（オプション）[ギャラリーの編集]ページのドラッグアンドドロップオプションを使用して、画像をギャラリーに表示する順序を設定します。
画像をクリックしてドラッグ&ドロップして順序を変更します。
-
（オプション）ギャラリーの編集ページの右側にあるギャラリー設定セクションで、次のオプションを指定します。
<！ - 3 - >-
リンク先： メディアファイルまたは添付ファイルページ。
-
ランダム 順序： 画像がギャラリーに表示される順序をランダム化する場合に選択します。
-
ギャラリーの列： ギャラリーに表示する画像の列の数を選択します。
-
-
[ギャラリーを挿入]ボタンをクリックします。
WordPressはあなたのポストに以下のような短いコードを挿入します：。
-
（オプション）ギャラリー内の画像の表示順序、マークアップ（HTMLタグまたはCSSセレクタ）を変更します。
WordPressギャラリーのショートコードを使用して、投稿のギャラリの表示態様を変更します。
-
captionタグ ： ギャラリーショートコードを変更して画像キャプションを囲むマークアップを変更します。たとえば、画像キャプションの周囲にタグを配置します。 （タグはブロックレベルの要素とみなされ、コンテンツ用の別のコンテナを作成します）。
ギャラリーを独自の行に表示する場合、コードは画像キャプションの周りにタグを配置します。 captiontagオプションのデフォルトのマークアップはddです。
-
icontag ： ギャラリーの個々のサムネイル画像の周りにHTMLマークアップを定義します。ギャラリーのショートコードを変更して、サムネイルアイコンの周囲にタグを配置して、画像のアイコンタグ（サムネイルアイコン）の周りのマークアップを変更します。icontagのデフォルトのマークアップはdtです。
-
itemtag ： ギャラリーの各アイテムのHTMLマークアップを定義します。ギャラリーのショートカットコードをギャラリーの各アイテムの周りに置くようなものに変更して、ギャラリー内のアイテムタグ（各アイテム）の周りのマークアップを変更します。 itemtagのデフォルトのマークアップはdlです。
-
orderby ： ギャラリー内でイメージが表示される順序を定義します。ギャラリーのショートコードを変更してサムネイルを表示する順序を変更すると、サムネイルがメニューの昇順で表示されます。使用できるもう1つのパラメータは、IDに応じて昇順にサムネールを表示するID_order ASCです。
-
| ギャラリーショートコード | 出力 |
|---|---|
| 中規模の画像を含む4列のギャラリー | |
| ブログ記事
から取り込まれたサムネイル画像を含む10列のギャラリーID 215 |
|
| 各画像がタグで囲まれ、画像キャプション
がタグで囲まれた3列（デフォルト）ギャラリー CSSスタイルシート内のタグのスタイルを定義します。 |
-
タグはインライン要素を作成します。タグ内に含まれる要素は、その前の要素と同じ行にとどまります。改行はありません。タグを変更するには、CSSの知識が必要です。 WordPress Dashboardのデザインタブをクリックし、テーマエディタのサブタブをクリックしてテーマのスタイルシートを編集します。
現在のテーマのスタイルシート（スタイル.css）に追加できるものの例を次に示します。
span。 gallery-icon img {パディング：3px;背景：白;国境：1pxソリッドブラック; margin：0 5px;}
アクティブなテーマのスタイルシート（スタイル.ssss）にこのCSSのビットを配置すると、各サムネイルの周りに1ピクセルの黒い枠線が自動的に配置され、3ピクセルのパディングと白い背景が配置されます。左右のマージンは5ピクセル幅で、ギャラリー内の画像間にはすばらしい間隔があります。
「ファイルを更新」ボタンをクリックして、スタイルシート（スタイル.ssss）テンプレートの変更を保存します。
-
図は、既定のWordPressテーマ：Twenty Twelveの前の手順とCSSの例を使用して、フォトギャラリーが表示された投稿を示しています。
WordPressプラットフォームの共同設立者Matt Mullenweg氏は、WordPressの組み込みギャラリーオプションを使用して非常に幅広いフォトギャラリーを作成しました。このすばらしいフォトギャラリーをご覧ください。
