1. WordPress設定（トップページ分離と固定ページ割り当て）
WordPress標準の投稿一覧を別URLに追い出し、作成した固定ページ「Home」をサイトのトップページとして割り当てる設定手順です。
手順A: 固定ページの準備
1. 「Home」（トップページ用：カスタムHTMLを配置するページ）を作成（スラッグ: home）
2. 「更新情報」（投稿一覧用：完全な空ページ）を作成（スラッグ: news）
手順B: 表示設定の切り替え
管理画面「設定 ＞ 表示設定」を開き、以下のように選択して保存します。
・ホームページの表示: 「固定ページ (以下で選択)」を選択
・ホームページ: 「Home」
・投稿ページ: 「更新情報」
※保存後、http://ドメイン/ でHomeが表示され、http://ドメイン/news/ で標準の投稿一覧が表示されます。
2. 子テーマ（arkhe-child）のファイル記述一覧
子テーマ内に配置する各ファイルの完全コードです。
■ functions.php
<?php
/**
* Arkhe Child functions.php
*/add_action( ‘wp_enqueue_scripts’, function() {
// 1. 親テーマおよび子テーマの style.css 読み込み
wp_enqueue_style( ‘arkhe-style’, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘arkhe-child-style’, get_stylesheet_uri(), array(‘arkhe-style’) );// 2. 子テーマ内の js/index.js を読み込み（フッター出力）
wp_enqueue_script(
‘hobbylog-index-js’,
get_stylesheet_directory_uri() . ‘/js/index.js’,
array(),
‘1.0.0’,
true
);} );
■ js/index.js
document.addEventListener(‘DOMContentLoaded’, () => {
const hamburgerBtn = document.getElementById(‘hamburger-btn’);
const navMenu = document.getElementById(‘nav-menu’);if (hamburgerBtn && navMenu) {
// ボタンクリックでメニュー開閉
hamburgerBtn.addEventListener(‘click’, () => {
hamburgerBtn.classList.toggle(‘active’);
navMenu.classList.toggle(‘active’);
});// 項目選択時に自動で閉じる
const navLinks = navMenu.querySelectorAll(‘a’);
navLinks.forEach(link => {
link.addEventListener(‘click’, () => {
hamburgerBtn.classList.remove(‘active’);
navMenu.classList.remove(‘active’);
});
});
}
});
■ style.css（主要スタイル抜粋）
/* Arkhe標準ヘッダー・アイキャッチの物理非表示化 */
header.l-header, .p-pageHeader, .p-entryHero {
display: none !important; height: 0 !important;
}/* 全幅青帯（ヒーローエリア） */
.hero {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
color: white !important; padding: 60px 0 !important; text-align: center !important;
width: 100vw !important; max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important; margin-right: calc(-50vw + 50%) !important;
}/* 3列カードグリッド */
.grid {
display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 25px !important;
}/* 右側スライドドロワー & ハンバーガーボタン */
.hamburger-btn {
display: flex !important; flex-direction: column !important; justify-content: space-between !important;
position: fixed !important; top: 20px !important; right: 25px !important; z-index: 9999 !important;
width: 32px !important; height: 24px !important; background: transparent !important; border: none !important;
}
.hamburger-btn span {
display: block !important; width: 100% !important; height: 3px !important; background-color: #007bff !important;
border-radius: 2px !important; transition: all 0.3s ease-in-out !important; transform-origin: center center !important;
}
.hamburger-btn.active span:nth-child(1) { transform: translateY(10.5px) rotate(45deg) !important; }
.hamburger-btn.active span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg) !important; }.nav-links-drawer {
position: fixed !important; top: 0 !important; right: -280px !important; width: 280px !important; height: 100vh !important;
background-color: #ffffff !important; box-shadow: -4px 0 15px rgba(0, 0, 0, 0.15) !important;
display: flex !important; flex-direction: column !important; padding: 80px 30px 30px 30px !important; gap: 20px !important;
transition: right 0.3s ease !important; z-index: 9998 !important; list-style: none !important;
}
.nav-links-drawer.active { right: 0 !important; }
3. 固定ページ「Home」に配置するカスタムHTMLフルコード
固定ページ「Home」の編集画面で「カスタムHTML」ブロックを追加し、以下を貼り付けます。
<!– 1. ハンバーガーボタン –>
<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>趣味の備忘録「Hobby Log」</h1>
<p>日々の活動や記録を、シンプルに。自由に。</p>
</div>
</section><!– 4. 3列カードグリッド –>
<div class=”container”>
<div class=”grid”><a href=”delivery-slip.html” class=”card-link”>
<article class=”card”>
<div class=”card-image-box”>
<img src=”http://192.168.12.28/wordpress/wp-content/uploads/2026/10/delivery.png” alt=”納品書 兼 領収書” class=”card-img”>
</div>
<div class=”card-content”>
<h3>納品書 兼 領収書</h3>
<p>事務作業で必要なテンプレートを管理</p>
</div>
</article>
</a><!– (中略: 他の8枚のカード) –></div>
</div>