Lightning G3 Proでブロック毎にカスタムCSSを設定！不要CSSの読み込みなし、表示も便利！

2023年4月3日

ワードプレスの人気テーマLightningですが、そのPro版についているVK Blocks Proではブロック毎にカスタムCSS欄が設けられています。

本記事では、従来のカスタムCSS記述覧と何が違うか（大きなメリットがあります）と、その使い方を簡単に紹介します。

Lightning G3 ProのカスタムCSS欄とは

VK Blocks Proでは、選択中のブロックの設定サイドバーにカスタムCSS欄が設けられています。

記述覧にCSSを記述すれば、ブロックのスタイルをカスタマイズできます。

従来のカスタムCSS記述方法のおさらい

ちなみにLightningを使っていると、あちこちにカスタムCSS欄が設けられています。念のためにおさらいしておきましょう。よくご存じの方は本セクションをスルーして頂いて問題ありません。

テーマカスタマイザーの追加CSS

ダッシュボードメニューで、外観＞カスタマイズ＞追加CSS　と進めて使います。

　メリットとしては、常にプレビュー表示されているので、記述したCSSの反映状態を把握しながら作業を進めることができることですね。

デメリットとしては、記述覧が小さく記述量の多いCSSには向かない、ということです。また、テーマに付随しているのでテーマ変更で適用されなくなります。

ExUnitのCSSカスタマイズ

Lightningの必須プラグインVK All in One Expansion UnitにもCSS記述覧が設けられています。

ダッシュボードメニューで　ExUnit＞CSSカスタマイズ　と進めて使います。

メリットとしては、記述覧が広いので書きやすいことと、プラグインなのでテーマ変更の影響を受けない、ということです。また、ここに記述したCSSは自動的に圧縮されるので、記述量が多い場合でもサイト表示スピードへの影響を小さくできます。

デメリットとしてはプレビュー確認しながら作業ができないことですね。

各エディター画面下のカスタムCSS記述覧

プラグインVK All in One Expansion Unitが有効化されていれば、投稿や固定ページの編集画面下部にカスタムCSS欄が設けられています。

ここに記述したCSSは、該当ページにのみ適用されるのが大きなメリットです。また、これも自動圧縮してくれます。

デメリットとしては、プレビュー表示しながらの作業はできないことです。

子テーマのstyle.css

カスタマイズする量が多い場合、子テーマのstyle.cssへの記述が作業的には一番楽です。

メリットとしてはVs Codeなどの外部エディターを使えることです。また、Localなどのカスタマイズ環境を自分のPCに整えておけば、Live Serverなどの拡張機能を使って実際の表示を確認しながら作業を進めることができます。

ただし圧縮は手動でする必要があるので、実案件用のカスタムCSSは、次のSassを使った方法がおすすめです。

子テーマのstyle.scssに記述してコンパイルして使う

LightningにはSassを使ったカスタマイズ環境が準備されています。この方法はSassで記述できる、というのはもちろん、子テーマのstyle.cssと同様にLive Serverで表示確認しながら作業を進めることができるうえ、コンパイルして生成されるstyle.cssは自動圧縮したものとなっています。

実案件ではこの方法が一番現実的でしょう。

Lightning G3 ProのカスタムCSS欄のメリット

以上さまざまな方法がLightningには準備されていますが、ブロック毎に設定されたカスタムCSS欄の場合、従来のカスタムCSS記述覧にはない大きなメリットがあります。

• 対象のブロックのみに適用させることができる
• 対象ブロックのないページではブロックのカスタムCSSは読み込まれない
• 編集画面（ブロックエディター）にもスタイルが反映される

このような従来にない特徴は、今後ブロックエディターをフル活用した、フルサイト編集（ブロックテーマ）においても大きなメリットとなります。

ちなみに、Lightningは非ブロックテーマですが、Lightning開発元の（株）ベクトルさんではブロックテーマX-T9もリリースされています。したがって、VK Passportを購入してVK Blocks Proを手に入れれば、LightningだけでなくブロックテーマX-T9でもこのブロック毎のカスタムCSS設定が利用可能です。

VK Blocks proのカスタムCSS欄の使い方

使い方といっても、カスタムCSSを記述するだけですが、注意点としては以下の通りです。

例えば、段落ブロックの背景色を赤にしたい場合、

p {background-color: red;}

と通常は書くわけですが、これだと該当ブロックだけでなく他の段落ブロックにも適用されてしまいます。

該当ブロックにのみ適用させたければ、セレクターをselectorという記述に変更してください。

selector {background-color: red;}

VK Blocks proのカスタムCSS欄の使用事例

次のようなラベルを作成するとします。

段落ブロック（テキスト）とアイコンブロックを横並びすれば作成可能ですが、実際は下記のように、段落ブロックにデフォルト設定されているマージンが邪魔となります。

そこで、この段落ブロックのカスタムCSS欄に以下の記述をして解決します。

実際の公開側（web表示）では目論見通りの表示となりますが、編集画面ではブロックに”Custom CSS”という記述が表示されることになります。

上の例では、もともとのテキスト”学習内容”が白文字なので、その上に白いCustom CSSというラベルが被ってしまうと、何が書いてあったのかわかりにくくなっていますね。

フロント（公開側）web側表示と同様にするには

このように、カスタムCSS欄に記述をしたブロックには”Custom CSS”というラベルが表示されますが、これを非表示化する方法も準備されています。

ダッシュボードメニューで、設定＞VK Blocks＞カスタムCSS設定　と進めて、スイッチをOFFにすれば非表示化となり、公開web表示（フロント側）と同様の表示となります。

ただし、非表示化してしまうと、今度はどのブロックにカスタムCSSを記述したのかわからなくなりますので、一長一短というところですね。なので私は表示状態（スイッチはON）のままとして使用しています。

まとめ（サイト制作フローではどのように利用するか）

このように、Lightning G3 Pro（正しくはVektor Passport）に同梱されているVK Blocks ProのカスタムCSS欄のメリットと使い方を紹介してきました。

メリットをもう一度おさらいすると、

• 対象のブロックのみに適用させることができる
• 対象ブロックのないページではブロックのカスタムCSSは読み込まれない
• 編集画面（ブロックエディター）にもスタイルが反映される

該当ブロックにのみ適用でき、不必要なCSSをページ内で読み込みすることがないのは、ページスピードの観点からも大きなメリットとなりますね。

ただ、ここで悩ましいのは制作案件です。特にデザインカンプ通りにコーディングカスタマイズが必要な場合ですが、やはり作業的には先に紹介した子テーマのstyle.scssに記述していく、というのが実際的だと思います。

しかしクライアントの意向により、更新やチョコ変を今後お客様側でも簡単にできるようにするならば、編集画面の表示もフロント側と同様となるブロックへのカスタムCSS記述が望ましいでしょう。

したがって、次のフローがよいのかな、と思います。

1. 子テーマのstyle.scssへの記述でゴリゴリカスタマイズをする
2. カスタマイズの完成
3. 完成版のCSSを各ブロックに移植する

このあたりは、私も今後の検討課題です。ブロックのカスタムCSSはぜひとも活用していきたいところですね。

なお、おすすめのVektor Passportは以下から入手可能です。