1. システム構成とカプセル化（カスタムHTML一括管理）方針
テーマ（Arkhe）固有のヘッダー・タイトル枠出力仕様と競合させず、固定ページの本文を「カスタムHTML」ブロックで一括管理してHTML/CSSを完全再現する設計構成です。
WordPress (Arkhe Theme)
├── 子テーマ style.css ← Arkhe標準のヘッダー・コンテナ（.p-pageHeader）を物理消去
└── 固定ページ編集画面
└── 「カスタムHTML」ブロック ← 全幅青帯（.hero）＋ 3列カード（.grid）を一括記述
2. 完全移植とトラブルシューティングのステップ
Step 1: 子テーマ `style.css` によるArkhe標準枠の物理消去
Arkheが固定ページ最上部に自動生成するグレー/黒帯のヘッダーコンテナ（.p-pageHeader や直前の親要素）を、CSSの強力な指定で完全に消去します。
/* Arkhe標準の固定ページ上部自動コンテナを完全消去 */
.l-main > *:not(.l-main__body),
.l-content > *:not(.l-content__body),
.p-pageHeader,
.p-entryHero,
.l-main__header,
.l-content__header {
display: none !important;
height: 0 !important;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: none !important;
overflow: hidden !important;
}/* 本文エリア自体の無駄な上部余白をリセット */
.l-main, .l-content, .l-main__body, .l-content__body, .entry-content {
padding-top: 0 !important;
margin-top: 0 !important;
}
Step 2: 自作全幅青帯（ヒーローエリア）のCSS定義
width: 100vw と計算マージンを使用し、親コンテナの幅制限を突き破って画面左右端まで一直線に広がる青色グラデーション帯を定義します。
/* 本文内自作ヒーローエリア（.hero）：画面全幅化 */
.hero {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
color: white !important;
padding: 60px 0 !important;
text-align: center !important;
margin-bottom: 30px !important;
/* 画面端まで突き破る全幅指定 */
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
box-sizing: border-box !important;
}.hero h1 { color: #ffffff !important; font-size: 2.0rem !important; font-weight: bold !important; margin-bottom: 10px !important; }
.hero p { color: rgba(255, 255, 255, 0.9) !important; font-size: 1.0rem !important; margin: 0 !important; }
Step 3: 1100pxコンテナと3列カードグリッドのCSS定義
カード群は最大幅1100pxで中央寄せし、左右に美しい余白を保ちつつ3列配置（レスポンシブ対応）にします。
/* コンテナ最大幅1100px制限（左右余白確保） */
.l-container, .l-main, .l-content, .container {
max-width: 1100px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
width: 100% !important;
}/* 3列カードグリッド */
.grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 25px !important;
margin-bottom: 50px !important;
}.card {
background: white !important;
border-radius: 12px !important;
overflow: hidden !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
transition: transform 0.3s ease !important;
}
.card:hover { transform: translateY(-5px) !important; }
.card-image-box { width: 100% !important; aspect-ratio: 16 / 9 !important; background-color: #eee !important; }
.card-img { width: 100% !important; height: 100% !important; object-fit: cover !important; }@media (max-width: 768px) {
.grid { grid-template-columns: 1fr !important; }
}
Step 4: 固定ページ「カスタムHTML」ブロックへのコード配置
WordPressの固定ページ編集画面で、自作の青帯（<section class="hero">）とカード群（<div class="grid">）を「カスタムHTML」ブロックにまとめて記述します。
<!– 全幅青帯（ヒーローエリア） –>
<section class=”hero”>
<div class=”container”>
<h1>趣味の備忘録「Hobby Log」</h1>
<p>日々の活動や記録を、シンプルに。自由に。</p>
</div>
</section><!– 3列カードグリッド –>
<div class=”container”>
<div class=”grid”>
<a href=”tree-ceremony.html” class=”card-link”>
<article class=”card”>
<div class=”card-image-box”>
<img src=”img/tree-ceremony.png” alt=”フォルダ階層” class=”card-img”>
</div>
<div class=”card-content”>
<h3>フォルダの階層をツリー化します</h3>
<p>フォルダの階層をテキストで管理します。</p>
</div>
</article>
</a>
<!– 必要な分だけカードタグを並べる –>
</div>
</div>
3. 遭遇したトラブルと解決方法の一覧
| 発生した現象 | 発生原因 | 確実な解決策 |
|---|---|---|
| 青帯の上下・左右に頑固な黒/グレーの帯が出る | Arkhe標準テンプレートの .p-pageHeader 等に背景色・高さが保持されている | style.css で .l-main > *:not(.l-main__body) 等を指定し物理的に消去 |
| 青帯の横幅が画面いっぱいに広がらない | 親コンテナ要素に幅制限や overflow: hidden がかかっている | 自作 .hero に width: 100vw とマイナスマージン（margin-left: calc(-50vw + 50%)）を指定 |
| カード領域が画面いっぱいに広がってしまう | コンテナの最大幅指定が全幅化CSSの影響で上書きされていた | .container に max-width: 1100px !important を再適用して中央寄せ |
💡 完全カプセル化の利点
WordPressテーマ（Arkhe）の自動出力をCSSで完全に遮断し、本文側（カスタムHTML）で青帯とカード群を統一管理することで、テーマ側のアップデートや仕様変更に影響されない頑丈な固定ページテンプレートが完成します。
WordPressテーマ（Arkhe）の自動出力をCSSで完全に遮断し、本文側（カスタムHTML）で青帯とカード群を統一管理することで、テーマ側のアップデートや仕様変更に影響されない頑丈な固定ページテンプレートが完成します。