2026年5月20日

WordPressのフルワイドレイアウトを実装する方法

テーマ・デザイン

はじめに

フルワイドレイアウトとは、コンテナの幅を超えてブラウザの端まで要素を広げる手法です。ヒーローセクション・背景色の帯・フルワイド画像などで使われます。WordPressブロックエディターには alignfull クラスが内蔵されています。

症状・原因

ヒーローセクションを画面幅いっぱいに広げたい
本文はセンタリングしつつ、一部のセクションだけフルワイドにしたい
ブロックエディターで「全幅」を選んでも広がらない

解決手順

ステップ1：CSSでコンテナとフルワイドの基本設定

/* コンテンツの最大幅を定義 */
.site-main,
.entry-content > * {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* フルワイド: ネガティブマージンでコンテナを突き破る */
.entry-content > .alignfull,
.entry-content > .full-width {
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
}

/* ワイド幅: alignwide */
.entry-content > .alignwide {
    max-width: 1200px;
    width: calc(100% + 4rem);
    margin-left: -2rem;
    margin-right: -2rem;
}

ステップ2：ブロックエディターでalignfullを有効化する

// functions.php
add_theme_support('align-wide');

これを追加するとブロックエディターで「全幅」「幅広」の選択肢が有効になります。

// theme.json でコンテンツ幅を定義（ブロックテーマ）
{
    "settings": {
        "layout": {
            "contentSize": "800px",
            "wideSize": "1200px"
        }
    }
}

ステップ3：ページテンプレートでサイドバーなしフルワイドレイアウト

<?php
/**
 * Template Name: フルワイドページ
 */
get_header(); ?>

<main class="site-main full-width-page">
    <?php while (have_posts()) : the_post(); ?>
        <article <?php post_class(); ?>>
            <?php the_content(); ?>
        </article>
    <?php endwhile; ?>
</main>

<?php get_footer(); ?>

/* フルワイドページテンプレート専用 */
body.page-template-full-width-page .site-main {
    max-width: 100%;
    padding: 0;
}

body.page-template-full-width-page .entry-content > * {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

ステップ4：セクション単位でフルワイドを適用する

<!-- テンプレートでフルワイドセクションを作る -->
<section class="full-width-section" style="background: #1d2327; color: #fff; padding: 4rem 0;">
    <div class="container">
        <h2>フルワイドセクションのタイトル</h2>
        <p>コンテナに囲まれたテキスト</p>
    </div>
</section>

.full-width-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.full-width-section .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

注意事項

100vw はスクロールバーの幅を含むため、スクロールバーがある場合に横スクロールが発生することがあります。overflow-x: hidden を body に設定するか、width: 100% に変更してください
align-wide のサポートを追加しないとブロックエディターに「全幅」「幅広」ボタンが表示されません
ネガティブマージンは親要素に overflow: hidden があると機能しません

まとめ

add_theme_support('align-wide') でブロックエディターの全幅・幅広を有効化し、CSS で .alignfull { width: 100vw; margin-left: calc(50% - 50vw); } を設定します。特定ページ全体をフルワイドにするにはページテンプレートと body.page-template-* セレクターを組み合わせます。

Post Views: 16