【WordPress改造】Cocoonを「ドラクエ風RPGサイト」に魔改造した全記録 (Silent Fortress Project)
WordPressの無料テーマとして名高い「Cocoon」。その機能美はそのままに、特定のカテゴリーだけを「ドット絵RPGの世界」に異世界転生させるプロジェクト「Silent Fortress」の実装が完了しました。
今回は、実際に使用しているテンプレート構造と、没入感を高めるための技術的アプローチ（PHPによる条件分岐、CSS変数による時間変化、モバイル特化UIなど）の全貌を公開します。
1. 全体構造：カテゴリーによる「世界線」の分岐
通常のブログ記事とRPG風記事を共存させるため、single.php（投稿ページテンプレート）に条件分岐ロジックを組み込みました。
テンプレートの切り替えロジック (single.php)
通常のCocoonは全ての記事で同じヘッダー・フッターを読み込みますが、ここではカテゴリー判定を行い、silent-fortress カテゴリー（およびその子孫）に属する場合のみ、専用のテンプレート（silentスラッグ）を呼び出すように改造しています。
// 親カテゴリー「silent-fortress」配下かどうかを判定
$use_silent_custom = false;
$target_parent_slug = 'silent-fortress';
// ...（カテゴリーID取得処理）...
if ( in_category( $target_ids ) ) {
$use_silent_custom = true;
}
// 分岐処理
if ( $use_silent_custom ) {
get_header( 'silent' ); // 専用ヘッダー header-silent.php
} else {
get_header(); // 通常のCocoonヘッダー
}
これにより、既存のブログデザインを崩すことなく、特定の記事群だけを別世界として隔離することに成功しました。
2. ヘッダー：没入感を生み出す「ダッシュボード」化
header-silent.php は単なるヘッダーではなく、ゲームの「ステータス画面」としての役割を持たせています。
時間帯による背景変化システム
PHP側で現在時刻を取得し、<body> タグにクラスを付与。CSS変数（カスタムプロパティ）を上書きすることで、朝・夕・夜の背景グラデーションを自動で切り替えています。
PHP側のアプローチ:
$h = (int)current_time('H');
if ($h >= 5 && $h < 10) {
$time_class = 'time-morning';
} elseif ($h >= 16 && $h < 19) {
$time_class = 'time-evening';
} // ...
CSS側のアプローチ (style.css / インラインスタイル):
:root {
/* デフォルト（昼） */
--dq-sky-top: #0074D9;
--dq-forest: #2E8B57;
}
.time-evening {
/* 夕方：紫〜オレンジのグラデーション */
--dq-sky-top: #3e1c75;
--dq-sky-btm: #ff6b00;
}
.rpg-dashboard {
background: linear-gradient(180deg, var(--dq-sky-top) 0%, ...);
}
フォントの使い分け：世界観 vs 可読性
「世界観」を演出する見出しやUIにはドット絵フォント『DotGothic16』を採用する一方、長文を読む「記事本文」エリアには『Noto Sans JP』を強制適用しています。これにより、「ゲームっぽいのに読みやすい」という絶妙なバランスを実現しました。
3. サイドバー：PCユーザーへの「指名手配書」と「噂話」
PCの大画面を活かし、画面の両端に固定ポジション（position: absolute）で追従しないバナーエリアを配置しました。
- 左サイド：WANTED（指名手配書）
- 人気記事ランキングを「指名手配書」のデザインで装飾。
- 画鋲のCSSや、画像のセピア調フィルタ処理で古紙の質感を演出。
- 右サイド：行商人の看板
- 検索窓やアフィリエイト広告を「行商人の馬車」「魔法の鏡」としてリブランディング。
- 「酒場の噂話」としてテキストリンクを配置し、クリック率の向上を狙っています。
4. フッター：街への帰還とモバイルUI
footer-silent.php では、読了後のユーザー体験（UX）を設計しています。
RPG風フッター「街の機能」
通常のフッターリンクを、RPGの施設に見立ててグリッド配置しました。
- 運営情報 → 🏰 ギルド本部
- お問い合わせ → 🍻 ギルドの酒場
- サイトマップ → 🗼 知恵の塔
モバイル専用コマンドバー
スマホ閲覧時（幅1350px以下）は、画面下部にドラクエ風の**「コマンドウィンドウ」**を固定表示。
<div class="mobile-command-bar">
<div class="cmd-grid">
<a href="/" class="cmd-item">ぼうけん</a>
<div class="cmd-item" onclick="scrollToNav()">じゅもん</div>
<div class="cmd-item" onclick="toggleMerchantModal()">どうぐ</div>
<div class="cmd-item" onclick="toggleSearchModal()">しらべる</div>
</div>
</div>
JavaScriptにより、「どうぐ（行商人）」や「しらべる（検索）」ボタンを押すと、モーダルウィンドウがオーバーレイ表示されるSPA（シングルページアプリケーション）のような挙動を実装しています。
5. 記事装飾：執筆用カスタムCSS
style.css には、記事本文を彩る専用クラスを用意しました。
- ランクボックス (
.sf-rank-box):legendary（赤）、epic（緑）、rare（青）の3段階で情報の重要度やアイテムのレアリティを視覚化。
- MVPカード (
.sf-mvp-card):- その記事で最もおすすめしたいアイテムを、黒背景＋金枠の「特級装備」として強調表示。
- クエストクリア (
.sf-quest-clear):- 記事の最後に「QUEST CLEAR」のアニメーションバナーを表示し、読了感を演出。
まとめ：機能と遊び心の融合
この「Silent Fortress」プロジェクトは、単なるデザイン変更ではありません。
- PHPによる動的な条件分岐（カテゴリー判定・時間帯判定）
- CSS変数による効率的なテーマ管理
- JSによるインタラクティブなモバイルUI
これらWeb技術を駆使することで、WordPressというCMSを「冒険の舞台」へと昇華させました。 今後もこの「要塞」は、新たなコードと共に拡張され続けるでしょう。
### 【補足】記事内で使用できる装飾用HTMLサンプル
実装された `style.css` を活用して、記事本文（ブロックエディタのカスタムHTML等）で以下のように記述すると、RPG風のデザインが適用されます。
```html
<!-- レアリティ別ボックス -->
<div class="sf-rank-box legendary">
<p>これは伝説級の重要情報です。ボスクラスの敵攻略に役立ちます。</p>
</div>
<div class="sf-rank-box epic">
<p>これは標準的な装備品や、知っておくべき知識です。</p>
</div>
<!-- 本日のMVPアイテム -->
<div class="sf-mvp-card">
<span class="sf-mvp-title">本日のMVP装備</span>
<strong>伝説の聖剣（Excalibur）</strong>
<p>攻撃力+999 / 聖属性 / 全てを切り裂く最強の剣</p>
</div>
<!-- 記事の締めくくり -->
<div class="sf-quest-clear">
<span class="sf-qc-title">QUEST CLEAR!</span>
<span class="sf-qc-badge">報酬：知識 +100</span>
<p>このページを読破したことで、新たな知見を得た！</p>
<a href="/" class="sf-btn-home">拠点へ戻る</a>
</div>
コメント