ギャラリーブロック

ブロック一覧へ戻る

ギャラリーブロックは複数の写真を簡単に追加でき、自動で魅力的に配置できます。またカラム数や画像の大きさを調整できます。ギャラリーブロックを追加するにはブロックを追加ボタンをクリックします。

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

または、空の新しいブロックへ /gallery (または /ギャラリー)と入力して Enter キーを押します。

ギャラリーブロックを /gallery ショートカットで追加

ブロック追加の詳しい方法はこちらをご覧ください。

ブロックツールバー ブロックツールバー

各ブロックにはそれ固有のコントロールがあり、エディター内でブロックを操作できます。

ギャラリーブロックツールバーのオプション

ギャラリーツールバーには主要なオプションが4つあります。

  • 変換またはブロックタイプ変更
  • 移動用ハンドル
  • 配置の変更
  • 他のオプション

ブロックを別の種類のブロックへ変換(変更)できます。またグループを作成したり、カラムのブロックへ変えられます。もしギャラリー表示した画像がうまく収まらなければ、変換ボタンを使って画像ブロックへ変更できます。するとギャラリー内の画像がそれぞれ1つの画像ブロックとして投稿へ追加されます。

移動用ハンドル

上下の矢印を使うと、ドキュメント内でブロックを上下に移動できます。

エディター内でブロックを移動する詳しい方法はこちらをご覧ください。

配置の変更

  • 左寄せ – ブロックを左に配置します
  • 中央寄せ – ブロックを中央に配置します
  • 右寄せ – ブロックを右に配置します
  • 幅広 – ブロックの幅をコンテンツ幅に合わせます
  • 全幅 – 画面の幅いっぱいまでブロックの幅を広げます

「幅広」と「全幅」は現在のテーマがサポートしている場合のみ選べます。

画像の追加 画像の追加

ギャラリーブロックを追加すると、アップロードメディアライブラリの2つのオプションが表示されます。

ギャラリーブロックへ画像を追加

アップロードを使うと、新しく1つか複数の画像をアップロードして、ギャラリーブロックとメディアライブラリへ追加できます。メディアライブラリを使うと、アップロード済みの画像をメディアライブラリから選ぶことができます。エクスプローラー(Windows)やFinder (macOS)から複数の画像をドラッグ&ドロップしてギャラリーブロックへ追加することもできます。

トップ ↑

画像の削除 画像の削除

ギャラリーブロックから画像を削除

追加した画像をギャラリーから削除するにはキャンセルアイコンをクリックします。後で追加し直すことができます。

トップ ↑

画像の移動 画像の移動

ギャラリー内で画像を移動

画像をギャラリーのあちこちへ移動し、自分の並べたい順にできます。

トップ ↑

画像の置き換え 画像の置き換え

ギャラリー内で画像を置き換え

編集(ペン)アイコンを使うと画像を置き換えられます。別の画像をアップロードするかメディアライブラリから選ぶことができます。

トップ ↑

キャプション キャプション

画像それぞれにキャプションを付けられます。ギャラリー自体にもキャプションを付けられます。

トップ ↑

他のオプション 他のオプション

他のオプションのツールバー

追加設定を非表示

追加設定を非表示オプションを使うと、エディターのサイドバーにあるブロック設定パネルを隠す(または表示する)ことができます。

コピー

コピーを使うと、選択したブロックをコピーしてエディター内の好きな位置へ貼り付けできます。

複製

複製を使うと、選択したブロックを複製できます。

前に挿入

新しいブロックを選択したブロックの前へ挿入します。

後に挿入

新しいブロックを選択したブロックの後へ挿入します。

移動

移動を選ぶと、コンテンツ内に青い線が現れます。その後、矢印を使って線を上下に移動し、選択したブロックの移動先を指定できます。最後にキーボードの Enter を押すとブロックがそこへ移動します。

HTML として編集

HTML として編集を使うと、選択したブロックの HTML コードを変更できます。

再利用ブロックに追加

再利用ブロックに追加オプションを使うと、選択したブロックを再利用ブロックのリストへ追加できます。すると他の投稿や固定ページでそのブロックを利用できます。

グループ化

ブロックをまとめて一つの単位として扱いたい場合、グループ化オプションを選択します。例えば共通の背景色や他のブロックをグループへ追加できます。

ブロックを削除

ブロックを削除オプションを使うと、選択したブロックをコンテンツから削除できます。

トップ ↑

ブロック設定 ブロック設定

