header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<!-- ==============================
ヘッダー全体
============================== -->
<header id="site-header" class="<?php echo is_front_page() ? 'has-slider' : 'no-slider'; ?>">
<!-- ✅ 上段：ロゴ＋ナビゲーション -->
<div class="site-branding">
<h1 class="site-title">
<a href="<?php echo esc_url(home_url('/')); ?>">
<?php
if (function_exists('the_custom_logo') && has_custom_logo()) {
the_custom_logo();
} else {
bloginfo('name');
}
?>
</a>
</h1>
<nav class="main-nav">
<button class="menu-toggle" aria-controls="menu-main-menu" aria-expanded="false">☰</button>
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => false,
'menu_class' => 'menu-list',
'fallback_cb' => false,
));
?>
</nav>
</div>
</header>
<!-- ==============================
スライダー部分（トップページのみ表示）
============================== -->
<?php if (is_front_page()): ?>
<div id="myslider" class="slider">
<?php
for ($i = 1; $i <= 5; $i++):
$slide_img = get_theme_mod("lesson_slide{$i}");
$title = get_theme_mod("lesson_slide_title_{$i}", "スライド{$i}のタイトル");
$caption = get_theme_mod("lesson_slide_caption_{$i}", "スライド{$i}のサブテキスト");
if ($slide_img):
?>
<div class="slide<?php echo $i === 1 ? ' active' : ''; ?>">
<img src="<?php echo esc_url($slide_img); ?>" alt="スライド<?php echo esc_attr($i); ?>">
<!-- ✅ スライドごとのテキスト -->
<div class="slider-text">
<h2 class="slider-title"><?php echo esc_html($title); ?></h2>
<p class="slider-caption"><?php echo esc_html($caption); ?></p>
</div>
</div>
<?php
endif;
endfor;
?>
</div>
<?php endif; ?>
<?php wp_footer(); ?>
</body>
</html>header.css
/* =====================================
ヘッダー全体
===================================== */
#site-header.has-slider {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
background-color: transparent;
border: none;
padding: 0;
height: 0;
z-index: 1;
}
/* ✅ トップページ以外（スライダーなし） */
#site-header.no-slider {
height: 0; /* ← 余白をなくす */
z-index: 10;
background: none; /* ← 緑の上書きを防ぐ */
}
/* =====================================
ロゴ＋メニュー（固定ヘッダー）
===================================== */
.site-branding {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px; /* トップページでの高さ */
padding: 0;
justify-content: space-between;
align-items: center;
z-index: 10;
background-color: transparent; /* ← デフォルト透明 */
transition: all 0.4s ease;
}
/* ✅ 縮小時（スクロール後 or no-sliderページ） */
.site-branding.shrink,
#site-header.no-slider .site-branding {
height: 38px; /* 高さを縮める */
background-color: rgba(0, 0, 0, 0.5); /* 黒の半透明背景 */
backdrop-filter: blur(8px); /* 背景ぼかし */
transition: all 0.4s ease;
}
/* ✅ ロゴ縮小・透明効果 */
.site-branding.shrink .custom-logo,
#site-header.no-slider .custom-logo {
max-height: 40px;
opacity: 0.85;
transition: all 0.4s ease;
}
/* ✅ 固定ヘッダー高さ分の余白を本文に確保 */
body:not(.home) {
padding-top: 50px; /* 縮小時の高さ分だけ本文を下げる */
}
/* =====================================
スライダー
===================================== */
.slider {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
z-index: 0;
}
.slider .slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1.2s ease-in-out;
}
.slider .slide.active {
opacity: 1;
z-index: 2;
}
.slider img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* =====================================
スライダーテキスト
===================================== */
.slider-text {
position: absolute;
bottom: 20%;
left: 10%;
color: #fff;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}
.slider-title {
font-size: 2.5em;
margin-bottom: 0.3em;
}
.slider-caption {
font-size: 1.2em;
width: 60%;
}
/* =====================================
スライダーベース設定
===================================== */
#myslider {
position: relative;
overflow: hidden;
}
/* 全スライド共通 */
#myslider .slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: translateX(0);
transition: transform var(--slide-dur, 1s) ease,
opacity var(--slide-dur, 1s) ease;
z-index: 1;
will-change: transform, opacity;
}
/* 表示中スライド（フェード用） */
#myslider .slide.is-visible {
opacity: 1;
z-index: 2;
}
/* =====================================
ナビゲーションメニュー
===================================== */
.main-nav {
position: absolute;
bottom: 7px;
right: 20px;
text-align: right;
}
.main-nav .menu-list {
display: flex;
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.main-nav .menu-list a {
color: white;
text-decoration: none;
font-weight: bold;
transition: transform 0.2s ease, color 0.2s ease;
}
.main-nav .menu-list a:hover {
color: var(--vk-color-primary, #ffcc00);
transform: translateY(-5px);
}
/* =====================================
ロゴ設定
===================================== */
.custom-logo {
display: block;
max-height: 60px;
width: auto;
margin: 0 30px;
transition: all 0.4s ease;
}
/* =====================================
モバイルメニュー（将来対応）
===================================== */
.menu-toggle {
display: none;
}
/* =====================================
アニメーション効果
===================================== */
@keyframes shine {
from {
opacity: 0.6;
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* =====================================
その他補足（推奨）
===================================== */
/* トップページ以外で背景が白いページ向けにメニュー色を変更する場合 */
body:not(.home) .main-nav .menu-list a {
color: #fff; /* 黒背景に白文字 */
}
/* トップページ以外ではロゴを非表示 */
body:not(.home) .custom-logo {
display: none !important;
}heaer.js必要性は不明
＼ 最新情報をチェック ／
コメント