デザインの設定

デザインの実装に便利なサイト

以下のサイトは見出しやリスト等、様々デザインをHTML・CSSで提供してくれています。

https://pote-chil.com/css-stock/ja

実装コード

<h2 class="heading-41">CSS見出しデザイン</h2>

.heading-41 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
    background-color: #f2f2f2;
    color: #333333;
}

.heading-41::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #2589d0;
    content: '';
}

実装結果

上記を表示すると以下のようになります。

CSS見出しデザイン

追加CSS

追加CSSでクラスを追加することが可能です。ブロック→高度な設定→追加CSSになります。なお、.ドットの記述は不要になります。

実装動画

これによりh2タグに以下のクラスが追加されていることがわかります。

追加CSSに記述したコード

<h2 class="wp-block-heading heading-41">見出し</h2>

効率化

しかし、これでは見出しを追加する度に追加CSSを記述することになります。これをCSS並びにJavascriptを使って自動で付与するように設定したいと思います。

CSS

CSSで記述する場合は、他のページやセクション内のクラスに干渉しないように記述する必要があります。親要素を起点として、可能な限り範囲を限定し、他の要素に影響を与えないように意識することが大切です。

CSSを使用したコード

body.single {
  h2 {
    &.heading-41 {
      display: flex;
      align-items: center;
      padding: .5em .7em;
      background-color: #f2f2f2;
      color: #333333;
    }

    &::before {
      display: inline-block;
      width: 5px;
      height: 1.5em;
      margin-right: .5em;
      background-color: #2589d0;
      content: '';
    }
  }
}

例えば上記のような記述が考えられます。bodyにbody_class関数を使用することで、そのページ独自のクラスが付与されます。これを起点としてクラスを記述することでそのページ独自の内容になります。
body_class関数についてはこちらを参照ください。

Javascript

ブロックエディタ特有のクラスを活用して、クラスを付与します。
これにより、追加CSSに記述する必要はなく、効率よく開発が進みます。
JavaScriptのコードを変更することで、全てのデザインに適応させることができるという点が大きなメリットです。

自動で追加されるクラス

<h2 class="wp-block-heading">見出し</h2>

ブロックエディタに見出しを追加すると、自動的に上記のクラスが付与されます。これを活用します。

Javascriptを使用したコード

document.addEventListener("DOMContentLoaded", function() {
		var headingElements = document.querySelectorAll("h2.wp-block-heading");
		headingElements.forEach(function(element) {
			element.classList.add("heading-41");
		});
	});

1. document.addEventListener("DOMContentLoaded", function() { ... });
   • この部分は、DOMContentLoadedイベントリスナーを設定しています。
   • DOMContentLoadedイベントは、HTMLドキュメントの完全な読み込みと解析が終了したときに発生します（ただし、スタイルシート、画像、サブフレームなどの読み込みはまだ完了していない可能性があります）。
2. var headingElements = document.querySelectorAll("h2.wp-block-heading");
   • ドキュメント内の全てのh2要素で、クラスがwp-block-headingのものを選択します。
   • querySelectorAllメソッドは、指定されたCSSセレクタに一致するすべての要素を静的なNodeListとして返します。
3. headingElements.forEach(function(element) { ... });
   • 選択されたすべてのh2.wp-block-heading要素に対して、以下の操作を順番に実行します。
4. element.classList.add("heading-41");
   • 各h2.wp-block-heading要素に同クラスを追加します。
   • classListプロパティは、要素のクラスのリストを返し、addメソッドは新しいクラスを追加します。