ビデオ: ブログにフォトギャラリー(写真一覧)を添付・表示する方法[動画] 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の組み込みギャラリーオプションを使用して非常に幅広いフォトギャラリーを作成しました。このすばらしいフォトギャラリーをご覧ください。
