SWELLの始め方ガイド|これからSWELLを使い始める方はこちら→SWELLの始め方ガイド→クリックタップ

WordPressブロックエディターの見出しブロックのデザインと使い方を紹介

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

WordPressのブロックエディターで見出しを設定する方法を紹介します。

ブロックエディターでは「見出しブロック」というブロックで簡単に見出しを作れます。

この記事の内容
  • 見出しブロックの使い方
  • 見出しブロックを簡単に記事内に配置する方法
  • いろいろなテーマの見出しデザインの紹介
見出しブロックを使っている動画

※詳しくは「見出しブロックの基本的な使い方」で紹介

WordPress標準の見出しブロックはとてもシンプルなデザインです。

WordPressテーマやプラグインを使うことで見出しのデザインを変えることもできるので、記事の後半で例を紹介します。

では、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のWordPressテーマで設定できる見出しブロックのデザインを紹介します。

さとしん

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

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

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

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

さとしん

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(プラグイン)

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

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

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


ブロックエディターの関連記事

ブロックエディターの使い方完全ガイド↓↓

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次