正しい場所へ画像を設定し、内容を伝える代替テキストと適切な容量に整えられる。
作業を始める前に
- 自社で使用権を確認した写真・ロゴを用意します。
- 販売デモの写真は顧客向けZIPに含みません。写真の仮表示はご自身の画像に差し替えます。
設定の手順 08 STEPS
どこに表示する画像かを選ぶ
最上部の大きな写真はHero画像、本文の写真は画像ブロック、記事一覧などに使う代表画像はアイキャッチです。ヘッダーのロゴとブラウザーのサイトアイコンも別です。設定場所を決めてからアップロードします。
設定したい画像の用途が決まった。
ファイルを準備する
写真は大きすぎる原寸のままではなく、表示に十分なサイズへ調整します。Heroなら横1600〜2000px程度を一つの目安にし、用途と見え方で調整してください。ロゴの透過が必要ならPNGなどを使います。実際の対応形式はWordPressとサーバー環境にもよります。
極端に大きなファイルを避け、画質を確認できた。
メディアへ追加する
メディア → 新規メディアファイルを追加からアップロードします。ファイル名、タイトル、代替テキストを確認します。画像自体が機密情報や許可のない人物写真を含んでいないかも確認してください。
メディアライブラリで画像を選べる。
Heroと補助写真を設定する
外観 → カスタマイズ → CRAFT デザイン設定でHero画像を選びます。複数の写真を使うテーマには「ファーストビューの補助写真 2」「3」が必要に応じて表示されます。Heroタイプが単色の場合は写真が表示されないため、静止画を選びます。
選んだ写真がファーストビューへ反映される。
本文の画像ブロックを置き換える
固定ページまたは投稿で画像ブロックを選び、置換やメディアライブラリから画像を選びます。仮表示の説明文が残っていないか確認します。画像を新しいブロックで増やすより、既存の画像枠を使うと構成を保ちやすくなります。
画像枠と本文の位置関係が保たれている。
代替テキストを書く
情報を伝える画像には、画像の目的や内容がわかる短い文章を入力します。「画像」「写真」だけの説明や検索語の羅列にしません。純粋な装飾画像は空の代替テキストにする判断もあります。キャプションは画像の下へ見せる説明で、代替テキストとは別です。
| 項目 | 入力する内容・例 |
|---|---|
| 代替テキスト例 | 検査室で部品の寸法を測定する様子実際に写っている内容に合わせます。 |
画像の役割に合う説明になっている。
表示の切り抜きを確認する
テーマは枠に合わせて写真をトリミングして表示することがあります。人物の顔や重要な被写体が切れていないか、パソコンとスマートフォンの両方で確認します。端に重要な情報を入れた画像は避け、必要なら画像側の構図を調整します。
主要な被写体が必要な範囲で見えている。
アイキャッチと読み込みを確認する
記事の設定でアイキャッチ画像を指定し、一覧と記事ページを確認します。ページを再読み込みして画像が欠けないかも確認します。メディアから画像を削除すると使用中のページへ影響するため、利用箇所を調べてから整理します。
画像切れや不必要に重い表示がない。
終わったら確認すること
- デモ写真・仮表示・不要な説明文を確認した。
- ロゴとサイトアイコンを別に確認した。
途中で困ったときは
写真を選んでもHeroに出ません
Heroタイプが静止画か、設定を公開して保存したかを確認します。補助写真だけを設定していないかも確認してください。
代替テキストを変えたのに本文が変わりません
既に本文へ挿入した画像はブロック側に値を持つことがあります。該当の画像ブロックの代替テキストも確認してください。
参照した公式資料
画面や条件が異なる場合は、ご利用環境と公式の最新案内を確認してください。
手順確認日 2026.10.29 ／ 作業時間は目安です。反映待ちや環境によって異なります。
管理画面の項目を調べる
入力欄の意味・操作・確認方法を、項目ごとに確認できます。
メディア → ライブラリ／メディアファイルを追加 →外観 → カスタマイズ →