【ブロックエディター】ブログに必須の見出しブロックの使い方!各テーマの見出しのデザインも紹介

【ブロックエディタ】ブログに必須の見出しブロックの使い方!各テーマの見出しのデザインも紹介

ブログ記事を書く上で、絶対に必要な「見出し」

見出しを適切に使うことは、読者のためにもSEOの観点でもとても大切です。

WordPressのブロックエディター(Gutenberg)には、見出しを作るための「見出しブロック」が標準の機能として用意されています。

見出しブロックは絶対に使うので覚えましょう…!
この記事の内容まとめ
  • 見出しブロックの基本的な使い方
  • 見出しブロックを簡単に配置する方法
  • いろいろなテーマの見出しスタイルの紹介

WordPress標準の見出しブロックでは、装飾の無いシンプルなスタイルしか設定できません。

ですが、WordPressテーマによってはオリジナルの見出しスタイルが用意されていることがあります。

さとしん

せっかくならオシャレな見出しのデザインにしたいですよね…!

もちろん、自分でCSSを書いてデザインを整えても良いですが、ワンクリックで簡単にオシャレなデザインを設定できるのはとても助かります。

そこでこの記事では、WordPress標準の見出しブロックの使い方と合わせて、一部のWordPressテーマの見出しブロックのデザインもご紹介します。

目次

ブログ記事に必須の見出しブロックの使い方!

では、早速ブロックエディター、見出しブロックの使い方を解説していきます。

STEP
メインコンテンツエリアで+ボタンをクリック
ブロックの追加
STEP
見出しを探してクリック
見出しブロックの使い方-1
STEP
ツールバーからh2~h6のお好みの階層を選択
見出しブロックの使い方-2

h1も選択できますが、記事内でh1を使うことは少ないと思います。

STEP
見出しの文字を入力する
見出しブロックの使い方-3

基本的な見出しブロックの使い方は以上です。

さとしん

とっても簡単ですね…!

「/」を使って見出しブロックを簡単に呼び出す方法

ブロックエディターでは、段落ブロック内に「/ + ブロック名」を入力することでブロックを検索して呼び出すことができます。

見出しブロックの場合は、以下の名称でブロックを呼び出すことができます。

  • /heading
  • /見出し
さとしん

良く使うので覚えておきましょう…!

「#」を使って見出しブロックを簡単に作る

Markdown記法というものを使うと、更に簡単に見出しブロックを作ることができます。

方法は簡単で、段落ブロックの先頭にh1~h6の階層に合わせた数の「# + 半角スペース」を入力するだけでOKです。

例えば、見出しの階層ごとに以下のように入力します。

##

h2

###

h3

####

h4

上記のように入力すると自動で見出しブロックが挿入されるので、普通通りに見出しタイトルを入力するだけでOKです。

色々なテーマの見出しブロックデザインを紹介!

WordPress本体側で用意されている見出しブロックは、特に装飾もされていないシンプルなスタイルになっています。

見出しのスタイルをもう少し凝ったスタイルにしたい場合は、WordPressテーマを変更するのは最も単純な方法です。

各テーマではオリジナルの見出しデザインを用意してくれていることがあります。

今回は、100%GPLの3つのWordPressテーマやプラグインの見出しブロックのデザインを紹介します。

さとしん

テーマ選びで悩んでいる方には良い判断材料になるかも…!

SWELLの見出しブロックはオシャレでバリエーション豊富!

WordPressテーマ『SWELL』
SWELL』公式サイト

ブロックエディター完全対応のWordPressテーマ『SWELL』では、追加のプラグインなど不要で、テーマを適用するだけで見出しブロックのスタイルが追加されます。

さとしん

SWELLの見出しブロック、オシャレで好きです…!

まず、SWELLの見出しブロックでは以下の数のスタイルが追加されます。

見出し階層選べるスタイルの数
h211種類
h37種類
h42種類

数がとても多いので、参考に「h2」で選べるスタイルを画像にまとめてみました。

SWELLの見出しブロック
クリックすると拡大できます

見出しのスタイルや色の設定は、管理画面のカスタマイザーから見出し階層ごとに変更できます。

SWELLの見出しブロック-2

ここで設定しておくことで、記事執筆中は見出しのデザインやカラーの設定を考える必要がないので、記事を書くことに集中できるのも大きなメリットです。

VK Blocksの見出しブロックはシンプルでクール!

WordPressテーマ『Lightning』
Lightning』公式サイト

VK Blocks』は株式会社ベクトルさんが開発されている無料プラグインです。

ベクトルさんは『Lightning』や『Katawara』というコーポレートサイトなどで人気のWordPressテーマも開発されています。

テーマのライセンスを購入すると上位版の『VK Blocks Pro』というプラグインを使用できるようになります。

『VK Blocks』では見出しブロックのスタイルが8種類用意されています。

VK Blocksの見出しブロック

余計な装飾はせず、シンプルな見出しのデザインになっています。

投稿画面のサイドバーからワンクリックで変更できる仕様になっています。もちろん、色も自由に変更可能です。

VK Blocksの見出しブロック-2
さとしん

全体的にキチっとしていてクールな印象です…!

見出しブロックを適切に使って、見やすい記事を作りましょう

見出しを適切な場所、適切な階層構造で使うことは、読者のためにもSEOの観点でもとても大切です。

ブロックエディターの「見出しブロック」は、記事内で紹介した方法で簡単に呼び出すことも階層を変えることもできます。

さとしん

使い方を必ず覚えておきましょう…!

また、WordPressテーマで用意されている見出しのデザインも紹介しました。

デフォルトの見出しスタイルは装飾も無くとてもシンプルです。

アクセントを付けたい場合は、今回紹介したWordPressテーマの導入もぜひ検討してみてください。

今回は以下の2つのテーマとプラグインをご紹介しました。

  • SWELL(テーマ)
  • VK Blocks(プラグイン)

特に、今回紹介した『SWELL』はブロガーさん向けのテーマなので、オシャレな見出しブロックが数多く用意されているのでオススメです。

では、ブロックエディターで楽しくコンテンツを作っていきましょう。

最後まで読んでいただきありがとうございました!

【ブロックエディタ】ブログに必須の見出しブロックの使い方!各テーマの見出しのデザインも紹介

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

この記事を書いた人

WordPressとSWELLが好きな20代のブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。

目次
閉じる