【WordPressプラグイン】Revify Custom CSS Block｜ブロック単位でCSSを管理・リアルタイム反映

このプラグインでできること（特徴）

ブロックの近くにCSSを記述できる

CSSを調整したいセクションの中に「カスタムCSS」ブロックを配置できます。

ページ下部のCSS欄まで何度も移動する必要がなく、対象ブロックとCSSの関係も分かりやすくなります。

selectorで親ブロックだけにCSSを適用

次のように記述すると、selectorがカスタムCSSブロックの親ブロックへ置き換わります。

selector {
	padding: 4rem 2rem;
	background: #f7f7f7;
}

selector .__title {
	font-size: 2rem;
}

/* 実際のページでは、プラグインが付与した専用クラスへ変換して出力します。
クラス名を自分で調べたり、毎回異なるクラスを手入力したりする必要はありません。 */

編集画面へリアルタイム反映

入力したCSSは、ブロックエディター上の表示にも反映されます。フロントページやカスタマイズ画面を開き直さなくても、確認しながら調整できます。

必要に応じて、WordPress標準のCodeMirrorを使用した色分けエディターにも切り替えられます。

デバイス別のCSSを管理

入力欄は、次の4つに分かれています。

入力欄	適用範囲
基本	すべての画面幅
PC	960px以上
タブレット以下	959px以下
スマホ	599px以下

基本CSSに共通設定を書き、画面幅によって変更したい部分だけを各タブへ記述できます。

WordPressのPC・タブレット・スマホプレビューにも対応しています。

ページ共通CSSとして使う場合

ページ全体で共通して使うCSSは、カスタムCSSブロックをページ上部などへ配置し、「selector」で囲わず通常のセレクタで記述してください。

親ブロックがない状態でselectorを使うと、適用先が存在しないため警告が表示されます。

管理画面からCSS変数を一元管理できる

ブロックごとのCSSだけでなく、サイト内で共通して使うCSS変数も管理できます。
WordPress管理画面の、設定 → Revify CSS変数から、よく使う色・余白・影などを登録できます。

登録した変数は、カスタムCSSブロック内から通常のCSS変数として呼び出せます。

selector {
	padding-block: var(--my-space-section);
}

selector .__card {
	border-radius: var(--my-radius-card);
	box-shadow: var(--my-shadow-card);
}

selector .__title {
	color: var(--my-color-accent);
}

CSS変数を管理するメリット

同じ色や余白を複数のページで直接記述していると、後から変更するときにすべてのCSSを探して修正する必要があります。CSS変数として管理しておけば、管理画面の値を変更するだけで、同じ変数を使用している箇所へまとめて反映できます。

たとえば、サイトのアクセントカラーを変更する場合も、var(–my-color-accent)として登録しているコードを変えるだけで一括変更できます。各ブロックに書いたCSSを個別に修正する必要はありません。

値は色だけに限らない

CSS変数には、色以外の値も登録できます。

• 余白
• 文字サイズ
• 角丸
• 線
• 影
• 最大幅
• アニメーション時間

など、CSSで使用できる値を共通設定としてまとめられます。

/* 登録例 */
--my-content-width: 1200px;
--my-border-light: 1px solid #e5e5e5;
--my-transition: .3s ease;

/* 使用例 */
selector .__inner {
	max-width: var(--my-content-width);
}

selector .__button {
	border: var(--my-border-light);
	transition: var(--my-transition);
}

使用上の注意

CSSの閉じ括弧を確認する

このプラグインでは、ページ内で複数使用したときにstyleタグだらけにならないよう、CSSをまとめて出力します。
そのため、前に配置したカスタムCSSブロックで}を閉じ忘れると、後続のCSSにも影響することがあります。

警告が表示された場合は、{と}が正しく対応しているか確認してください。

カスタムCSSブロックを対象セクションの中へ配置しておけば、セクションを別ページへコピーした際にCSSも一緒に移動できます。
追加CSSやページ下部の入力欄から、該当するCSSだけを探してコピーする必要がありません。