ホーム » 見出しのデザインを変える

見出しのデザインを変える

見出しのデザインを変える

記事の見出しに線や色の帯を付け、内容の区切りをわかりやすくします。

こんなときに使います

たとえば:長い説明のどこから話題が変わるのか、読み取りにくい。

見出しに区切りを付け、読みたい部分を探しやすくします。本文をすべて見出しにする使い方は避けます。

操作する画面の開き方

WordPressの「投稿」または「固定ページ」から編集画面を開き、ブロックエディターで操作します。

v2.8.0の実画面

画面を見ながら確認する

見出しの現行スタイル一覧2
手順②:下線・左ボーダー・背景帯・中央寄せから選べます。 画像を押すと拡大できます。表示中の値は撮影時の例です。
  1. 本文の見出しをクリックし、右側の「ブロック」タブを開きます。
  2. 「スタイル」で、下線・左ボーダー・背景帯・中央寄せから使うデザインを選びます。
  3. 保存し、公開ページで文字の読みやすさとスマホでの折り返しを確認します。

操作手順

  1. 投稿や固定ページをブロックエディターで開きます。
  2. 飾りを付けたい見出しをクリックします。
  3. 右側のブロック設定から「スタイル」を開きます。
  4. デザインを選んで保存し、プレビューで確認します。

どれを選ぶ?

  • 下線:見出しの下に線を引きます。
  • 左ボーダー:見出しの左に太い線を付けます。
  • 背景帯:色の帯に白い文字を表示します。
  • 中央寄せ:文字を中央に置き、その下に短い線を付けます。

線や帯の色は、カスタマイザーの「メインカラー」に連動します。見出しごとに別々の装飾色を決める設定ではありません。

元に戻したいとき

「デフォルト」を選びます。スタイルを選んでいない見出しは、そのままです。長い見出しがスマホで何行になるかも確認しましょう。

v2.8.0で追加されたデザインを使う

見出しのデザインが追加されています。見出しを選択し、右側の「ブロック」→「スタイル」で目的のデザインを選びます。文字サイズ・太さ・背景色などの設定も確認し、保存後の公開ページで読みやすさを確かめてください。

ここまでできたら完了

  • 目的の見出しだけにスタイルが付き、保存できた
  • スマホでも見出しが切れず、本文との区別がつく