【SWELL】見出しをおしゃれにカスタマイズ！エディターにもスタイルを反映させる

2024/04/172024/09/09

【SWELL】見出しをおしゃれにカスタマイズ！エディターにもスタイルを反映させる

WordPressのテーマ『SWELL』はかなりオシャレでカスタマイズ性も高くいわゆる神テーマだと思うのですが、それゆえにSWELLを使っているユーザーや企業も多く、似たようなデザインのサイトがたくさんあるように思います。

カスタマイズ性が高いといってもいくつかのパターンから好きなものを選んで色を変える程度なので、やっぱり一目みてSWELL使ってる！ってわかってしまうんですよね。

ちーも

自分がSWELLerだとなおさらです

個人的に特に分かりやすいのはヘッダーと見出しだと思います。

ヘッダーは目立つ上にサイトを開いて最初に目に入る部分であり、見出しは記事中で目立つ部分ですよね。

今回はその見出しのデザインをカスタマイズして、他のサイトとは違った独自性のあるサイト作りを目指したいと思います。

カスタマイズ手順の解説なので、デザインやCSSのコードをご紹介するものではありません

カスタマイズする際の注意事項

作業前にバックアップを取ることを推奨します。
カスタマイズは自己責任でお願いします。

このカスタマイズは子テーマで作業することを推奨しています。未導入の方はこちらの解説記事を先にご確認ください。

見出しデザインのカスタマイズ例

まずはカスタマイズ例をご紹介します。

現在このブログも見出しをカスタマイズしていますが、それに似たデザインがこちら。

画像を使ってこんなかわいい見出しも作れます。

また、ひと手間加えることで記事の編集画面にもデザインを反映させることが可能です。

こちらについては最後に詳しく解説します。

SWELLで見出しをカスタマイズする方法

見出しデザインの初期化

まずはSWELL側で指定されている見出しのスタイルが当たらないように、設定を変更していきます。

カスタマイザー＞投稿・固定ページ＞コンテンツのデザインの中にある、「見出し2のデザイン」、「見出し3のデザイン」、「見出し4のデザイン」で「装飾なし」を選択し、保存します。

これで見出しになにもスタイルが当たっていない状態になりました。

見出しデザインをコーディングする

見出しは<h1></h1> ～ <h6></h6>のタグで出力されます。

それぞれのタグについて普通にCSSを書く場合

h1 {
  color: red;
}

これでも見出しをカスタマイズすることは可能なのですが、記事の本文以外の余計な場所にもスタイルが当たってレイアウトが崩れる可能性があるので、記事内のタグのみにスタイルを当てたい場合は以下のようにCSSを書いていきます。

.post_content h1 {
 //ここに好きなデザインのコード
}
.post_content h2 {
  //ここに好きなデザインのコード
}
.post_content h3 {
  //ここに好きなデザインのコード
}
・・・

CSSはカスタマイザー＞追加CSSに記述してください。

style.css内でもOKです

ここではCSSの紹介はしないので、ご自身でコーディングするか「見出し　CSS　デザイン」で検索するとおしゃれなデザインのコードを公開しているサイトが見つかると思います。

ちなみに色の指定にvar(–color_htag)を使うことで、カスタマイザーの「見出しのキーカラー」でCSSをいじることなく色の変更ができるようになります。

.post_content h2 {
  border: solid 4px var(--color_htag);
  color: var(--color_htag);
}

ちーも

ちょっとしたサイトのイメチェンが楽になります！

エディターでの見た目にもスタイルを反映させる

ここまでのカスタマイズで、記事が表示された際の見た目は好きなデザインに変更することができるようになりました。

ただこのままだと、エディターでは何もスタイルが当たっていない見出しが表示されてしまうんですよね。

ちーも

なんか中途半端でもやっとする

別に自分だけが見るところなので気にしなければいいといえばそれまでなのですが、ぱっと見どの見出しなのか分かりづらいし、見出しと本文のバランスなんかもいちいちプレビューを見ないとわからず不便なので、こちらにもカスタマイズしたデザインで見出しが表示されるようにしていきたいと思います。

エディター用のCSSを用意する

まずはSWELL子テーマの直下にeditor-style.cssというファイルを作成します。

・・・\app\public\wp-content\themes\swell_child\editor-style.css

editor-style.cssの中身はこんな感じで、先程作ったCSSの.post_contentの部分を.editor-styles-wrapperに変えただけの同じコードにします。

.editor-styles-wrapper h1 {
  //記事用に作ったCSSと同じ
}
.editor-styles-wrapper h2 {
  //記事用に作ったCSSと同じ
}
・・・

見出し用のデザインにz-indexを使っている場合、エディター上では重なり順が思った通りにならない場合があります。

そんな時は以下のコードをeditor-style.cssの一番上に追記してください。

.editor-styles-wrapper .is-root-container {
  z-index: 1;
}

functions.phpを編集する

SWELL子テーマのfunctions.phpに以下のコードを追加してください。

//エディター用のCSSを読み込ませる
add_action('enqueue_block_editor_assets', function() {
	$timestamp = date( 'Ymdgis', filemtime( get_stylesheet_directory() . '/editor-style.css' ) );
    wp_enqueue_style( 'editor-style', get_stylesheet_directory_uri() . '/editor-style.css', [], $time_stamp );
}, 20 );

これだけで作業は完了です！

エディター画面を再読み込みしてみてください。記事での見え方と同じように表示されるようになったと思います。