サポートに戻る コンテンツとメディア ブロック テキストブロック 見出しブロック

見出しブロック

見出しを使用すると、新しいセクションやサブセクションを紹介したり、テキストを分割したり、コンテンツをまとめたり、目次を自動で生成したりできます。見出しはコンテンツを整理および構造化して、訪問者だけでなく検索エンジンにも読み取りやすくします。

見出しブロックを追加する

見出しブロックを追加するには、「+」ブロック挿入アイコンをクリックして「見出し」を検索します。これをクリックして、投稿またはページにブロックを追加します。

見出しブロックを追加する。
見出しブロックを追加する

💡

キーボードを使用して新しい行に「/heading」と入力して Enter キーを押すことで、新しい見出しブロックをすばやく追加することもできます。

スラッシュインサーターを使用して見出しブロックを追加する。
スラッシュインサーターを使用して見出しブロックを追加する

特定のレベルで見出しを追加するには、「/h1 /h2 /h3 /h4 /h5 /h6」などを入力して Enter キーを押すと、さまざまなレベルの見出しを挿入できます。

ブロックを追加する手順についてはこちらを参照してください。

見出しレベル

見出しは6つのレベルの階層があり、重要性によってランク付けされ、コンテンツに順序が付けられます。最も重要な見出しはレベル1 (H1) のランクで、最も重要でない見出しはレベル6 (H6) です。

H1の見出しは検索エンジン最適化を確実にするページタイトルとして使用します。WordPress はページや投稿のタイトルに H1を自動的に割り当てます。したがって、ページの最初の見出しは H2になります。H3の見出しはサブ見出しです。H4の見出しはサブ見出しのさらに下の見出しなどです。

ツールバーで見出しレベルを選択できます。見出しテキストのサイズと外観を調整する場合、ブロック設定を使用します。

ブロックツールバー

ブロックをクリックすると、ブロック上にオプションのツールバーが表示されます。

見出しブロックの親ツールバー。
見出しブロックの親ツールバー。

見出しブロックのツールバーには次のオプションがあります。

見出しブロックの追加オプション

見出しブロックの追加オプションには以下があります。

見出しブロックの書式設定オプションのスクリーンショット。

以上のオプションを使って、見出しブロックのテキストまたは文字に書式を適用できます。次の手順で行います。

  1. 書式を適用する単語または文字をハイライトします。
  2. ツールバーから希望するオプションを選択して適用します。
ハイライト

「ハイライト」オプションを使って、見出しブロックの特定の単語または文字の色を変更するか、特定の単語または文字の背景を色付きに設定します。

  1. 書式変更するテキストを選択します。
  2. ブロックツールバーの下向き矢印をクリックします。
  3. 「ハイライト」をクリックします。
  4. 小さな画面で「テキスト」「背景」の色のオプションが開きます。この画面には選べる事前定義済みの色のオプションと、特定の好みの色を選べるカラーピッカーが表示されます。
「ハイライト」オプションを使った見出しブロックの文字色の変更と背景色の適用を示すアニメーション GIF。
「ハイライト」オプションを使って見出しブロックの文字色を変更、または背景色を適用する。
インライン画像

インライン画像では見出しに画像を追加できます。見出しブロックへのインライン画像の追加手順は以下のとおりです。

  1. ブロックツールバーの下向き矢印をクリックします。
  2. 「インライン画像」を選択します。
  3. 「メディアライブラリ」ウィンドウから使用する画像を選択します。
  4. 「挿入」ボタンをクリックして、インライン画像を追加します。
インライン画像を見出しブロックに追加する
インライン画像を見出しブロックに追加する

インライン画像のサイズを変更するには、画像をクリックして画像の幅の数字を入力または選択し、曲線矢印のボタンをクリックして変更を適用します。

インライン画像のサイズを変更する。
インライン画像のサイズを変更する。
キーボード入力

