WordPress5.0 Gutenberg 見出しの追加と削除と移動

こんにちは、ナガマサです。
前回までに、Gutenberg投稿画面の説麻衣及び段落ブロックについて説明しました。
いかがでしたでしょうか?
旧エディターとは大きく変わっていることはお判りいただけたでしょうか。

実際どちらのエディターが使いやすいかは人それぞれですので、一概には言えない部分もあります。
ただ、一つ言えることは、今後はGutenbergが周流になってくるということです。
投稿ツールやテーマの完全対応にはまだ時間がかかりそうですが、余裕があれば一つだけでも練習用にバージョンアップをしてもよいので絵はと思います。
まずは、慣れることが大事だと思いますので。

Gutenberg での見出しの追加

見出しブロックを追加するには

見出しはh2~h6になります。
旧エディターでは、テキストを選択して段落フォームからh2~h6を選択していました。
Gutenberg ではそのようなものは見当たりません。
前に、見出しブロックが用意されていると説明しましたが覚えていますか。

左側の「+」をクリックして見出しブロックを選択する方法もありますが、ほかにも選択の方法があります。
ブロックを新規に追加すると、右側に「T」が現れます。
以下の画像をご覧ください

見出しブロック

「T」をクリックすることで見出しブロックになります。

見出しブロックの編集

見出しを入力して「H2」「H3」「H4を選択してください。
これで、見出しの追加は完了です。

*右側に表示されるのはよく使うブロックになります。もし表示されない場合は「+」から見出しブロックを追加してください。

H5、H6見出しの追加方法

見出しブロックの編集パネルには、H4までしかないですよね。
なぜないかは不明です。このままではH5とH6は追加できません。

では、どのようにすればよいか試してみました

H5、H6をコードエディターで追加

まずは、コードエディターを使って挿入してみましょう。
コードエディターは、右上の歯車の右の画像をクリックすると現れてきます。
そのまえに、H4で見出しを作っておいてください。

コードエディターを開いたら「h4」の「4」を「5」に変更してください。


すると、「このブロックには、想定されていないか無効なコンテンツがふくまれています。」と言うコメントが出てしまいました。
でも、ご安心ください。

「HTMLに変換」をクリックしてください。
すると以下のようになります。

次にプレビューをクリックしてください。
正常に変換されていることが確認することができます。
なぜH5、H6がなぜないのかはわかりませんが、以上の方法で追加することができます。

カスタムHTMLで見出しを追加

他にやり方としては「カスタムHTML」を使うという方法もあります。

カスタムHTMLはブロックの右側に表示されているHTMLがそうです。以下のように記述してください。

<h5>見出し5</h5>
<h6>見出し5</h6>

簡単ですよね。
以上が見出しブロックの操作と追加になります。

*「HTML」が右側に表示されない場合は「+}でカスタムHTMLブロックを追加してください。

見出しブロックの移動

見出しブロックを上下に移動する

見出しブロックも、落ブロック同様に上下に移動することができます。
移動の方法は、ブロックの左側にカウスカーソルを持っていくと、上下移動の矢印が現れます。

その矢印を動かした方ににクリックしてください。
コピペより安全ですのでぜひ利用してみてください。

見出しブロックの削除

見出しを削除してみよう

見出しを削除したい時ってあると思います。
不要なものはさっさと削除しましょう。

削除の方法は、ブロックの上に出てくる編集画面の一番右側にある詳細設定から行います。
詳細設定のボックスの一番下にある「ブロックの削除」をクリックすることで、削除できます。

以上で見出しブロックの追加・移動・削除の説明は終わりです。
次回は、画像の挿入・移動・削除に就てご説明します。

最新情報をチェックしよう!