Gutenberg ブロック「見出し」 機能簡単説明します

WordpressWordpress
スポンサーリンク

Gutenberg ブロック「見出し」 Gutenbergブロック機能内にある一般ブロックの「見出し」の紹介です。一般ブロック内に設定されている「見出し」は、ブロック内で見出しを作成するときに用いる機能です。

 

通常 記事作成には 見出しを 使用するかと思うのですが、頻繁に 使用する機能 なので、ブロックメニューの 「 よく使うもの 」の他に、新しいブロック設定場所に 見出しアイコンが 表示されている場合があるため、+ボタン をクリックしてメニュー開示する 必要は ほとんどありません。

 

Gutenberg ブロック「見出し」

 

Gutenberg ブロック「見出し」

 

当サイトにお越しいただきまして、ありがとうございます。とてもうれしく思います☆不思議な話系から、ハウツーまでいろいろサイトで語りたいhukuです。

今回は、Gutenbergブロック機能内にある一般ブロックの「見出し」の紹介です。一般ブロック内に設定されている「見出し」は、ブロック内で見出しを作成するときに用いる機能です。

 

通常 記事作成には 見出しを 使用するかと思うのですが、頻繁に 使用する機能 なので、ブロックメニューの 「 よく使うもの 」の他に、新しいブロック設定場所に 見出しアイコンが 表示されている場合があるため、+ボタン をクリックしてメニュー開示する 必要は ほとんどありません。

 

初めて ブロックエディタ―を 使ったときに、戸惑った ことですが、見出しアイコンを クリックすると、h2見出しが 設定されているため、他の 見出し設定方法が分からない と焦ることがありました。

 

実際、h1からh6まで 設定可能なのですが、h2以外の段階を 利用する場合、見出し段階を 変更する必要があるためです。

 

慣れると、どってことないことなんですがね…(;’∀’)。


ということで、今回は いくつかある 見出し設定パターン と、見出しの 段階の変更方法を 説明したい と思います。

 

見出し設定ができる ポイントは 3カ所

 

① 1カ所目は ブロックメニューの「テキスト 」内に設置されています。
※ブロックメニューを開示する方法は 「段落」の記事 を 参考にしてください。

 

Gutenberg ブロック「見出し」 見出し機能

 

② 2カ所目は ブロックメニューの「ブロックナビゲーション」に 設置されています。

 

Gutenberg ブロック「見出し」 見出し機能 ⓶

 

③ 3カ所目は 新しい ブロック設定場所の右端に アイコンとして 表示されることが あります。 見出し機能は 記事 作成する場合 ほとんど利用する機能 ということで、たいてい この場所に 表示されています。

なので ほぼ 見出し機能を 利用するときは ブロックメニューを開示しません。

 

memo 2020年の最新バージョンでは、右側のサイドバーに 見出しの パターン変更表示が 見当たりません。文字と背景カラー変更が 右側のサイドバーで 行うことができます。

 

Gutenberg ブロック「見出し」 段階を変更する方法

 

見出し段落(h1~h6)利用できますが、初期段階ではh2に設定されているため、変更する場合があります。この変更方法を画像を使って説明します。

 

① 設置されている 見出し機能アイコンを、3カ所 の+ボタンどこかで 選択して クリックし 見出しh2を ブロックエディタ内に 表示させます。
② 見出し段階の 設定を 行います。見出しを表示させると 右サイドバーに 見出し設定の コントロールパネルが表示されます。

h1から h6までの 選択ボタンが設置されているので、ここから 必要な 見出し段落を選択すれば 変更できます。

memo 2020年9月最新バージョンでは、見出し指定(1H~6H)は、上段ツールバーに設置されています。右のサイドバーの見出し設定変更可能なことは、上記で紹介した通り、見出しの文字色と見出し背景色です。
 

 

見出し設定も 慣れると 簡単に できるようになります (‘ω’)ノ

 

見出しh1は 通常タイトルに 設定されています。なので 記事内では 一般的に利用しない と思っています。ですが 設定されているので、使う人も いるのかもしれないと 見出し説明文の記事を 作成しながら 考えさせられました。(;’∀’)

 

