画像関連ブロックの使い分け【WordPress】

WordPressにはメディア関連のブロックが5個用意されていますが、それぞれ「何が、どう違って、どう使い分ければいいのか?」ということを整理しておこうと思います。

今回は動画以外の、画像ギャラリーカバーメディアとテキストの4つを比較してみます。

[画像]ブロック

ページ内に写真やイラストを挿入するためのブロックです。

画像ブロックは、キーボードで直接 /image もしくは、/画像 と入力して Enter を押しても追加できます。

画像ブロックでできること
  • 画像のサイズ変更
  • スタイルの変更(角丸)
  • 画像のトリミング(ズーム、縦横比、回転)
  • デュオトーンフィルターの適用
  • 画像の上にテキスト入力(その際[カバー]ブロックに変換される)

『Duotone』Duo=ふたつの、tone=色

つまり「画像に2色のフィルターをかける機能」ということだね。

こんな感じ に変化させられます。

トリミングツール

[トリミング]ボタンをクリックすると、ツールが切り替わります。

できること

  1. ズーム
  2. 縦横比指定トリミング
  3. 回転
【元画像】
トリミング【横方形】
トリミング【横方形】+ ズーム
トリミング【縦方向】
トリミング【縦方向】+ ズーム
トリミング【正方形】
トリミング【正方形】+ ズーム

スタイル設定

画像のスタイルを変更できます。

テーマによっては、角丸以外のスタイルが選べるものもあります。

トリミングとスタイルを組み合わせて円形に

トリミングの[正方形]と、スタイルの[角丸]を組み合わせると、正円になります。

[カバー]ブロック

[カバー]ブロックは、画像を背景として配置し、その上に各種ブロックを配置できる特殊なブロックです。アイキャッチとして使ったり、ページ内で目立たせたい箇所に使うなど、活用次第で面白い使い方のできるブロックです。

COVER Block

カバーブロックは、キーボードで直接/coverもしくは、/カバーと入力してEnterを押しても追加できます。

カバーブロックでできること
  • 画像を挿入し、その上に各種ブロックを配置できる
    • (テキスト、ボタン、写真、イラスト、動画、吹き出し、etc…)
  • デュオトーンフィルターの適用
  • オーバーレイの適用
  • [固定背景]や[繰り返し背景]に設定できる。
  • 画像の最小の高さを指定できる。

[メディアとテキスト]ブロック

[メディアとテキスト]ブロックは、画像や動画の横にテキストを並べて配置できます。

デフォルト

SAMPLE

画像の横にテキストを配置できます。

デフォルトのままだと、単に画像の横にテキストを並べただけの印象です。

背景色を設定

SAMPLE

画像の横にテキストを配置できます。

背景色を設定しただけで、ずいぶん印象が変わります。

テーマによっては、スタイルのオプションが選べるものもあります。

メディアとテキストブロックは、キーボードで直接 /media まはた、/メディア と入力して Enter を押しても追加できます。

カラムブロックを使って画像領域とテキストを並べることも可能ですが、微妙に表示結果が異なります。

2カラムで横並びにした場合

SAMPLE

画像の横にテキストを配置できます。

画像の周囲に余白が出てしまいます。余白を無くすにはCSSの設定が必要で二度手間になりますね。

[ギャラリー]ブロック

[ギャラリー]ブロックは、複数の写真を見栄え良く並べて配置するブロックです。

選んだカラム数(横に並べる数)と挿入した画像の数に合わせて、自動的に配置を構成してくれます。

画像を[メディアファイル]にリンクさせれば、画像がフルスクリーンカルーセルに読み込まれるため、サイトの訪問者は画像を1枚ずつ見ることができます。

フルスクリーンカルーセルというのは、画像がフルスクリーンで表示され、回転式に次々と複数の写真を見ることのできる機能です。

画像をクリックしてみてください!

複数の写真を並べて見られること、カルーセル方式で1枚ずつ写真を拡大表示できることが、ギャラリーブロックのメリットです。

デメリットとしては、専用のプラグインに比べて自由度が低いということ。

Cocoonでは[Cocoon設定]-[画像]の[画像の拡大効果]項目で表示方法を選べます。

ギャラリーブロックは、キーボードで直接 /gallery まはた、/ギャラリー と入力して Enter を押しても追加できます。

まとめ

今回はWordPressに用意された4つの画像関連ブロックを比較してみました。
それぞれの特徴を把握して、上手に活用していきたいですね。

タイトルとURLをコピーしました