見出しブロック

ブロック一覧へ戻る

見出しはページを構造化しやすくすると共に、人にも検索エンジンにも内容を読みやすくします。

見出しブロックを追加するには、ブロックを追加ボタンをクリックします。または、空の新しいブロックに /heading (または /見出し)と入力して Enter キーを押します。


スラッシュコマンドを使って見出しブロックを挿入することもできます。

ブロック追加の詳しい方法はこちらをご覧ください。

エディターはページタイトルが <h1> タグであることを考慮して、検索エンジン向けに最適化されたレイアウトを自動的に行います。そのため後続の見出しブロックは <h2> 以降が使われます。しかし、お好みのスタイルに合った見出しレベルをツールバーから選ぶこともできます。

ショートカット/マークダウン

エディターには見出しブロックを追加する簡単な方法がもう一つあります。## に続けてスペースを入力すると H2、### に続けてスペースなら H3、などです。

ブロックツールバー

各ブロックにはそれ固有のコントロールがあり、エディター内でブロックを操作できます。見出しブロックは次のオプションをツールバーで提供します:

見出しツールバーには見出しタグ選択、テキスト配置オプション、太字、斜体、ハイパーリンクなどがあります。
  • 変換
  • 移動用ハンドル
  • 配置オプション
  • すべての見出しタグ
  • テキスト配置
  • テキスト編集オプション
  • 他のオプション

変換

見出しブロックは段落ブロック、カラム、グループ、リストブロック、引用ブロック、またはプルクオートブロックへ変換できます。

移動用ハンドル

上下の矢印を使うと、ドキュメント内でブロックを上下に移動できます。

エディター内でブロックを移動する詳しい方法はこちらをご覧ください。

配置オプション

現在のテーマがサポートしていれば、幅広と全幅の配置オプションを利用できます。

すべての見出しタグ

ブロックツールバー内で見出しタグを選んで変更できます。

テキスト編集オプション

太字とイタリック

とても頻繁に使われるので、太字とイタリックの専用ボタンがツールバーにあります。ショートカットは CTRL+b (または Command+B)が太字、CTRL+i (または Command+i)がイタリックです。

ハイパーリンク挿入

選択中のテキストにハイパーリンクを挿入するにはチェーンリンクアイコンを使います。キーボードショートカットの CTRL+k (または Command+k)も使えます。

テキストボックスに「検索」とあるのは、サイト内を検索できることを示しています。キーワードを入力すると、現在のサイト内の投稿や固定ページが一覧表示され、サイト内リンクを作成できます。

新しいタブで開く

トグルスイッチで新しいページをどこに開くかコントロールできます。

  • オフならブラウザーの同じタブ
  • オンならブラウザーの新しいタブ

デフォルトはオフなので、リンクされたページをどこに表示するかをサイト訪問者に自分でコントロールしてもらいます。

ヒント: リンクしたいサイトの URL がクリップボードにある場合は、テキストを選択してから CTRL+v (または Command+v) を使えば、そのテキストにハイパーリンクを追加できます。

他のテキスト編集オプション

他のテキスト編集オプションのドロップダウンを表示したブロックツールバー

インラインコード

テキスト内のちょっとしたコードの書式を変えるにはインラインコード機能を使います。書式を変えるだけでなく、コードが表示されず実行されてしまうのを避けることもできます。

インライン画像

インライン画像機能を使うと段落に画像を追加できます。オプションが一つあり、画像のピクセル幅を入力します。

打ち消し線

打ち消し線オプションを使うと選択したテキストに打ち消し線を追加できます。

上付き下付き

下付きオプションを使うと選択したテキストを下付きにできます。

上付きオプションを使うと選択したテキストを上付きにできます。

テキスト色

インライン表示されるテキスト色ツールで色を選ぶと、選択したテキストの色を変更できます。

他のオプション

追加設定を非表示

追加設定を非表示オプションを使うと、エディターのサイドバーにあるブロック設定パネルを隠す(または表示する)ことができます。

コピー

コピーを使うと、選択したブロックをコピーしてエディター内の好きな位置へ貼り付けできます。

複製

複製を使うと、選択したブロックを複製できます。

前に挿入

新しいブロックを選択したブロックの前へ挿入します。

後に挿入

新しいブロックを選択したブロックの後へ挿入します。

移動

移動を選ぶと、コンテンツ内に青い線が現れます。その後、矢印を使って線を上下に移動し、選択したブロックの移動先を指定できます。最後にキーボードの Enter を押すとブロックがそこへ移動します。

HTML として編集

HTML として編集を使うと、選択したブロックの HTML コードを変更できます。

再利用ブロックに追加

再利用ブロックに追加オプションを使うと、選択したブロックを再利用ブロックのリストへ追加できます。すると他の投稿や固定ページでそのブロックを利用できます。

グループ化

ブロックをまとめて一つの単位として扱いたい場合、グループ化オプションを選択します。例えば共通の背景色や他のブロックをグループへ追加できます。

ブロックを削除

ブロックを削除オプションを使うと、選択したブロックをコンテンツから削除できます。

ブロック設定

どのブロックも、ブロックツールバーにあるオプションに加えて、固有のオプションがエディターのサイドバーにあります。もしサイドバーが見当たらなければ、公開ボタンの隣にある「歯車」ボタンをクリックしてください。

ブロック設定はサイドバーにあります。

見出し設定

見出しブロックオプションは文字サイズとカスタムカラーを指定できます。

サイドバーのブロック設定には、見出しタグの文字サイズを変えるオプションがあります。デフォルトサイズから選ぶか、カスタムサイズを入力します。

見出しタグのカスタムカラーもブロック設定で指定できます。

高度な設定

サイドバーのブロック設定の高度な設定パネルには、HTML アンカー追加 CSS クラスのオプションがあります。

The heading block suggests a hierarchy based on proper SEO practices.
見出しブロックは適切な SEO 手法に基づいた階層構造を提案します。
You can add HTML Anchors and CSS classes from the sidebar.
サイドバーから HTML アンカーと CSS クラスを追加できます。

HTML アンカーはページジャンプを作るのに便利なツールです。ブロックを HTML ビューに切り替えると、見出しタグに HTML アンカーの入力値が ID 属性として追加されるのが見えます。追加 CSS クラスの入力値は class 属性として見えます。

変更履歴

  • 更新: 2021-02-28
    • 画像を追加、WP 5.7 向けに更新
  • 更新: 2020-08-27
    • WP 5.5 向けの画像を追加
  • 更新: 2020-06-18
    • 「ブロックの一覧へ戻る」をページ先頭に追加
    • 「変更履歴」を追加
  • 新規作成: 2019-03-07

原文

この記事は役に立ちましたか ? どうすればさらに改善できますか ?