画像を使用する

画像はサイトの視覚的な魅力を高め、情報を効果的に伝え、訪問者のエクスペリエンスを向上させます。このガイドでは、WordPress サイトに画像を追加するさまざまな方法をご紹介します。

画像を使用してできることは多数あるため、複数のページに分けて説明します。

• WordPress.com にアップロードできる画像ファイルの種類を確認するには、「アップロードできるファイルの種類」ガイドを参照してください。
• サイトに画像をアップロードするには、画像ブロックを使用します。
• ギャラリーをアップロードするには、ギャラリーブロックまたはタイルギャラリーブロックを使用します。
• スライドショーをアップロードするには、スライドショーブロックを使用します。
• ヘッダーまたはバナースタイルの画像をアップロードするには、カバーブロックを使用します。
• 画像をテキストと横並びにして追加するには、メディアとテキストブロックを使用します。また、2つの画像を比較するには、画像比較ブロックを使用します。
• サイトに使用する無料画像はこちらのソースから見つけることができます。

• 画像の切り抜き、サイズ変更、回転、配置、キャプションを行うには、WordPress エディターのブロック設定を使用します。
  • 「画像ブロック」ガイドでこれらの設定の詳細を参照するか、他のメディアブロックを確認してください。
• ダッシュボードの「メディア」セクションを使用して、サイトの画像を表示および削除します。
• 「メディア」では画像の回転、切り抜き、反転も可能です。方法については、「メディアで画像を編集する」を参照してください。
• 画像の最適化を行って、画像の読み込みを速めて保存スペースを最小化します。

• 画像アップロードのトラブルシューティング – 画像がアップロードされていませんか ? 画像を正常にアップロードするためのヒントをいくつかご紹介します。
• ぼやけた画像のトラブルシューティング – アップロードされた元の写真が高画質であっても、サイトで画像がぼやけて表示される理由を説明します。

以下は、WordPress エディターで画像を表示する方法の例です。サイトで使用しているテーマに応じて画像の見え方が異なるため、ご自分のサイトでお試しください。

画像の出典はすべて Pexels 無料写真ライブラリです。

単一の画像を追加するには、画像ブロックを使用します。

デフォルトスタイル:

円形スタイル:

2つの画像を並べて表示するには、ギャラリーブロックを使用します。

1つ目の画像をすでに挿入している場合は、その横に2つ目の画像をすばやくドラッグ & ドロップできます。コンピューターから画像ファイルをドラッグする場合は、最初の画像の横に縦線が表示されるまでファイルを長押しして離します。以下の動画は、既存の画像の横に新しい画像をドラッグ & ドロップする方法を示しています。

メディアとテキストブロックを使用すると、画像や動画の横にテキストを並べて配置できます。モバイル端末でメディアとテキストを縦積みする便利なオプションもあります。

画像の周りでテキストを折り返すオプションについては、「画像とテキストを配置する」ガイドをご覧ください。

全幅ヘッダーとバナースタイルの画像には、カバーブロックを使用します。画像を固定背景 (「パララックス効果」または「パララックススクロール」とも呼ばれます) に設定したり、カラーオーバーレイを追加したり、画像の上にテキストやその他のコンテンツを追加したりすることもできます。

パララックス効果を適用した固定背景:

固定していない背景:

目を引く配置で複数の写真をまとめて表示するには、ギャラリーブロックを使用します。

スライドショーブロックを使用すると、ページや投稿に大きいスペースを取らずに多数の写真を共有できます。

タイルギャラリーブロックには、次の4つのスタイルがあります 。

• タイルモザイク
• 円形格子
• 正方形タイル
• タイルカラム

タイルモザイク

円形格子

角を丸くするオプションを使用した正方形タイル

タイルカラム

画像比較ブロックを使用すると、2つの画像を左右 (または上下) に並べ、スライダーを使って2つの画像の違いを見せることができます。