もう少しカスタマイズしたい！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 の欄に追加すると、編集しているページのみ有効です。

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

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

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

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

VK Blocks Pro カスタム CSS Ｎew !

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 を追加 無料
  • ExUnit の追加 CSS 無料
• 特定のページ内で共通
  • [カスタム HTML] ブロック 無料
  • ExUnit の CSSカスタマイズ 無料
• 特定のブロックのみ
  • VK Blocks Pro [カスタム CSS] 有料

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

この記事を書いた人

TORIYAMA Yuko

Webデザイナーでカメラマン。Vektorチームでは、VK パターンライブラリと写真係を担当しています。WordCamp Tokyo 撮影班 / 着物屋くるり専属カメラマン

最近の投稿

• WordPress2024年5月31日画像の設置あれこれ -WordPressのブロックエディター
• WordPress2024年4月19日余白をコントロールするには？ -WordPressのブロックエディター
• WordPress2024年3月25日グループブロックを使い倒せ -WordPressのブロックエディター
• WordPress2024年2月29日リストビューでまるわかり -WordPressのブロックエディター

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

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

今すぐチェック

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中！コピペしながら高品質なサイトを簡単に作れます。

VK パターンライブラリを今すぐチェック

ブロックエディターで

ABテストを


自由に作成できる VK AB Testing

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。

VK AB Testing を詳しく見る