💡【はじめに】サイト内回遊率（PV数・滞在時間）アップの秘策
ブログで小説やエッセイを公開している皆さん、読者が1つの作品を読み終わった後、そのままブラウザの「戻る」ボタンで離脱されてしまっていませんか？
せっかく面白い作品を書いても、読者が次の作品を見つけられなければ、サイトのPV（ページビュー）や滞在時間は伸びません。それを解決するには、「読者がサイト内をぐるぐると巡回してくれる仕組み（周遊率の向上）」の構築が不可欠です。
そこで今回は、WordPressの大人気テーマ「Cocoon」の標準機能をハックし、各小説ページの最後に「▼ この物語を読んだあなたへ」というコーナーを作り、ランダムで他の作品へ誘導するナビゲーション（エントリーカード）を設置する方法を完全解説します。
単なる関連記事の表示ではありません。「1話完結の読み切り」と「連載形式（シリーズ物）」が混在する小説サイト特有の悩みを、CSSとタグの組み合わせによる”ちょっとしたトリック”で美しく解決する、実践的なテクニックです。
💡 要件定義（今回やりたいことの仕様）
作業に入る前に、今回のカスタマイズで実現する「システム仕様」を明確にしておきましょう。小説サイトならではの、かゆいところに手が届く設計を目指します。
- 基本機能の構築
小説ページの末尾に「▼ この物語を読んだあなたへ」という見出しをつけ、6本の小説ページへのランダムリンク（エントリーカード）を表示する。 - カテゴリーの分離（領域展開）
小説のページには「小説」だけをランダム表示し、コラムのページには「コラム」だけをランダム表示する。世界観を壊さないための導線分離を行います。 - 連載形式（シリーズ物）への特殊対応【超重要】
- 第1話の扱い： 「他の作品のページ」の末尾には宣伝として表示させたいが、自分のページの末尾にはランダムリンクを表示しない（※第1話の直下には、迷わず「第2話」へのリンクだけを置きたいため）。
- 第2話以降（途中）の扱い： ランダムリンクの候補として表示させないし、自分のページの下にもランダムリンクを表示しない（※途中から読まれるのを防ぎ、かつ次の話へ一直線に誘導するため）。
- 最終話の扱い： 最終話の末尾には「▼ この物語を読んだあなたへ」を表示し、読み終わった読者を別の新しい作品へと誘導する。
一見すると複雑な条件分岐に見えますが、プラグインやPHPの改造は一切不要です。Cocoonの基本設定と、わずか数行のCSSを追加するだけで、この完璧なルーティングを実装していきます！
🛠️ 実装編：基本設定（Cocoon設定とタグの準備）
まずは、Cocoonの標準機能を使って、関連記事をランダム表示させるベース部分を作ります。
STEP 1：Cocoonの関連記事設定
- WordPressのダッシュボードから 「Cocoon設定」 ⇒ 「投稿」 タブを開きます。
- 下にスクロールして 「関連記事設定」 の項目を探します。
- 「表示」：『関連記事を表示する』にチェックを入れます。
- 「関連性」：『タグ』のラジオボタンを選択します。（※ここがカテゴリーではなく「タグ」であることが今回の最大のポイントです）
- 「関連記事見出し」：『▼ この物語を読んだあなたへ』と入力します。
- 「表示タイプ」：『エントリーカード（デフォルト）』を選択します。
- 「表示数」：『6』を入力します。（※サイトの規模に合わせて2～30の間でお好みで設定してください。最大数に満たない場合は存在する全ページが表示されます）
- 「取得期間」：『全期間』を選択します。
💡 デバッグ・ノート（補足）
もし「常に新しく書いた最新記事だけをランダム表示させたい！」という場合は、ここを投稿日からの期間（例：1年以内など）に変更してください。
設定が終わったら、「変更をまとめて保存」をクリックします。
STEP 2：仕分け用「タグ」の作成
次に、記事をグルーピングするための「タグ」をあらかじめ作成しておきます。
- ダッシュボードの 「投稿」 ⇒ 「タグ」 を開きます。
- 新規タグを追加で、名前に 『小説』、スラッグに 『novel』 と入力し、「新しいタグを追加」ボタンをクリックします。
- 同様に、名前に 『コラム』、スラッグに 『column』 と入力し、「新しいタグを追加」をクリックします。
STEP 3：既存記事へのタグ付け（紐付け作業）
作成したタグを、実際の記事に設定していきます。
- 「投稿」 ⇒ 「記事一覧」 を開きます。
- ランダムリンクを表示させたい「小説（読み切り作品など）」の編集画面を開きます。
- 画面右側の「タグ」入力欄に『小説』と入力し、必ずキーボードの「Enterキー」を押してください。
⚠️ 致命的なエラートラップ（注意点）
入力しただけではタグは認識されません。Enterキーを押して、文字の横に「×」ボタンが表示された状態（チップ化された状態）になって初めて正しく反映されます。 - 記事を「更新（保存）」します。
- 同様に、「コラム」の記事を開き、タグ欄に『コラム』と入力してEnterキーを押し、保存します。
【ここまでの成果確認】
お疲れ様でした！ここまで設定した記事を開いてみてください。
タグに「小説」と入れたページの末尾には、同じく「小説」タグを持つ別の作品が最大6本ランダムで表示され、「コラム」の末尾にはコラムだけがランダム表示されるようになっているはずです。
これで基本のランダムナビゲーションは完成です。
🚀 実装編：応用設定（連載作品の表示コントロール術）
さて、ここからが本題です。
要件定義の「3. 連載形式への特殊対応」を満たすための高度な設定を行っていきます。
STEP 1：制御用タグ「連載作品」の作成とID取得
- 先ほどと同じ手順で、「投稿」 ⇒ 「タグ」 を開きます。
- 新規タグを追加で、名前に 『連載作品』、スラッグに 『series』 と入力し追加します。
- 追加された「連載作品」タグが右側の一覧に表示されます。ここで、「ID」の列に表示されている数字（例：32 など）を必ずメモ（記憶）してください。 この数字が、システムをハックするための鍵になります。
STEP 2：CSSパッチの適用（非表示トリック）
WordPressのダッシュボードから 「外観」 ⇒ 「カスタマイズ」 ⇒ 「追加CSS」 を開き、一番下に以下のコードを追記します。
【CSS】
⚠️ 注意： 上記コード内の 32 という数字は、先ほどあなたがメモした「連載作品」タグのID番号に必ず書き換えてください。
【解説：これって裏側で何をやっているの？】
WordPressというシステムは、非常に賢く作られています。記事にタグを設定すると、そのページのHTMLの裏側（bodyタグ）に tagid-○○ という目印（クラス名）を自動的に付与してくれます。上記のCSSは、「『連載作品』というタグ（ID:32）が設定されているページを開いた時だけ、強制的にCocoonの関連記事エリア（.related-entries）を画面から消し去りなさい（display: none !important）」 という命令文です。
この仕組みを利用して、見事なコントロールを実現します！
📖 運用ルール：作品タイプ別のタグ設定マニュアル
CSSの準備が整ったら、あとは各記事に「どのタグを付与するか」の組み合わせだけで、自由自在に表示をコントロールできます。以下のマニュアルに従ってタグ付けを行ってください。
| 作品のタイプ | 付与するタグ | どのような挙動になるか？（システム結果） |
| 単独の読み切り小説 | 『小説』のみ | 自身のページにランダムリンクが表示される。 他ページのランダムリンクにも候補として出現する。 |
| 連載形式（第1話） | 『小説』と『連載作品』 | 先ほどのCSSにより自身のページにはランダムリンクが表示されない。 しかし『小説』タグを持つため、他ページのランダムリンクには宣伝として出現する！ |
| 連載形式（途中話） ※第2話～最終話の直前 | 『連載作品』のみ | 自身のページにランダムリンクは表示されない。 『小説』タグを持たないため、他ページの候補にも絶対に出現しない。 |
| 連載形式（最終話） | 『小説』のみ | 自身のページにランダムリンクが表示される。 他ページのランダムリンクにも候補として出現する。 |
【解説：第1話の魔法のトリック】
この設定で最も美しいのは「連載形式の第1話」の挙動です。『小説』と『連載作品』という2つのタグを同時に付けることで、「自分のページの下にはリンクを出さない（次の話へ集中させる）」ことと、「他のページの下にはランダムで表示させる（新しい読者を第1話へ呼び込む）」という、相反する2つの要件を同時に満たしているのです。
🛡️ 仕様の限界について（リスクマネジメント）
さて、ここまで完璧に見えるシステムですが、鋭い方ならお気づきかもしれません。
「あれ？ それだと、連載形式の『最終話』のページが、単独の読み切り小説などの末尾に、ランダムでヒョッコリ表示されることがあるんじゃないの？」
はい、大正解です。非常に素晴らしいシステム的思考をお持ちですね。
現在のCocoonの標準仕様の限界として、この設定を行った場合、「小説ページの末尾のランダムリンクに、連載形式の最終話のページが、ときどき表示されてしまう」という現象が発生します。（※途中の話をすっ飛ばして、最終話だけが宣伝されてしまう状態です）。
これを完全に防ぐには、PHPのコアファイルをいじって複雑な除外ロジックを組む必要がありますが、テーマのアップデート時に不具合を起こす原因になりかねません。
しかし、心配は無用です。ブログの運営を続け、作品数（記事数）が増えていけばいくほど、ランダムの中から「特定の連載の最終話」がピンポイントで引き当てられる確率は徐々に下がっていきます。
リスクマネジメントの世界には**『リスク保有（またはリスク受容）』**という専門用語があります。「致命的ではない小さな不都合は、あえてシステムを複雑にしてまで直さず、運用でカバーしてそのまま受け入れる」という立派な戦略です。今回はこの戦略を採用し、笑顔でスルーしましょう（笑）。
もし、どうしてもランダムリンクの候補にしたくない場合は、最終話に付与するタグを『小説』から『連載作品』に変更してください。その場合、最終話のページにはランダムリンクが表示されなくなりますので、個別に他の小説へのリンクを設定して回遊率を維持しましょう。
🎨 仕上げ編（UI/UXの最終調整）
最後に、読者のためのUI（見た目）を整える重要な設定を行います。
今回の仕組みは、タグの組み合わせによる「裏技（トリック）」です。記事のタイトル下や末尾に「小説」「連載作品」というタグのボタンがずらりと並んでしまっては、読者が「なんでこのページとこのページで付いているタグが違うんだろう？」と混乱してしまいますし、何より裏側のシステム事情が透けて見えてしまい美しくありません。
読者に見せる必要のないシステム制御用のタグは、フロント（画面）からは隠してしまいましょう。
【タグを非表示にする設定】
- 「Cocoon設定」 ⇒ 「投稿」 タブを開きます。
- 下部の「カテゴリー・タグ表示設定」を探します。
- 「カテゴリー・タグ表示」：『カテゴリーのみ』を選択します。
- 「カテゴリー・タグ表示位置」：『本文下（デフォルト）』などを選択して保存します。
これで、読者の目には整理された「カテゴリー（SF、ヒューマンドラマ等）」だけが見えるようになり、裏側で動いている高度なタグ制御のトリックは完全に隠蔽されます。読者に余計なノイズを与えない、プロ仕様のUIの完成です！
📝 ご紹介したカスタマイズ・テクニックのまとめ
お疲れ様でした！今回のコラムで実装したテクニックを要約します。
- Cocoonの関連記事機能を「タグ」基準で設定し、「▼ この物語を読んだあなたへ」というランダムリンクのナビゲーション（エントリーカード）を作成した。
- 「小説」と「コラム」でタグを分けることで、それぞれの世界観を壊さない独立した周遊ルートを確立した。
- WordPressの仕様（タグIDによるCSSクラス付与）を利用し、display: none !important; を使うことで、プラグインなしで特定のページ（連載作品）の関連記事だけを非表示にするシステムを構築した。
- タグの付与ルール（「小説」と「連載作品」の使い分け）を体系化することで、**「第1話は他ページで宣伝するが自身のページにはリンクを出さない」「途中話は一切出さない」「最終話はリンクを出す」という、複雑な導線コントロール（ルーティング）**を実現した。
- 仕様の限界（最終話が表示されるリスク）を正しく評価・受容した上で、読者に見せる必要のないタグを非表示にし、UI/UXを最適化した。
この仕組みを一度構築してしまえば、あとは記事を書くたびにマニュアル通りにタグを設定するだけで、サイトが自動的に「読者を離さない迷路（テーマパーク）」へと進化していきます。
読者の直帰率を下げ、サイトの滞在時間（PV）を劇的に向上させるこのカスタマイズ。
ぜひ、あなたの小説ブログにもデプロイ（導入）してみてください！