見出しウィジェットの使い方

準備：編集したいページを開く

1. WordPress管理画面の「固定ページ」→「固定ページ一覧」を開きます。
2. 編集するページの「Elementorで編集」を押します。

左に設定欄、右にページの見た目が表示されれば準備完了です。開き方がわからない場合は、ページを作成・編集する手順をご覧ください。

① 編集する見出しを選ぶ

すでにある文字を変えたい場合：右側のページ上で、変更したい見出しを1回クリックします。左上に「見出しを編集」と出れば選択できています。

見出しを新しく追加する場合：画面左上の「＋」（要素を追加）を押してから、次の順番で操作します。

12

1. 左側の検索欄に「見出し」と入力します。
2. 検索結果の左側にある「見出し」を、右側の入れたい場所までドラッグします。ドラッグとは、マウスのボタンを押したまま移動し、置きたい場所で離す操作です。

② 表示する文字を入力する

123

1. 左上の「コンテンツ」を押します。
2. 「タイトル」欄の文字を消し、「サービスのご案内」と入力します。
3. 「HTMLタグ」は、ページ内の大きな区切りなら「H2」を選びます。

「リンク」は、見出しを押したときに別ページへ移動させる場合に使います。今回は空欄のままで大丈夫です。

HTMLタグとは？
文章の中で「どの階層の見出しか」を示す設定です。H2は章の見出し、H3はその中の小見出し、と考えてください。文字を大きくするための設定ではありません。

12

③ 文字の大きさを変える

今回はパソコン表示の文字サイズを32pxにします。「px」は大きさの単位で、数字を大きくすると文字も大きくなります。

12

1. 画面上部のパソコン形のアイコンを押します。
2. 左側の「スタイル」を押します。
3. 「タイポグラフィ」右側の鉛筆マークを押します。文字の大きさなどを設定する欄が開きます。

地球のマークではなく、その右隣の鉛筆を選んでください。

3

4. 「サイズ」の単位が「px」であることを確認します。
5. 右側の数字欄に「32」と入力します。
6. 入力欄の外をクリックして、右側の見た目を確認します。

ほかの項目は、今回はそのままで大丈夫です。

成功の目印：右側の見出しの文字サイズが変わります。32pxは練習用の例なので、実際のページに合わせて調整してください。

④ スマートフォンで読めるか確認する

画面上部のスマートフォン形のアイコンを押します。右側が縦長の画面に切り替わります。

12

• 文字が画面の外にはみ出していませんか？
• 1文字だけが次の行に残るなど、不自然な改行になっていませんか？
• 小さすぎて読みにくくありませんか？

大きすぎる場合は、スマホ表示のまま「スタイル」→「タイポグラフィ」を開き、サイズを少し小さくします。例として24pxから調整してください。最後にパソコンのアイコンへ戻し、両方の表示を見比べます。

⑤ 保存して、実際のページを見る

1. 右上の「公開」または「更新」を押します。ボタン名はページの状態やバージョンによって異なります。画像の環境では「公開」と表示されています。
2. 保存処理が終わるまで待ちます。
3. 実際のページを開き、見出しが変わっているか確認します。スマートフォン実機でも確認すると安心です。

「公開」は閲覧者に見えるページへ反映する操作です。練習中のページを公開したくない場合は、右側の矢印から下書きとして保存します。保存・公開・元に戻す操作の詳細