「キーボード入力」オプションを使って、選択したテキストに HTML タグを追加します。

タグを使用してキーボード入力を定義します。以下のように、通常キーボードコマンドを記述するときに使います。 タグの中のコンテンツはブラウザーのデフォルトの固定幅フォントで表示されます。例としては、CTRL + C のテキストがキーボード入力です。

コンテンツをコピーするにはハイライトしてキーボードで CTRL + C を押します。

ブロック設定

ブロックをクリックすると、右のサイドバーに追加のブロック設定が表示されます。サイドバーが表示されない場合、右上の ⚙️ (ギア / 歯車) アイコンをクリックして設定を表示させます。

ブロック設定は右のサイドバーに表示される。
⚙️ アイコンをクリックするとブロック設定が開く
色設定

色設定を使用すると、見出しブロックのテキスト、背景、リンクの色を変更できます。

色設定を使って見出しブロック全体のテキスト、背景、リンクの色を変更する。
色設定を使って見出しブロック全体のテキスト、背景、リンクの色を変更する。
タイポグラフィ設定

以下の設定で、ブロックのテキストの外観を調整します。

設定が表示されていない場合は、「タイポグラフィ」の右側にある3つの点をクリックします (右図)。 その後、以下のアクセスするオプションを選択できます。

  • フォントサイズ
  • フォントファミリー
  • 外観
  • 行の高さ
  • 装飾
  • 大文字/小文字
  • 文字間隔
タイポグラフィのドロップダウンメニュー
追加オプションが展開されたブロック設定のサイドバーのタイポグラフィ。

「フォントサイズ」ではテキストのサイズを調整できます。S サイズ、M サイズ、L サイズなど、プリセットされたサイズから選択できます。

また、以下のスクリーンショットで「1」と表示されているデフォルトの選択項目の真上にあるスライダーアイコンをクリックすると、具体的な値を設定できます。以下のスクリーンショットの「2」をクリックすると、単位を変更することができます。選択肢はemまたはremのピクセルです。

タイポグラフィのフォントサイズ設定

フォントファミリーは、使用するフォントスタイルを変更するオプションです。ドロップダウンメニューでフォントの一覧から選択します。

「外観」では、通常とイタリックの間、細字から極太の範囲で文字のスタイルを変更できます。

「行の高さ」では、テキストの上下の間隔を設定します。0を選択する場合は、モバイル端末でサイトを確認してください。

「装飾」には、下線と打ち消し線のオプションがあります。

「大文字小文字」ではすべて大文字、先頭文字のみ大文字、すべて小文字のいずれかにテキストを設定できます。

「文字間隔」では、テキストの文字間隔を設定します。単位は、デフォルト (ピクセル) から、パーセント、emremvwvhに変更できます。相対単位の詳細についてはこちらをご覧ください。

サイズ設定

特定のテーマでは、見出しブロックにサイズの設定が含まれます。

「サイズ」の横の「+」アイコンを選択して、見出しブロックの「マージン」のサイズ設定を有効化します。マージン設定は選択したブロックの周囲のスペースに適用されます。そのブロック全体を同じスペースで囲む場合は、テキストフィールドにカスタム値を入力します。

見出しブロックのサイズ設定。

ブロックの上下左右に異なるスペース値を設定する場合は、「サイズ」の横のリンクアイコンをクリックします。

マージンサイズ設定を使用して、見出しブロックにカスタムスペース値を設定する。

マージン設定の単位を変更するには、「PX」をクリックして対応している他の単位 (%、EM、REM、VW、VH) を表示します。

見出しブロックのマージンサイズ設定の単位を変更する。

高度な設定

高度な設定のタブでブロックに CSS クラスを追加することで、カスタム CSS を記述してブロックを好きなようにスタイリングできます。

高度な設定のセクションでブロックに CSS クラスを追加できます。
高度な設定のセクションでブロックに CSS クラスを追加できます。
Copied to clipboard!