はじめに
前回の記事ではVK Pattern Libraryを使ってブロックパターンをコピペするだけでWordPressサイトを効率よく構築する方法を解説しました。今回は貼り付けたパターンをさらにスタイルカスタマイズする方法と、追加CSSを使ってテーマ全体の細かい調整を行う方法を解説します。パターンの素材はそのままに、色・余白・フォント・アニメーションを自分好みに整えることでサイトの個性が生まれます。
1. カスタマイズの3つのアプローチ
1.1 どの方法でCSSを書くか
WordPressでスタイルをカスタマイズする方法は大きく3つあります。
| 方法 | 場所 | 向いているケース |
|---|---|---|
| Gutenbergのブロック設定 | エディターの右サイドバー | ブロック単位の色・余白・フォントサイズの変更 |
| 追加CSS | 管理画面「外観」→「カスタマイズ」→「追加CSS」 | サイト全体または特定ページへのスタイル追加 |
| テーマの子テーマCSS | 子テーマのstyle.css | 本格的なカスタマイズ・テーマアップデートに影響されない変更 |
💡 手軽に始めるなら追加CSSから試しましょう： Gutenbergの設定パネルで対応できないスタイルは「追加CSS」に書くのが最も手軽です。本格的なカスタマイズが増えてきたら子テーマのCSSに移行するのがおすすめです。
2. Gutenbergブロックのスタイル設定
2.1 ブロックに直接クラスを追加する
GutenbergのエディターではブロックごとにカスタムCSSクラスを追加できます。
設定手順：
1. スタイルを変えたいブロックをクリックする
2. 右サイドバーの「ブロック」タブを開く
3. 下部の「高度な設定」を展開する
4. 「追加CSSクラス」の欄に任意のクラス名を入力する
5. そのクラス名に対するCSSを追加CSSまたは子テーマに記述する
/* 例：ヒーローセクションに my-hero クラスを付けた場合 */
.my-hero {
min-height: 80vh;
display: flex;
align-items: center;
}
.my-hero h1 {
font-size: clamp( 2.4rem, 5vw, 5.6rem );
line-height: 1.2;
}
2.2 VKブロック独自のクラス構造
VK Blocksが出力するブロックはベンダー固有のクラス名を持っています。カスタマイズするにはそのクラス名をChromeのDevToolsで確認してから上書きします。
DevToolsでクラス名を確認する手順：
1. フロントエンド（サイトの表示側）をブラウザで開く
2. F12で開発者ツールを開く
3. 左上の「要素を選択」アイコンをクリックする
4. スタイルを変えたい要素をクリックする
5. Elementsタブで該当要素のクラス名を確認する
/* VKブロックのカード系クラスを上書きする例 */
.vk_grid-col-card {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.08 );
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vk_grid-col-card:hover {
transform: translateY( -4px );
box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.14 );
}
💡 !important は最終手段として使いましょう： VKブロックの既存スタイルを上書きするときに詳細度の問題でスタイルが当たらない場合があります。まず詳細度を上げる（セレクターを具体的にする）方法で対処して、それでも解決しない場合にのみ !important を使います。
3. 追加CSSの使い方
3.1 追加CSSを開く
手順：
1. WordPress管理画面「外観」→「カスタマイズ」を開く
2. 左サイドバーの「追加CSS」をクリックする
3. テキストエリアにCSSを記述する
4. 「公開」をクリックして反映する
⚠️ 追加CSSはテーマを切り替えると消えることがあります： 追加CSSに書いたスタイルはそのときに有効化しているテーマに紐付けられています。テーマを変更すると消えてしまうため、大切なカスタマイズは子テーマや別のファイルにも控えを残しておきましょう。
3.2 サイト全体のベースカラーをCSS変数で管理する
第三十九弾で解説したCSS変数の考え方をX-T9テーマのカスタマイズにも活かします。
/* ===== サイト全体のカラー定義 ===== */
:root {
--color-primary: #1A5FC0;
--color-primary-light: #dbeafe;
--color-accent: #EF9F27;
--color-text: #1e293b;
--color-text-sub: #64748b;
--color-bg: #ffffff;
--color-bg-sub: #f8fafc;
--color-border: #e2e8f0;
--font-sans: 'Noto Sans JP', sans-serif;
--radius-md: 8px;
--radius-lg: 16px;
--shadow-sm: 0 1px 3px rgba( 0, 0, 0, 0.08 );
--shadow-md: 0 4px 12px rgba( 0, 0, 0, 0.12 );
}
/* ===== 基本スタイルの上書き ===== */
body {
font-family: var( --font-sans );
color: var( --color-text );
background: var( --color-bg );
line-height: 1.8;
}
3.3 テーマのプライマリカラーを上書きする
X-T9テーマのデフォルトのアクセントカラーを自分のブランドカラーに変更します。
/* ボタン・リンクのカラー上書き */
.btn,
.wp-block-button__link {
background-color: var( --color-primary ) !important;
border-color: var( --color-primary ) !important;
border-radius: var( --radius-md );
}
.btn:hover,
.wp-block-button__link:hover {
background-color: #0d3a7a !important;
border-color: #0d3a7a !important;
}
/* テキストリンクのカラー */
a {
color: var( --color-primary );
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: #0d3a7a;
}
4. ヒーローセクションをカスタマイズする
4.1 ヒーローの高さと背景を調整する
VK Pattern Libraryのヒーローパターンに追加クラスを付けてスタイルを上書きします。
/* ヒーローセクションの高さを調整する */
.my-hero-section {
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: clamp( 4rem, 10vw, 10rem ) 0;
}
/* ヒーローの背景にグラデーションをかける */
.my-hero-section::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba( 26, 95, 192, 0.08 ) 0%,
rgba( 142, 68, 173, 0.05 ) 100%
);
pointer-events: none;
}
/* ヒーローの見出し */
.my-hero-section h1 {
font-size: clamp( 2.8rem, 6vw, 6.4rem );
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
}
4.2 ヒーローのボタンを整える
/* ヒーローセクション内のCTAボタン */
.my-hero-section .wp-block-button__link {
padding: 1.2rem 3.2rem;
font-size: 1.6rem;
font-weight: 600;
border-radius: var( --radius-lg );
letter-spacing: 0.04em;
transition: all 0.25s ease;
}
.my-hero-section .wp-block-button__link:hover {
transform: translateY( -2px );
box-shadow: var( --shadow-md );
}
/* アウトラインボタン（白背景＋ボーダー） */
.my-hero-section .is-style-outline .wp-block-button__link {
background: transparent;
border: 2px solid var( --color-primary );
color: var( --color-primary );
}
5. カードセクションをカスタマイズする
5.1 カードグリッドのホバーアニメーション
/* VKブロックのカードにホバーアニメーションを追加する */
.vk_gridCard-item,
.wp-block-column {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vk_gridCard-item:hover {
transform: translateY( -6px );
box-shadow: var( --shadow-md );
}
/* カードの角丸を統一する */
.vk_gridCard-item {
border-radius: var( --radius-md );
overflow: hidden;
}
/* カード内の画像 */
.vk_gridCard-item img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.vk_gridCard-item:hover img {
transform: scale( 1.04 );
}
5.2 カードのバッジ・タグスタイル
/* カテゴリーバッジのスタイル */
.card-badge {
display: inline-block;
padding: 0.3rem 1rem;
background: var( --color-primary-light );
color: var( --color-primary );
font-size: 1.2rem;
font-weight: 600;
border-radius: var( --radius-md );
margin-bottom: 0.8rem;
}
6. セクション区切りをカスタマイズする
6.1 セクションの背景色を交互に変える
パターンを複数並べたとき、同じ背景色が連続するとメリハリがなくなります。
/* 偶数番目のセクションの背景色を変える */
.site-main > section:nth-child( even ),
.wp-block-group:nth-child( even ) {
background-color: var( --color-bg-sub );
}
/* セクションの上下余白を統一する */
.site-main > section,
.wp-block-group.alignfull {
padding-block: clamp( 6rem, 10vw, 12rem );
}
6.2 セクションタイトルのスタイルを統一する
VK Pattern Libraryのパターンごとに見出しのスタイルがバラバラにならないよう統一します。
/* セクションタイトルの共通スタイル */
.section-title {
font-size: clamp( 2.4rem, 4vw, 4rem );
font-weight: 700;
text-align: center;
margin-bottom: 0.8rem;
letter-spacing: -0.01em;
}
/* サブタイトル */
.section-subtitle {
font-size: 1.6rem;
color: var( --color-text-sub );
text-align: center;
margin-bottom: 4.8rem;
line-height: 1.7;
}
/* セクションタイトル下のデコレーションライン */
.section-title::after {
content: '';
display: block;
width: 48px;
height: 3px;
background: var( --color-primary );
margin: 1.2rem auto 0;
border-radius: 2px;
}
7. ヘッダー・フッターを調整する
7.1 固定ヘッダーのスタイル
/* ヘッダーを上部に固定する */
.site-header {
position: sticky;
top: 0;
z-index: var( --z-header, 100 );
background: rgba( 255, 255, 255, 0.95 );
backdrop-filter: blur( 8px );
-webkit-backdrop-filter: blur( 8px );
border-bottom: 1px solid var( --color-border );
transition: box-shadow 0.25s ease;
}
/* スクロール時にシャドウを追加する（JavaScriptと組み合わせる） */
.site-header.is-scrolled {
box-shadow: var( --shadow-sm );
}
// スクロールに応じてヘッダーにクラスを付け外しする
const header = document.querySelector( '.site-header' );
window.addEventListener( 'scroll', () => {
if ( window.scrollY > 50 ) {
header?.classList.add( 'is-scrolled' );
} else {
header?.classList.remove( 'is-scrolled' );
}
}, { passive: true } );
💡 { passive: true } でスクロールのパフォーマンスを改善できます： スクロールイベントリスナーに passive: true を渡すことでブラウザのスクロールを妨げずにイベント処理を行えます。Lighthouseのパフォーマンスにも影響する設定です。
7.2 フッターのカラーを調整する
/* フッターのカラーをサイトに合わせる */
.site-footer {
background: #1e293b;
color: #f1f5f9;
padding-block: 6rem;
}
.site-footer a {
color: #94a3b8;
transition: color 0.2s ease;
}
.site-footer a:hover {
color: #f1f5f9;
}
.site-footer .copyright {
font-size: 1.3rem;
color: #64748b;
text-align: center;
margin-top: 4rem;
padding-top: 2.4rem;
border-top: 1px solid #334155;
}
8. スクロールアニメーションを追加する
8.1 第三十五弾で解説したfade-in-viewをVKパターンに適用する
/* スクロールアニメーションの初期状態 */
.fade-in-view {
opacity: 0;
transform: translateY( 24px );
transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in-view.is-visible {
opacity: 1;
transform: translateY( 0 );
}
/* 時間差で登場させる（nth-childを使う） */
.vk_gridCard-item:nth-child(1) { transition-delay: 0s; }
.vk_gridCard-item:nth-child(2) { transition-delay: 0.1s; }
.vk_gridCard-item:nth-child(3) { transition-delay: 0.2s; }
/* モーション軽減設定への対応 */
@media ( prefers-reduced-motion: reduce ) {
.fade-in-view {
opacity: 1;
transform: none;
transition: none;
}
}
/* Intersection ObserverでVKブロックのカードにアニメーションを適用する */
const targets = document.querySelectorAll(
'.vk_gridCard-item, .wp-block-group, .vk_post-grid__col'
);
targets.forEach( el => el.classList.add( 'fade-in-view' ) );
const observer = new IntersectionObserver( entries => {
entries.forEach( entry => {
if ( entry.isIntersecting ) {
entry.target.classList.add( 'is-visible' );
observer.unobserve( entry.target );
}
} );
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' } );
targets.forEach( el => observer.observe( el ) );
9. レスポンシブ対応の微調整
9.1 ブレークポイントでの文字サイズ調整
/* X-T9テーマのブレークポイントに合わせた微調整 */
/* スマートフォン（767px以下） */
@media ( max-width: 767px ) {
/* パターンの余白を狭くする */
.wp-block-group.alignfull {
padding-inline: 1.6rem;
}
/* ヒーローのキャッチコピーを小さくする */
.my-hero-section h1 {
font-size: 3.2rem;
}
/* カードグリッドを1カラムにする */
.vk_gridCard {
grid-template-columns: 1fr;
}
}
/* タブレット（768px〜1023px） */
@media ( min-width: 768px ) and ( max-width: 1023px ) {
/* カードグリッドを2カラムにする */
.vk_gridCard {
grid-template-columns: repeat( 2, 1fr );
}
}
10. 実装チェックリスト
✓ DevToolsでVKブロックのクラス名を確認してから上書きCSSを書いているか
✓ CSS変数でカラーを一元管理しているか
✓ X-T9テーマのプライマリカラーをブランドカラーに上書きしているか
✓ カードにホバーアニメーションを追加しているか
✓ セクションの背景色と余白を統一しているか
✓ 見出しのスタイル（フォントサイズ・デコレーションライン）を統一しているか
✓ 固定ヘッダーのスクロール時のシャドウが動作するか確認したか
✓ Intersection Observerのスクロールアニメーションが動作するか確認したか
✓ prefers-reduced-motion に対応しているか
✓ スマートフォン・タブレット・PCで表示崩れがないか確認したか
まとめ
今回はVK Pattern Libraryで組み立てたページをさらにカスタマイズする方法と、追加CSSでテーマを細かく調整する方法を解説しました。ポイントをまとめると：
- ブロック単位のカスタマイズはGutenbergの右サイドバーから・サイト全体のカスタマイズは追加CSSまたは子テーマのCSSで行う
- VKブロックのクラス名はDevToolsで確認してから上書きCSSを書く
- CSS変数でカラー・余白・角丸を一元管理するとブランドの統一感が出る
- カードにホバーアニメーション（浮き上がり・画像のズーム）を追加するだけで印象が大きく変わる
- セクションの背景色を交互に変えて余白を
clamp()で統一するとページ全体のリズムが整う - 固定ヘッダーにスクロール検知クラスとガラスモーフィズムのスタイルを組み合わせると洗練された印象になる
- Intersection Observerでスクロールアニメーションを追加して
prefers-reduced-motionにも対応する
次の記事では、これまで学んできた知識を活かして実際のクライアント案件に挑戦するための心構えと、フリーランスとして独立するための準備ステップを解説します。お楽しみに！
コメント