もう少しカスタマイズしたい!CSS でパターンをカスタマイズするには?


  1. Staff Blog
  2. WordPress
  3. もう少しカスタマイズしたい!CSS でパターンをカスタマイズするには?

この記事は ?

パターンをコピペするだけでなく CSS でカスタマイする方法を解説しています。WordPress の基本機能や無料プラグインを使ったこれまでのやりかたに加え、VK Blocks Pro 1.46.0 以降 の カスタム CSS を使ったやりかたを紹介します。

WordPressのブロックパターンを公開している VK パターンライブラリ は、もうご利用いただいているでしょうか? あらかじめ用意されたパターンをコピーし、ご自身が運用しているサイトのブロックエディタにペーストするだけで、デザインされたブロックを使っていただくことができます。

パターンを使いながらも、さらにもう少しカスタマイズしたい!という箇所も出てくるでしょう。
そんなときの CSS のカスタマイズ方法を、いくつか紹介します。

準備

VK パターンライブラリより、パターンをコピペしましょう。
例として、観光案内のパターンを使います。パターンをコピペすると下記のようなページができます。

3つ並んだ、丸い画像にスタイルを追加してみようと思います。

CSS のカスタマイズ方法

テーマのカスタマイズから 追加 CSS

無料で使えます

WordPress にもともと用意されている機能で、すべてのテーマで使用することができます。
ダッシュボードのサイドバー 外観 > カスタマイズ のなかに [追加 CSS] の項目があります。

追加したい CSS を記述し、[公開] ボタンをクリックします。
ここに書いた CSS は基本、サイト全体で共通に有効です。

追加した CSS コードです。

.wp-block-columns img {
    border: solid 7px #FFFB00;
}

.wp-block-columns img は、[カラム] ブロックの中の画像の意味です。
このクラス名の探し方は、「できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説」をご確認ください。

追加 CSS により、画像に黄色い枠線が表示されました。

注意点

  • テーマごとに保存される設定のため、テーマを変更すると適用されなくなる

子テーマで CSS を追加

無料で使えます

子テーマの style.css に書きます。
手元のエディタで書くので作業しやすく、sass を使ったり細かい調整もサクサクできます。

注意点

  • テーマごとに保存される設定のため、テーマを変更すると適用されなくなる
  • サイトに反映させるにはファイルのアップロードが必要

ExUnit の追加 CSS

無料で使えます

ベクトル提供の無料のプラグイン VK All in One Expansion Unit (ExUnit) で、CSS を追加することができます。
ExUnit の管理画面の ExUnit > CSSカスタマイズ 画面から追加したい CSS コードを入力します。

※ 補足

ExUnit の CSSカスタマイズは、ページごとに書く事もできます。
投稿の編集画面で下のほうにある VK All in One Expansion Unit > カスタム CSS の欄に追加すると、編集しているページのみ有効です。

注意点

  • どこに書いたか、あとでわからなくなったり忘れることがある
  • ExUnitを停止すると適用されなくなる

カスタム HTML ブロックに CSS を書く

無料で使えます

WordPress が用意している [カスタムHTML] ブロックにも、CSS を書くことができます。
投稿画面に [カスタムHTML] ブロックを配置し、以下のように書きます。ここに書いた CSS は、編集しているページのみ有効です。

[カスタム HTML] には、style タグで囲んで書きます。

<style type="text/css">
  .wp-block-columns img {
    border: solid 7px #FFFB00;
  }
</style>

注意点

  • [カスタムHTML] がどのブロックとひもづいているか、把握している必要がある

VK Blocks Pro カスタム CSS New !

VK Blocks Pro (有料) が必要です

VK Blocks Pro をご利用の場合は、ブロックごとに CSS を書くことができます。
VK Blocks Pro 1.46.0 以降で、特定のブロックに対して編集画面から直接 CSS が書ける [カスタム CSS] の機能が追加されました。ちょっとした CSS を指定したいときに大変便利です。

カスタム CSS を使うには、まず対象となるブロック (ここでは [カラム]) を選択します。
次に右のパネルでカラムの設定を見ると、[カスタム CSS] の項目がありますのでクリックして入力欄が表示されたら、このなかに CSS を書きます。

これまでと同じく下記のように書いてもよいですが、ページ内に他の [カラム] があった場合にも適用されてしまいます。

.wp-block-columns img {
    border: solid 7px #FFFB00;
}

そこで selector を使えるのが [カスタムCSS] の特徴です。
selector は、指定した場合ブロック固有の CSS クラスに置き換わりますので、このブロックのみ有効です。ブロックのインナー要素 (例えば画像) に対しては、 selector img というように CSS セレクタを使うことができます。

上記の CSS を selector を使って書いてみます。

selector img {
  border: solid 7px #FFFB00;
}

[カスタムCSS] の目印

[カスタムCSS] を設定しているブロック

[カスタムCSS] を設定しているブロックでは、[カスタムCSS] のアイコンが黒くなります。
[カスタムCSS] があるのがひと目でわかりますね。
さらに、ブロック右上にカスタムCSS 識別表示があります。(この表示は VK Blocks の設定「カスタムCSS設定」で表示/非表示 切り替えができます )

[カスタムCSS] を設定していないブロック

いっぽう [カスタムCSS] を設定していないブロックでは、カスタムCSS 識別表示はなく [カスタムCSS] のアイコンも通常です。

ここが便利

  • 記事を書きながら追加したいと思った箇所で CSS を書ける
  • CSS セレクタがわからなくても書ける (デベロッパーツールで調べなくてもいい)
  • ブロックを複製したりコピペしたとき CSS も一緒についてくる
  • CSS をどこに書いたかわかりやすい

CSS でパターンをカスタマイズするまとめ

CSS を適用させたい箇所や、ご自身の制作スタイルに合わせてご利用ください。

  • サイト全体に共通
    • テーマのカスタマイズから 追加 CSS 無料
    • 子テーマで CSS を追加 無料
    • ExUnit の追加 CSS 無料
  • 特定のページ内で共通
    • [カスタム HTML] ブロック 無料
    • ExUnit の CSSカスタマイズ 無料
  • 特定のブロックのみ
    • VK Blocks Pro [カスタム CSS] 有料

無料版では?

ブロックの 高度な設定 > 追加 CSS クラス よりクラスを追加することで、CSS を設定することもできます。
VK Blocks 無料版の場合、また VK Blocks や ExUnit をインストールしていない場合でもこの方法により、CSS でパターンをカスタマイズすることができます。

CSSの基本的なことを知りたい方は、「できる!WordPressカスタマイズ #01 簡単なデザイン(CSS)カスタマイズ方法徹底解説」も合わせてごらんください。

この記事を書いた人

TORIYAMA Yuko
TORIYAMA Yuko
Webデザイナーでカメラマン。Vektorチームでは、VK パターンライブラリと写真係を担当しています。WordCamp Tokyo 撮影班 / 着物屋くるり専属カメラマン
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。


PAGE TOP

このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。