1. 子テーマ（arkhe-child）のフォルダ・ファイル構成
スライドメニューの動作制御JSを含めた最終的な子テーマのファイル構造です。
arkhe-child/
├── js/
│ └── index.js ← スライドメニュー開閉制御JS（必要に応じて配置）
├── functions.php ← 親/子CSSおよびJSの読み込み定義
└── style.css ← テーマ非表示化・全幅青帯・カード・ハンバーガーメニューのCSS
2. 固定サブページ新規作成の4ステップ
Step 1: 固定ページの新規追加とスラッグ設定
管理画面「固定ページ ＞ 新規固定ページを追加」をクリックし、タイトルとURLスラッグを設定します。
例:
・タイトル: 便利ツール
・パーマリンク（スラッグ）: tools （※英小文字推奨）
Step 2: 「カスタムHTML」ブロックの配置
本文エリアに「カスタムHTML」ブロックを追加し、先頭に「ハンバーガーボタン＋スライドメニュー」、続いて「全幅青帯（ヒーロー）」と「コンテンツ領域」を記述します。
<!– 1. ハンバーガーボタン（※spanタグ3本必須） –>
<button class=”hamburger-btn” id=”hamburger-btn” aria-label=”メニューを開く”>
<span></span>
<span></span>
<span></span>
</button><!– 2. 右側スライドナビゲーションメニュー –>
<ul class=”nav-links-drawer” id=”nav-menu”>
<li><a href=”http://192.168.12.28/wordpress/”>Home</a></li>
<li><a href=”http://192.168.12.28/wordpress/便利ツール/”>便利ツール</a></li>
<li><a href=”http://192.168.12.28/wordpress/通信関係/”>通信関係</a></li>
<li><a href=”http://192.168.12.28/wordpress/職業訓練/”>職業訓練</a></li>
<li><a href=”http://192.168.12.28/wordpress/マニュアル/”>マニュアル</a></li>
</ul><!– 3. 全幅青帯（サブページ用タイトル） –>
<section class=”hero”>
<div class=”container”>
<h1>便利ツール</h1>
<p>日常や作業を効率化する便利なWebツール群</p>
</div>
</section><!– 4. メインコンテンツ領域 –>
<div class=”container”>
<!– ここにカードグリッドや説明テキストを記述 –>
</div>
Step 3: 画像リンクのメディアライブラリ絶対パス化
img/sample.png 等の相対パスはWordPress上でリンク切れとなるため、メディアライブラリの「URLをクリップボードにコピー」で絶対パスへ書き換えます。
<!– 書き換え前（リンク切れになる記述） –>
<img src=”img/tool-icon.png” class=”card-img”><!– 書き換え後（正常表示される記述） –>
<img src=”http://192.168.12.28/wordpress/wp-content/uploads/2026/10/tool-icon.png” class=”card-img”>
Step 4: スライドメニュー内のリンク先（href）設定
各ページに設置するスライドメニューの href 属性を、作成したWordPress固定ページの実際のURLへ更新します。
3. 表示不具合・チェックリスト
| 確認項目 | 原因 | 対応策 |
|---|---|---|
| ハンバーガーボタンが1本線に見える | ログイン時のWP管理バーと位置が重複、または <span> タグが不足 | ログアウト状態で確認する。またはHTML内の <span> が3本存在するか確認 |
| メニューをクリックしても開かない | functions.php のJS読み込み失敗、またはHTMLの id="hamburger-btn" の不一致 | functions.php で wp_enqueue_script が正しく記述されているか確認 |
| 画像が表示されず枠だけになる | src のURL指定が相対パスのまま、またはURL指定ミス | 「メディア」詳細の「URLをクリップボードにコピー」から正確な絶対パスを貼り付ける |
💡 ポイント: 今後の固定ページ量産のコツ
本日完成させた「Home」ページの「カスタムHTML」コードをメモ帳などに保存しておき、新しいサブページを作る際はそのコードをコピーして「タイトル・説明文・カード部分」だけを書き換えていくのが最も早くて確実です！
本日完成させた「Home」ページの「カスタムHTML」コードをメモ帳などに保存しておき、新しいサブページを作る際はそのコードをコピーして「タイトル・説明文・カード部分」だけを書き換えていくのが最も早くて確実です！