見出しの階層を保ち、ボタンや文章のリンクを正しく設定できる。
作業を始める前に
- CRAFTの本文はWordPress標準ブロックで構成しています。
- 構成を壊さないよう、変更前にリビジョンやバックアップを確認します。
設定の手順 08 STEPS
リストビューで全体を見る
編集画面左上のリストビューを開き、グループの中にある見出し・段落・画像・ボタンを確認します。大きなグループを削除すると中身も消えるため、まず編集するブロックを一つだけ選びます。
目的のブロックを選択できる。
H1・H2・H3の役割を知る
H1はページの主題、H2は大きな節、H3はその中の項目です。CRAFTのホームの主見出しはHero、下層ページはページ冒頭の主見出しです。本文へH1を重ねず、内容のまとまりに合わせてH2、H3を選びます。
| 項目 | 入力する内容・例 |
|---|---|
| H1 | ページ全体の題名原則としてページの主題を一つにします。 |
| H2 | 事業案内大きなまとまりの見出し例です。 |
| H3 | 精密加工事業案内の中の項目例です。 |
見出しの階層が内容と対応している。
文字サイズだけを目的に見出しを選ばない
段落の文字を大きくしたい場合は、利用できる文字サイズやスタイルの設定を使います。H2を飛ばしてH4にするといった使い方は避けます。テーマのデザインがブロックの文字サイズより優先される部分もあります。
見た目と構造を区別して編集できた。
段落と改行を使い分ける
Enterで新しい段落、Shift+Enterで同じ段落内の改行を入力できます。余白を作るために空の段落を大量に重ねず、グループや余白の設定を確認します。スマートフォンで不自然な改行にならないかも確認します。
文章の段落と行間が自然になっている。
ボタンの文字とリンクを設定する
ボタンブロックを選び、表示する文字とリンク先URLを変更します。「詳しく見る」だけではわかりづらい場合は、移動先が伝わる名前を使います。リンク設定を確定してからページを保存します。
| 項目 | 入力する内容・例 |
|---|---|
| ボタンの文字 | 事業案内を見る移動先を表す名前です。 |
| リンク先 | https://example.com/services/実際の公開URLを入力します。 |
通常URLからボタンを押して目的のページへ進める。
ページ内アンカーを設定する
対応する見出しやグループの高度な設定にHTMLアンカーがある場合、半角英数字とハイフンで一意の名前を付けます。リンクには#とその名前を使います。別ページから案内するときはページのURLも付けます。
| 項目 | 入力する内容・例 |
|---|---|
| HTMLアンカー | service-detail先頭に#は入力しません。同じページ内で重複させません。 |
| 同じページ内のリンク | #service-detailリンク側に#を付けます。 |
ページ内の目的の位置へ移動できる。
HTMLタグと投稿タグを区別する
h2、p、a、header、footerなどのHTMLタグは文書の構造です。投稿設定のタグは記事を分類するキーワードです。通常の編集ではコード編集へ切り替えず、標準ブロックで操作します。見知らぬスクリプトをカスタムHTMLに貼る必要はありません。
記事の分類とHTML編集を取り違えていない。
保存して表示とリンクを確かめる
プレビューで見出し、段落、ボタン、スマートフォンの折り返しを確認します。「無効なブロック」と表示された場合は、そのまま再保存を繰り返さずリビジョンや変更箇所を確認してください。
ブロックのエラーがなく、意図した表示になっている。
終わったら確認すること
- H1を本文に重複して追加していない。
- ボタンとアンカーが保存後も動作する。
途中で困ったときは
HeroのH1が固定ページで見つかりません
ホームのHeroはカスタマイザーで編集します。本文のブロックとは別のテーマ機能です。
リンクが#だけのままです
#だけでは具体的な移動先になりません。実際のページURLまたは存在するHTMLアンカーへ変更してください。
参照した公式資料
画面や条件が異なる場合は、ご利用環境と公式の最新案内を確認してください。
手順確認日 2026.10.29 ／ 作業時間は目安です。反映待ちや環境によって異なります。