🖌️ 新テーマのカスタマイズ入門

カスタマイズの基本的な考え方

テーマのカスタマイズには、安全性とメンテナンス性を考えた優先順位があります。

1. カスタマイザー（最優先）：テーマ更新に影響されない安全な方法。色・フォント・レイアウトの多くはここで変更できる
2. 追加CSS（カスタマイザー内）：CSSの知識があれば細かいデザイン調整が可能
3. 子テーマのstyle.css：より複雑なCSSの管理に向いている
4. 子テーマのfunctions.php：機能の追加・変更（PHPの知識が必要）

カスタマイザーの使い方

「外観」→「カスタマイズ」から開けるカスタマイザーは、リアルタイムでプレビューを見ながら設定を変更できる便利なツールです。

追加CSSで細かく調整する

カスタマイザーの設定では変えられない細かいデザインは、「追加CSS」機能でCSSを直接記述して変更できます。

追加CSSの開き方

「外観」→「カスタマイズ」→「追加CSS」を選択します。テキストエリアにCSSを入力すると、右側のプレビューにリアルタイムで反映されます。

よく使うCSSの例

/* フォントサイズを変更 */
body {
    font-size: 17px;
    line-height: 1.9;
}

/* ヘッダーの背景色を変更 */
.site-header {
    background-color: #1a1a2e;
}

/* リンクの色を変更 */
a {
    color: #e94560;
}
a:hover {
    color: #0f3460;
}

/* 特定のページだけスタイルを変更（body classを使用） */
.page-id-123 .entry-content {
    max-width: 900px;
}

/* スマホのみ適用するスタイル */
@media (max-width: 768px) {
    .site-title {
        font-size: 1.2rem;
    }
}

ロゴ・サイトアイコンの設定

ロゴ画像の設定

「外観」→「カスタマイズ」→「サイトの基本情報」→「ロゴ」から設定します。

• 推奨形式：PNG（透過背景）またはSVG
• 推奨サイズ：横幅250〜400px、縦幅60〜100px程度（Retina対応のため2倍サイズで用意するとよい）
• テキストロゴを使う場合はSVGが最適（拡大してもぼやけない）

サイトアイコン（ファビコン）の設定

「外観」→「カスタマイズ」→「サイトの基本情報」→「サイトアイコン」から設定します。

• 推奨サイズ：512×512px以上の正方形画像
• 推奨形式：PNG
• WordPressが自動的に各デバイス向けのサイズに変換します

フォントのカスタマイズ

日本語サイトで読みやすいフォントを設定することは、ユーザー体験の向上に重要です。

Google Fontsを使う方法

子テーマのfunctions.phpにGoogle Fontsの読み込みコードを追加します。日本語対応フォントとしては「Noto Sans JP」「Noto Serif JP」が多くのサイトで使われています。

/* 子テーマのstyle.css または 追加CSS */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

body {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
}

システムフォントでの高速化

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
                 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif;
}

ナビゲーションメニューのカスタマイズ

メニューの見た目をCSSでカスタマイズする代表的な例を紹介します。

/* ナビゲーションの背景色を変更 */
.main-navigation {
    background-color: #2c3e50;
}

/* ナビゲーションのリンク色を変更 */
.main-navigation a {
    color: white;
}

/* ホバー時の色を変更 */
.main-navigation a:hover {
    color: #e74c3c;
    background-color: rgba(255,255,255,0.1);
}

/* 現在のページのメニューを強調 */
.main-navigation .current-menu-item > a {
    border-bottom: 3px solid #e74c3c;
    font-weight: bold;
}

カスタマイズとパフォーマンスのバランス

カスタマイズを重ねると、CSSやJSファイルが増えてサイトの表示速度に影響することがあります。カスタマイズとパフォーマンスのバランスを意識しましょう。

CSSの読み込みを最適化する

/* ❌ 避けるべき書き方：@importは読み込みが遅い */
@import url('external-style.css');

/* ✅ 推奨：wp_enqueue_styleを使う（functions.php）*/
function child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action('wp_enqueue_scripts', 'child_enqueue_styles');

不要なCSSを読み込まないようにする

特定のページでのみ必要なCSSは、条件分岐を使って必要なページだけで読み込むことで速度を改善できます。

/* 特定のページのみCSSを読み込む（functions.php）*/
function child_conditional_styles() {
    if (is_front_page()) {
        // トップページのみ読み込む
        wp_enqueue_style('front-page-style', get_stylesheet_directory_uri() . '/front-page.css');
    }
    if (is_singular('post')) {
        // 記事ページのみ読み込む
        wp_enqueue_style('post-style', get_stylesheet_directory_uri() . '/post.css');
    }
}
add_action('wp_enqueue_scripts', 'child_conditional_styles');

Core Web Vitalsへの影響を確認する

カスタマイズ後は以下のツールで影響を確認してください：

• PageSpeed Insights：LCP（最大コンテンツ描画）・CLS（レイアウトシフト）・FID（初回入力遅延）を測定
• Google Search Console：Core Web Vitalsレポートで実際のユーザーデータを確認
• ブラウザ開発者ツール（Lighthouse）：右クリック→「検証」→「Lighthouse」タブで詳細測定

よくある質問

Q1. カスタマイザーで設定した内容はテーマを変更したら消えますか？

A. はい、カスタマイザーの設定はテーマごとに保存されるため、テーマを変更すると設定はリセットされます。テーマ変更前に設定のスクリーンショットを撮り、「追加CSS」の内容はテキストファイルに保存しておいてください。

Q2. CSSの記述が効かない場合はどうすればいいですか？

A. より具体的なセレクター（クラス名を複数組み合わせる）を使うか、!important を最後に追加してください。例：color: red !important;。また、ブラウザの開発者ツールで実際に適用されているCSSを確認することをおすすめします。

Q3. スマホとPCで別々のデザインにできますか？

A. はい、CSSのメディアクエリを使えば可能です。@media (max-width: 768px) {{ ... }} でスマホ向け、@media (min-width: 769px) {{ ... }} でPC向けのスタイルを別々に設定できます。

Q4. カスタマイズしすぎてデザインが崩れました

A. カスタマイザーの「追加CSS」の場合は内容をすべて削除すれば元に戻ります。子テーマのstyle.cssを編集した場合はFTPまたはテーマエディターから修正してください。追加したCSSを少しずつ削除して問題のある箇所を特定しましょう。

関連ページ

• テーマ変更完全ガイドトップ
• STEP 3：変更後の確認作業
• 子テーマの使い方
• よくある問題と対処法
• 用語辞典（CSS・カスタマイザーなど）