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

deskwork Wordpress

こんにちは。管理人の berry です。「berry105」のブログに訪れてくださいまして、ありがとうございます。

今回は、Gutenbergブロック機能内にある一般ブロックの「見出し」の紹介です。


Gutenberg ブロックエディターを使い始めました。

一般的なブロックエディターの使い方、cocoonのブロックエディター使用方法について、機能や設定についてご紹介します。


一般ブロック内の「見出し」って?


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

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

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

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


berry
berry

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



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


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


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


ブロックエディターのブロックメニューの一般ブロック内に設置されている見出し機能の説明画像


② 2カ所目は、ブロックメニューの「よく使うもの」に設置されています。


ブロックエディターのブロックメニューの「よく使うもの」という場所に設置されている見出し機能の説明画像


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

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



見出し機能の段落を変更する方法


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


① 設置されている見出し機能アイコンを、3カ所のどこかで選択して、クリックし、見出しh2をブロックエディタ内に表示させます。


見出しh2がエディタ内で表示されたときの画像
ブロックエディターで表示されたときの見出しh2


② 見出し段落の設定を行います。見出しを表示させると、右サイドバーに、見出し設定のコントロールパネルが表示されます。

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


ブロックエディターの見出し設定、コントロールパネルの説明画像


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

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

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



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


必要ないかもしれませんが、一応、ブロックエディターで、各見出し段落が表示されたときの画像を紹介しておきます(;^ω^)


ちなみに、実際コンテンツで表示されたときの見出しと、ブロックエディターで表示されたときの見出しは違う場合があります。
見出しカスタマイズしている場合、見た目は一致しません。コンテンツで見出しがきちんと表示されているか、確認する場合、プレビューで確認するのが一般的です。


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


① 右側のコントロールパネルで見出しh3を選択した場合、ブロックエディターでは、こんな感じで表示されます。


ブロックエディタ―で見出しh3が表示されたときの画像
ブロックエディタ―で見出しh3が表示されたとき


② 右側のコントロールパネルで見出しh4を選択した場合、ブロックエディターでは、こんな感じで表示されます。


ブロックエディタ―で見出しh3が表示されたときの画像
ブロックエディタ―で見出しh4が表示されたとき


③ 右側のコントロールパネルで見出しh5を選択した場合、ブロックエディターでは、こんな感じで表示されます。


 ブロックエディタ―で見出しh5が表示されたとき の画像
ブロックエディタ―で見出しh5が表示されたとき


④ 右側のコントロールパネルで見出しh6を選択した場合、ブロックエディターでは、こんな感じで表示されます。


  ブロックエディタ―で見出しh6が表示されたときの画像
ブロックエディタ―で見出しh6が表示されたとき


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


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

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

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


① 見出し文左寄せ


見出し文が左寄せの場合の画像
見出し文が左寄せの場合


② 見出し文中央寄せ


見出し文が中央寄せの場合の画像
見出し文が中央寄せの場合


③ 見出し文右寄せ


見出し文が右寄せの場合の画像
見出し文が右寄せの場合


まとめ


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

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

(゚Д゚;)…おぉ…という感じで…。

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


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


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

ですが、ゆくゆくはCSSやHTMLだけでなく、PHPの基礎勉強することで、Wordpressを使った誰にも真似できない、おしゃれでカッコよく、崩れない。SEO対策テーマを使ってもエラーしない…という対応ができる人になれるんじゃないかと思います。
ということで、そういう方向に進める良き本を探していたところ、 「grow group」というサイトで紹介されていました。


なので、便乗になりますが(;’∀’)…ぴったりな本を、このブログでも紹介させていただきます。

私も読みたい!



   にほんブログ村 ブログブログ ブログノウハウへ

Wordpress
この記事を書いた人
berry

2019年、現在アラフィフで外でパートを再開した主婦です。ブログ執筆歴は長く、Wordpressは4年ほどになります。

最近、海外ドラマをAmazonプライムで観まくっています。主人にそそのかされてモンストも少々。アニメは名探偵コナンが好きで、漫画はのだめカンタービレがお気に入り。

ブログの副収入10万円夢見るようになりました。

berryをフォローする
berry105

コメント