会社・店舗名、ロゴ、Heroのタイトル・補足文・画像・CTAを自分の事業の内容に変更します。
作業を始める前に
- CRAFTを有効化し、初期コンテンツの取り込みを済ませます。
- 使用許可のあるロゴと事業写真を用意します。人物、店舗、商品を掲載する場合は公開できる素材か確認します。
- CTAは読者に次の行動を案内するボタンです。リンク先を公開済みのサービス案内や問い合わせなどに決めておきます。
設定の手順 06 STEPS
CRAFTのデザイン設定を開く
「外観 → カスタマイズ」を開き、「CRAFT デザイン設定」を選びます。固定ページの本文とは異なる設定画面であることを確認します。プレビューがトップページでなければ、プレビュー内でトップへ移動してから調整します。
Heroタイトル、Heroサブコピー、会社・店舗名、色や画像などの入力欄を確認できました。
会社・店舗名とロゴを整える
「会社・店舗名（ヘッダー・フッター）」に表示したい名称を入力します。ロゴはカスタマイザーの「サイト基本情報」にあるロゴ欄から登録します。切り抜き画面が出たら文字や図形が欠けない範囲を選びます。WordPressのサイトタイトルも正しい名称か確認します。
| 項目 | 入力する内容・例 |
|---|---|
| 会社・店舗名の例 | 私たちの事業名実際に公開する名称に置き換えます。サイトタイトルとCRAFTのブランド表示は別設定です。 |
ヘッダーとフッターの名称、ロゴの見え方をプレビューで確認できました。
Heroの文章を短く具体的にする
Heroタイトルに誰にどのような価値を届けるかを短く入力し、Heroサブコピーでサービスや対象地域を補います。裏付けのない実績や最上級の表現は残さず、自分の提供内容を説明します。見出しの改行は画面幅で変わるため、一行になることだけを目標に長文を詰め込まないようにします。
| 項目 | 入力する内容・例 |
|---|---|
| Heroタイトルの例 | 毎日の仕事を、使いやすく。 |
| Heroサブコピーの例 | サービスの内容と、相談できることをご案内します。自分の事業を具体的に説明する内容へ変更します。 |
初めて訪れた人が内容を把握できる文章になり、狭い表示でも文字が欠けていないと確認できました。
自分の写真を登録する
Heroタイプを静止画にし、「Hero画像」から写真を登録します。写真内に重要な文字を入れすぎず、主役が中央付近にある写真を選びます。補助写真2・3の欄があるデザインでは、その欄にも別の写真を設定します。欄がないテーマで同じ設定が使えると考えず、表示される項目だけを使います。
写真用の仮表示が自分の写真に変わり、主役や商品の重要な部分が切れていないことを確認できました。
色とCTAのリンクを調整する
メインカラーとサブカラーをブランドに合わせ、文字やボタンの読みやすさを確認します。CTAの文言は行き先が分かる言葉に変え、CTAリンクには公開済みページのURLを入力します。同じページ内のアンカーを使う場合は、実際にその位置へ移動できるか確かめます。
| 項目 | 入力する内容・例 |
|---|---|
| CTAの文言の例 | サービスを見る |
| CTAリンクの例 | https://example.com/services/説明用のURLです。公開済みの自分のページから実際のURLをコピーします。 |
| メインカラーの例 | #215775色の設定欄で変更します。ボタンと文字が区別できるか確認してください。 |
CTAの文言と行き先が一致し、色を変えても文字や操作部分を読み取れます。
画面幅を変えて保存する
カスタマイザーのパソコン・スマートフォン表示で、ロゴ、タイトル、画像、ボタンを確認して保存・公開します。カスタマイザーの公開操作は外観設定の反映です。本文の下書きを公開する操作とは別です。保存後に実際のサイトを開き、上下の余白とCTAのクリックも確認します。
設定が保存され、実際の表示でも名称、写真、色、リンク先を確認できました。
終わったら確認すること
- 英語の装飾見出し、書体、フッターの全段落などが、すべて自由入力できる設定になっているわけではありません。用意された入力欄の範囲で調整します。
- 画像をメディアライブラリから完全削除すると、Hero以外で同じ画像を使っている箇所にも影響します。整理は利用箇所を確認してから行います。
途中で困ったときは
固定ページを編集してもHeroが変わりません。
Heroタイトル、サブコピー、CTA、Hero画像はCRAFTデザイン設定で変更します。本文の大きな見出しとHeroは別の表示です。プレビューでどちらを変更しているか確認してください。
スマートフォンで写真の左右が切れます。
表示枠に合わせた切り抜きによるものです。重要な被写体が端に寄っていない写真へ替え、プレビューで確認します。デザインごとに写真の枠が違うため、1枚の写真が全テーマで同じように見えるとは限りません。
参照した公式資料
画面や条件が異なる場合は、ご利用環境と公式の最新案内を確認してください。
手順確認日 2026.10.29 ／ 作業時間は目安です。反映待ちや環境によって異なります。