どのブロックも、ブロックツールバーにあるオプションに加えて、固有のオプションがエディターのサイドバーにあります。もしサイドバーが見当たらなければ、公開ボタンの隣にある「歯車」ボタンをクリックしてください。

トップ ↑

カラム カラム

ギャラリーブロックのカラム数を選べます。カラム数は1から8までです。

選べるカラム数の最大は画像の数です。画像を4つ追加すると最大4カラムまでになります。もっと画像を追加すると最大の8まで選べます。

カラム数に合わせて画像は自動的に見栄え良く配置されます。設定を変更して自分がベストだと思う配置を見つけましょう !

トップ ↑

画像の切り抜き 画像の切り抜き

ギャラリー内の画像の切り抜き

ギャラリーブロック内の画像を切り抜くかどうかを選べます。このオプションは大きさや形が違うイメージを並べるときに便利です。切り抜いた場合、ギャラリーの行ごとに画像が同じ大きさになります。オプションを切り替えてどちらが良く見えるかお試しください。

トップ ↑

リンク先 リンク先

ギャラリー内の画像に付けるリンクに添付ファイルのページメディアファイルなしの3つのオプションがあります。これは訪問者がギャラリー内の画像をクリックすると何が起きるかを決定します。

画像のリンク先

添付ファイルのページ

クリックするとサイトの添付ファイルのページを表示します。これは画像の情報を示すページで、画像そのものと、キャプション、説明、コメントフィールドがあります。

メディアファイル

クリックすると画像ファイルをオリジナルの大きさでブラウザーの新しいウィンドウに表示します。

なし

画像をクリックしても何も起きません。つまりどこにもリンクしません。

トップ ↑

画像サイズ 画像サイズ

画像サイズ設定はサムネイルフルサイズから選べます。

画像サイズの違い
  • サムネイル: 小さなサムネイル版の画像を固定ページや投稿に表示します。注意として、デフォルトのサムネイルは正方形ですので、オリジナル画像が切り抜かれる場合があります。
  • 中: 中サイズの画像を固定ページや投稿に表示します。これは、左寄せや右寄せで配置した時に充分なスペースが残り、脇のテキストが読みやすくなるサイズです。
  • : 大きなサイズの画像を固定ページや投稿に表示します。この場合、WordPress はテーマのコンテンツ領域の幅を決定し、そこに収まる最大の画像を表示します。
  • フルサイズ: フルサイズの画像を固定ページや投稿に表示します。この場合、WordPress はテーマのコンテンツ領域の幅を決定し、そこに収まる最大の画像を表示しますが、オリジナル画像がその幅より大きいとフルサイズの画像は表示されない場合があります。

注意: これらの画像サイズはテーマがサポートしている場合に適用されます。

トップ ↑

高度な設定 高度な設定

HTML アンカーを使うとギャラリーにページジャンプを行わせることができます。ページジャンプはアンカーリンクとも呼ばれます。このリンクをクリックすると長いページの上の方や下の方へ簡単に移動できます。

これを有効にするには、ギャラリーに HTML アンカー を入力し、そのアンカーへジャンプするリンクを作成します。

追加 CSS クラスを使うとブロックに CSS クラスを追加できます。これを使うとカスタム CSS を書いてブロックに好みのスタイルを付けることができます。

変更履歴

  • 更新: 2021-02-02
    • 5.5の動画を5.6のGIFに更新
    • スクリーンショットをすべて5.6のものに更新
    • 高度な設定オプションの詳細を追加
    • 古くなったコンテンツを更新contents
  • 更新: 2020-10-05
    • 動画を更新
  • 更新: 2020-09-14
    • スクリーンショットを5.5のものに更新
    • ブロックツールバーの新機能を反映
    • ブロック設定の新機能を反映
  • 更新: 2020-06-18
    • 「ブロック一覧へ戻る」をページ先頭に追加
  • 更新: 2020-04-24
    • 複数画像のドラッグ&ドロップを追加
    • グループブロックとして背景色を変える動画を追加
    • WordPress 5.4の新しい UI 表示を追加
    • ブロックツールバーセクションに「他のオプション」を追加し、従来の内容を他のブロック説明と揃うように更新。
    • 投稿を3つのセクションに再構成: ギャラリーと画像の追加方法、ブロックツールバー、ブロック設定。
    • 再利用可能ブロックをすべて通常ブロックへ変換。
  • 新規作成: 2019-03-07

この記事は役に立ちましたか ? どうすればさらに改善できますか ?