プラグインも CSS も不要 見出しブロックの作り方

pexels-photo-265631-265631.jpg

当サイトはアストラ(無料)&エレメンター(無料)で作ったサイトです。固定ページはエレメンター、投稿は Gutenberg で編集を行い、他のエディター系のプラグインは一切追加していません。

Gutenberg の進化により、ブロック編集が格段と便利に美しくなりました。見出しもボックスもパターンに登録しておけば簡単に呼び出せます。上記のインフォメーションボックスも登録済みパターンです。

以下はパターンに登録したブロックの一覧です。

登録した H2 見出しです。こちらは見出しブロックの設定のみ変更しています。パディングはブロック設定欄のサイズを+すれば表示されます。

  • 文字色 白
  • 背景色 アクセントカラー
  • パディング(上下)X-Small
  • パディング(左右)X-Small

こちらはグループ(コンテナ)のインナーに見出しを置いたデザインです。見出しは何も触らず、コンテナのスタイルのみ設定しています。

  • 背景色 グレー
  • パディング(上下)X-Small
  • パディング(左右)X-Small
  • マージン(上下) 小
  • 枠線(下)3pt

先ほどの見出しパターンを H3 にして、枠線を左のみに設定した見出しです。上のパターン同様、コンテナのスタイルのみを設定しています。なのでインナーの見出しを H2 にすれば H2 の見出しとしても使えます。

  • 背景色 グレー
  • パディング(上下)X-Small
  • パディング(左右)X-Small
  • マージン(上下) 小
  • 枠線(左)4pt
お買い物カゴ
上部へスクロール