Gutenbergエディッタ

2022年1月29日

  1. HOME >

Gutenbergエディッタ

ブロックをみんな使って遊んでみよう!

WordPressテーマをAFFINGER5からACTIONに変更したのでブロックエディッタを使ってみます。クラシックエディッタよりもレイアウトが簡単にできます。

まずは見出しの h2からh6の特徴!

デフォルトでは、h1からh6まで専用のスタイルが付けられています。h1は投稿タイトルで使用していますので、本文ではh2~h6を使います。

デフォルトのh2です。

htmlを確認すると

<h2 class="has-text-align-center" id="デフォルトのh2です">デフォルトのh2です。</h2> となっていました。

h2タグですね、htmlは編集画面の右上にある縦の3点リーダーを開いてコードエディッターから編集できます。ブロックでカスタムを選択すると背景色を変更したりいろいろできます。

色を変えてみましょう。

<h2 class="has-text-align-center is-style-st-heading-custom-naked has-very-dark-gray-color has-vivid-yellow-background-color has-text-color has-background" id="色を変えてみましょう">色を変えてみましょう。</h2>

すべてclass指定で処理されています。編集画面ではかなり縦幅が広がりますが実際の画面では問題ありません。

見出し

デフォルト

デフォルトではH1~H6の指定でデザインが変わります

その他の見出しは、大きさだけが変わります。

カスタム

ライン

ふきだし

斜線

カウント

注意

チェック

質問

答え

ステップ

ランキング

結果を見て編集ができるので使いやすい!

段落

デフォルトの基本段落です。ドロップギャップをonにすると1文字目が大きく表示されます。

2022年1月29日