これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. 自分で作ろう。好きに選ぼう。「見出しスタイル」機能の解説

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

その前に「見出しデザインと「見出しスタイル」との違いは何?

少し整理しますと、まず、Nishiki Pro テーマには、もともとカスタマイザーで設定できる「見出しデザイン」機能があります。

その「見出しデザイン」機能をさらに拡張し、自由で柔軟な見出しが作成できる「見出しスタイル」機能がバージョン 1.0.206 から搭載されました。

「見出しスタイル」は「見出しデザイン」の上位版、という位置付けです。

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

「見出しスタイル」を正しく適用するために、カスタマイザーの「見出しデザイン」を無効にする必要があります。

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

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

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

また、見出しデザインを無効にすることで以下の影響が出ます。必ずお読みいただき、ご了承ください。

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

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

ここにチェックを入れると、過去記事やページで使っているカスタマイザーで設定した見出しのデザインがリセットされ、ほぼプレーンな見出しデザインが適用されます。

ですので、チェックを入れるかどうかを十分検討ください。デザインを崩したくない場合は「見出しスタイル」機能を無理に使う必要はありません。

見出しスタイルの機能

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

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

作ったスタイルがブロックエディターで選べる

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

スタイルを作る

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

作ったスタイルが選べる!

リアルタイムプレビュー付きで直感的に作れる!

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

直感的な操作で見出しを作ろう

設定項目

  • font-size(フォントの大きさ)
  • color(テキストカラー)
  • background-color(背景カラー)
  • line-height(行の高さ)
  • margin(マージン)
  • padding(パディング)
  • border(ボーダー)

テキストもプレビューできます

スタイルの複数追加

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

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

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

スタイルの削除

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

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

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

上級者向け:細かい調整をしたい場合は「追加 CSS」を使おう

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

  • jpg/png/svgなどを使いたい
  • before/after など擬似要素を使いたい
  • 他のプロパティも使いたい
  • デスクトップ/タブレット/スマートフォン用にメディアクエリーを使いたい

などなど。

そんなときは追加 CSS(エディター)機能が各スタイル別に用意されています。

下の動画は背景画像に SVG を適用したものです。

追加 CSS は、ワードプレスと CSS の知識をある程度持っている方向けの機能です。

以下の注意点を確認の上、活用ください。

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

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。

ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。

最新情報をチェック!

Nishiki / Nishiki Pro テーマに特化した情報を「にしきちゃん」がお伝えします😀

  • リリース情報
  • 新機能の紹介
  • 便利な使い方
  • 開発中の機能紹介
  • 導入事例
  • あるある日常ネタ

など