Gutenbergを使ってHTMLで自由に要素を記述する方法

WordPress

今回はWordPressの標準エディタであるGutenbergを使ってHTMLで直接記述方法を2種類紹介します。

Gutenbergとは、初心者でも扱い易くするためにブロックを積み重ねるようにレイアウトしていくWordPressの標準のエディタです。本来なら非常に扱い易く便利なエディタだが、細かなデザインやレイアウトなどを作ろうとすると応用が利かず使い辛いです。

そういった時にHTMLでの記述が活躍してきます。

HTMLを直接記述する方法①

まずGutenbergでHTMLを直接記述する方法はブロック選択フォーマットカスタムHTMLで可能です。

カスタムHTML

もしくはブロック上のタブメニューの「⁝」のHTMLとして編集で可能です。

カスタムHTMLはブロック内で自由にHTMLやCSSの記述が可能です。

ただあくまでもブロック内のみなので全体をHTMLで記述するのには向いていません。一部だけ凝った要素や動きなどを付けたいって時に使えます。

HTMLを直接記述する方法②

もう一方の方法は、コードエディタで記述する方法です。

Gutenbergの右上の「…」からコードエディタを選択。もしくは以下のショートカットキーで開きます。

Command+option +Control+M

コードエディタ

コードエディタでは100%投稿コンテンツ内をHTMLで記述する事が出来ます。

しかしブロックエディタでコンテンツを追加したものをコードエディタで弄ると自動的に元のブロックに戻る場合があります。更には意図しない表示崩れなども起きる場合があります。

そのためコードエディタを使うなら最初から最後までHTMLで記述していった方が良いです。


以上が「Gutenbergを使ってHTMLで自由に要素を記述する方法」でした。

カスタムHTMLやコードエディタで記述する際はHTMLとCSSしか書けません。phpやJavaScriptなどプログラミング言語は記述する事が出来ませんのでご注意下さい。

またHTMLでの記述はある程度のリテラシーのある方しか出来ないかと思います。

その辺の知識がない方はまずは勉強から初めて下さい。

下記の記事では基本的なGutenbergの使い方をまとめています。合わせてどうぞ。

2020年3月2日WordPressGutenberg,WEB,WP

Posted by KT