2026年5月20日

WordPressのヒーローセクションを作成する方法

テーマ・デザイン

はじめに

ヒーローセクションはページ上部に配置するフルワイドの視覚的なバナーエリアです。背景画像・グラデーション・動画を組み合わせ、キャッチコピーやCTAボタンを重ねるのが一般的です。WordPressではアイキャッチ画像と連動させる実装がよく使われます。

症状・原因

トップページにインパクトのあるビジュアルが欲しい
各ページのアイキャッチをヒーローに表示したい
背景画像にテキストを重ねると読みにくい
動画背景を設定したい

解決手順

ステップ1：基本的なヒーローセクション

// テンプレートのheader直下など
<section class="hero" role="banner">
    <?php if (has_post_thumbnail()) : ?>
        <div class="hero-bg"
             style="background-image: url('<?php echo esc_url(get_the_post_thumbnail_url(null, 'full')); ?>')">
        </div>
    <?php endif; ?>
    <div class="hero-overlay"></div>
    <div class="hero-content">
        <h1 class="hero-title"><?php the_title(); ?></h1>
        <p class="hero-desc"><?php echo esc_html(get_the_excerpt()); ?></p>
        <a href="#main" class="hero-cta">詳しく見る</a>
    </div>
</section>

ステップ2：CSS実装

.hero {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 背景画像レイヤー */
.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* parallax効果 */
    background-attachment: fixed;
    transform: scale(1.05); /* Ken Burnsアニメーション余白 */
    animation: hero-zoom 8s ease-in-out infinite alternate;
}

@keyframes hero-zoom {
    from { transform: scale(1.05); }
    to   { transform: scale(1.12); }
}

/* 暗くするオーバーレイ */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

/* テキストコンテンツ */
.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
    padding: 2rem;
    max-width: 800px;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 1rem;
}

.hero-cta {
    display: inline-block;
    padding: 0.875rem 2.5rem;
    background: #2271b1;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    transition: background 0.2s, transform 0.2s;
}

.hero-cta:hover {
    background: #135e96;
    transform: translateY(-2px);
}

ステップ3：動画背景

<section class="hero hero--video">
    <video class="hero-video" autoplay muted loop playsinline>
        <source src="<?php echo get_template_directory_uri(); ?>/videos/hero.mp4" type="video/mp4">
    </video>
    <div class="hero-overlay"></div>
    <div class="hero-content">
        <h1 class="hero-title"><?php bloginfo('name'); ?></h1>
    </div>
</section>

.hero--video .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* モバイルでは動画を非表示にして静止画に切り替え */
@media (max-width: 768px) {
    .hero--video .hero-video {
        display: none;
    }
    .hero--video {
        background-image: url('fallback.jpg');
        background-size: cover;
    }
}

ステップ4：トップページ専用のヒーロー（カスタマイザー連動）

// functions.php
add_action('customize_register', function(WP_Customize_Manager $wp_customize): void {
    $wp_customize->add_setting('hero_title', ['default' => get_bloginfo('name')]);
    $wp_customize->add_control('hero_title', [
        'label'   => 'ヒーロータイトル',
        'section' => 'title_tagline',
        'type'    => 'text',
    ]);
});

注意事項

background-attachment: fixed はiOSのSafariで動作しません。モバイルでは scroll に切り替えるか、JSのparallaxを使ってください
動画背景は autoplay + muted + playsinline の3属性が必須です。muted がないとブラウザが自動再生をブロックします
ヒーローの min-height: 80vh は縦長スマホで大きすぎる場合があります。svh 単位（80svh）を使うとアドレスバーを考慮した高さになります

まとめ

.hero { position: relative; min-height: 80vh } + .hero-bg { position: absolute; inset: 0; background-size: cover } + .hero-overlay でテキストの可読性を確保する構成が基本です。アイキャッチ画像は get_the_post_thumbnail_url() で取得し、動画背景には autoplay muted loop playsinline が必須です。

Post Views: 16