見出しのSEOについて サイト「バズ部」が 説明しているのですが 良かったら 参考に読んでみてください。

 

 

 

見出し設定のブロックエディター表示 画像で紹介

 

ブロックエディター で、各見出し が表示されたときの画像を ご紹介。


ちなみに、実際コンテンツで表示されたときの見出しと、ブロックエディターで表示されたときの見出しは 違う場合があります。

見出しカスタマイズしている場合、見た目は一致しません。コンテンツで 見出し が きちんと 表示されているか 確認する場合、プレビューで 確認するのが 一般的です。


では、画像を使って、ブロックエディターで各見出が表示されたときについて、紹介します。

 

① 見出しh3 を選択した場合、ブロックエディターでは、こんな感じで表示されます。


Gutenberg ブロック「見出し」  見出し機能 3H

② 見出しh4 を選択した場合、ブロックエディターでは、こんな感じで表示されます。

 

Gutenberg ブロック「見出し」 見出し機能 4H

③ 見出しh5 を選択した場合、ブロックエディターでは、こんな感じで表示されます。

 

Gutenberg ブロック「見出し」 見出し機能 5H

 

④ 見出しh6 を選択した場合、ブロックエディターでは、こんな感じで表示されます。


Gutenberg ブロック「見出し」 見出し機能 6H

 

見出し文 左寄せ・中央寄席・右寄せの設定が可能

 

ブロックエディターでは 見出し文の左寄せ・中央寄席・右寄せの設定が可能です。Cocoonを使う前は、アフィンガーを 使用していたのですが 見出し文の位置を 変更できました。

 

結構 気に入っていた 設定のひとつ だったわけですが、ブロックエディターでは 標準装備で 使用できるんですね。

今まで 気づかなかったのですが、今回 この記事を作成する際 気づいたという…(;’∀’)

 

① 見出し文左寄せ

 

Gutenberg ブロック「見出し」  見出し機能 左寄せ

 

② 見出し文中央寄せ

 

Gutenberg ブロック「見出し」 見出し機能 中央

 

③ 見出し文右寄せ

 

Gutenberg ブロック「見出し」 見出し機能 右寄せ

 

Gutenberg ブロック「見出し」 まとめ

 

見出しの 中央寄せなら スマホ表示も きれいに見えるので 結構好きです。ですが このブログで 見出し文の位置を突然 変更すると なんとなく違和感を覚えるので 別のサイトで使ってみたいなと…(;^ω^)

 

ブロックエディターの 見出し紹介 簡単に終わると思ったのですが 意外と奥行きある機能で 記事を作成しながら 設定の細かさに驚いてしまいました。
(゚Д゚;) …おぉ… という感じで…。

 

たかが見出し されど見出し!です。見出しをカッコよくすると コンテンツがしまって見えるので 意識して使っていきたいですよね(‘ω’)ノ

 

見出しカスタマイズしたいという人におすすめの本

 

コピペでも カッコよく 見出しカスタマイズできる ということで、見出しカスタマイズ コピペ記事 が たくさんあります。

ですが ゆくゆくは CSSやHTMLだけでなく PHPの基礎 勉強する ことで、Wordpressを使った 誰にも真似できない おしゃれでカッコよく 崩れない SEO対策テーマを使っても エラーしない…という対応ができる人に なれるんじゃないか と思います。

ということで そういう方向に 進める良き本を 探していたところ、 「grow group」というサイト で 紹介されていました。
なので 便乗になりますが(;’∀’)…ぴったりな本を このブログでも 紹介させて いただきます。

 

 


参考になった…と思っていただけた方、
よかったらポチっとお願いしますm(__)m


備忘録・雑記ランキング


 

profile
huku

主婦をしつつ、少しパートをしつつ、そして好きなジャンルのコンテンツを作ることを趣味としている現在(2020年)48歳です。
コンテンツ作りは、2010年アメブロからスタートし、2015年Wordpressを使い始めました。昨年から試験的にYouTube配信もスタートしました。

hukuをフォローする
Wordpress
hukuをフォローする
Huku

コメント

タイトルとURLをコピーしました