自分で作ろう。好きに選ぼう。「見出しスタイル」機能の解説

このページでは Nishiki Pro テーマで使える「見出しスタイル」機能について解説しています。

使う前に必ず設定してください

ワードプレスの管理画面から「外観」→「カスタマイズ」を選択し、カスタマイザーの画面に移動し「デザイン」→「見出し」を選択してください。

下の画像のように、見出しスタイルを使う場合は「見出しスタイルを有効にする」にチェックを入れてください。

チェックを入れていない場合、作成した見出しスタイルが正しく反映されないことがあります。

以下の注意書きを必ずお読みいただき、ご了承ください。

チェックを入れた後の影響について

「見出しスタイルを有効にする」のチェックは、カスタマイザーで設定した見出しのデザインとの衝突を防ぐため必要な設定です。

ここにチェックを入れると、過去記事やページで使っている見出しのデザインがリセット（無効化）され、ほぼプレーンな見出しデザインが適用されます。ですので、チェックを入れるかどうかを十分検討ください。デザインを崩したくない場合は「見出しスタイル」機能を無理に使う必要はありません。

ワードプレスの管理画面から「Nishiki Pro」→「ブロックエディター管理」を選択します。

ブロックエディター管理画面が表示されるので「見出し」タブを選択し「スタイルを追加」ボタンを押して作成を始めてください。

見出しスタイルは、自分で作ったスタイルがブロックエディターのスタイルの中から選べるという、とてもシンプルな仕組みです。

１つのスタイルに対して、6 つのレベル（h1 - h6）それぞれ設定できます。

スタイル作成を補助する役割として、あらかじめ複数の設定項目が用意されています。プレビューを見ながら直感的な操作が可能です。

スタイルは複数追加できます。「スタイルを追加」ボタンを押してください。

著者別や、記事やページの内容によってスタイルを使い分けてもいいでしょうね。

A・B の２つのスタイルをあらかじめ作っておいて、A さんは A スタイルを使用。B さんは B スタイルを使用。みたいな。

必要なくなったスタイルは削除できます。

ただし、一度削除すると元に戻せません。ブロックエディターからも選べなくなりますし、過去に適用したスタイルが効かなくなります。

スタイルを削除するときは、十分注意してください。

あらかじめ用意している項目以上に凝った見出しを作りたい場合もあると思います。

などなど。

そんなときは CSS エディターが各スタイル別に用意されていますので、活用ください。

追加 CSS を使う時の注意点

作ったクラス名に対して、セレクターは「is-style-[クラス名]」で指定してください。
ブロックエディターの管理画面にも見出しスタイルを反映させることができますが、ワードプレス本体側で設定されている CSS が適用されてしまい、プレビュー通り行かない場合もあります。「.editor-styles-wrapper h1.is-style-[クラス名]」など、セレクターの詳細度を変えることで反映しやすくなります（ワードプレス本体側の仕様変更も将来的に考えられる上、CSS の書き方は人それぞれだと思うので「これでできます！」と断言できなくてすみません）。