2026年5月24日

WordPressのCSS Gridでlayout-1・2・3カラムを切り替える

テーマ・デザイン

はじめに

WordPressのテーマ開発において、CSS Gridは非常に強力なツールです。これを利用することで、サイトのレイアウトを柔軟かつ簡単に変更することができます。本記事では、CSS Gridを使って1カラム、2カラム、3カラムのレイアウトを動的に切り替える方法について解説します。

症状・背景

このテーマが必要になる主な場面:

ブログページや記事一覧で、テキスト中心のシンプルなレイアウトと、画像やメディアコンテンツが多用される複雑なレイアウトを切り替える場合
インターフェースのユーザビリティ向上を目指す場合
動的コンテンツへの対応を強化したい場合

手順・設定方法

ステップ1: CSS Gridの基本的な定義

/* グリッドコンテナの設置 */
.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* カラム数を制御するためのクラス */
.one-column .container {
    grid-template-columns: 1fr;
}
.two-columns .container {
    grid-template-columns: repeat(2, 1fr);
}
.three-columns .container {
    grid-template-columns: repeat(3, 1fr);
}

ステップ2: JavaScriptを使用した動的レイアウト変更

/* レイアウトの切り替えスクリプト */
function changeLayout(layout) {
    var container = document.querySelector('.container');
    switch (layout) {
        case 'one':
            container.classList.remove('two-columns', 'three-columns');
            container.classList.add('one-column');
            break;
        case 'two':
            container.classList.remove('one-column', 'three-columns');
            container.classList.add('two-columns');
            break;
        case 'three':
            container.classList.remove('one-column', 'two-columns');
            container.classList.add('three-columns');
            break;
    }
}

/* レイアウト切り替えボタンの設定 */
document.getElementById('layout-one').addEventListener('click', function() { changeLayout('one'); });
document.getElementById('layout-two').addEventListener('click', function() { changeLayout('two'); });
document.getElementById('layout-three').addEventListener('click', function() { changeLayout('three'); });

ステップ3: WordPressテンプレートファイルへの適用

/* テンプレートファイルにCSS Gridを適用 */
<?php get_header(); ?>

<div class="container one-column">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article>
            <!-- 投稿コンテンツ -->
        </article>
    <?php endwhile; else: ?>
        <p>投稿が見つかりません。</p>
    <?php endif; ?>
</div>

<?php get_footer(); ?>

/* レイアウト変更ボタンの追加 */
<div class="layout-switch">
    <button id="layout-one">1カラム</button>
    <button id="layout-two">2カラム</button>
    <button id="layout-three">3カラム</button>
</div>

<script src="<?php echo get_template_directory_uri(); ?>/js/layout.js"></script>

ステップ4: レスポンシブデザインの考慮

/* 動的なレイアウト変更に合わせたCSS */
@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

注意事項

グローバルスタイルシートとテンプレートファイルの両方に適切な設定を追加すること。
JavaScriptを使用する際は、ページ読み込み後にスクリプトが実行されることを確認する。
レイアウト変更が期待通りに行われない場合は、デベロッパーツールでCSSやJavaScriptの問題がないか確認する。

まとめ

1. CSS Gridの基本的な理解: グリッドレイアウトを効果的に使用するには、その機能と利点について理解することが重要です。

2. 動的変更の実装: JavaScriptを使ってCSSクラスの切り替えを行うことで、ユーザーが簡単にレイアウトを選択できます。

3. レスポンシブデザインの考慮: レイアウトをモバイルデバイス向けに最適化することで、すべてのユーザーにとって使いやすいサイトを作成できます。

4. テストと検証: 各ブラウザやデバイスで動作確認を行い、必要に応じて調整を行います。

Post Views: 29