A diagram displaying the concept of a user and a search engine using headings. Below the user and search engine avatar, two arrows point to a mockup article titled Learn all about beets with headings and paragraphs.

見出しは、人間のユーザーをはじめ、検索エンジンに内容をよく理解してもらうために大切です。

このレッスンでは

  1. 見出しを追加する
  2. 見出しのスタイルを設定する
  3. 見出しのテキストを編集する
  4. 見出しの書式設定

について紹介しています。

1. 見出しを追加する

The Choose heading settings panel displays six heading options, a learn more notice and a show all settings button.
見出しは、大きいものから順に、H1、H2、H3、H4、H5、H6の6種類から選択できます。 

見出しは簡潔で、ユーザー向けに書かれたものであるべきです。 Webサイトでは、見出しを使い分け、コンテンツを整理する方法が数多くあります。

・トップの見出し(H1)

トップレベルの見出しは、ユーザーや検索エンジンが最初に目にする言葉で、通常H1で設定します。これは、新聞でいうところの見出しのようなものです。

A newspaper breakdown of how the H1, H2 and H3 heading structure could be organized and read. Headlines are highlighted with an appropriate heading tag next to it.


・子見出し(H2)

サイトの他のセクションには、小見出しが含まれることがあります。これらは通常、H2で構成されています。

・さらなる細かい見出し(H3)

H3はH2の下に入れ子にすることができます。

An H3 heading is selected in the designer. The Choose heading type settings panel is below displaying the H1- H6 heading buttons, a learn more message with a Ok, got it button and a show all settings button.

2. 見出しのスタイルを設定する

見出しのスタイルは以下の手順で設定します。

  1. 「追加」パネルからキャンバス上に追加します。
  2. 見出しをダブルクリックして内容を編集し、スタイルパネルでフォント、フォントサイズ、フォントウェイト、色などを編集します。
  3. 既にスタイル付きの見出しがある場合は、それにクラス名を付けることができます。 
On the left, the typography section of the Style panel displays a font dropdown menu, weight dropdown menu, size, height and color input fields, four align settings, six style options and a more type options button. On the right, a class called Section Title is active in the selector panel.

3. 見出しのテキストの編集

テキストを編集するには、

  1. 要素をダブルクリックするか、要素を選択してからEnterキーを押します。
  2. その後、プレースホルダーのテキストを選択し、独自のコンテンツに置き換えます。

4. 見出しの書式設定

見出しの特定の部分を太字にしたり、斜体にしたり、スタイルを設定したい場合は、見出しの要素をダブルクリックして、コンテキストメニューからスタイルを設定します。