WordPressブロックエディター対応 ボタンスタイルの設定ブロックエディター

WordPress ver 5から新しいエディターGutenbergが導入されました。従来のエディタとは異なり、Gutenbergはブロック単位でページのコンテンツを編集します。Emanon Proでは新エディターに対応するためCSSの調整を行いました。

WordPress ver5 のブロックエディタ対応

Emanon Pro 1.9.5から、WordPress ver 5 のブロックエディターにEmanonテーマ側のスタイル設定を反映させています。

ボタンの配置方法

投稿ページ、固定ページの編集画面を開き、レイアウト要素からボタンのアイコンをクリックします。

ボタンのスタイルは、アウトライン、角丸、角の３つです。初期値は角丸のスタイルが反映されています。

ボタンのサイズを変更したい場合、高度な設定の追加CSSのクラスに下記CSSを挿入します。

ボタン中の場合

 

追加CSSの欄にbtn-midを追加

ボタン大の場合

 

追加CSの欄にbtn-lgを追加

ボタンの位置を中央配置にする場合は、下記図を参考にしてください。

ボタンの配色

新エディタでは、ボタンの背景色と文字色を編集画面から設定することができます。

Emanonテーマの場合、外観 > カスタマイズ > 全般設定 > 色のリンクでボタンの配色（初期値）を設定するが可能です。

hタグのスタイル反映

ブロック要素から見出しのアイコンをクリックします。

H２からH4の設定は画面上部で指定できます。

H5からH6の設定はサイドバーの見出し設定で指定してください。

外観 > カスタマイズ > コンテンツ設定 > hタグ設定でh2、h３、h４のスタイルを設定できます。設定したhタグのスタイルは、新エディタ画面に反映されます。