【ページ送りナビゲーター】カスタムHTML版のソースコード

ソースコード
2026.07.09

バージョン1：最初に作ったもの

戻る

カスタムHTML用コード

<!-- ===================================================
  1. HTML部分：ページ送りナビゲーターの骨組み
=================================================== -->
<div class="simple-page-nav-wrapper">

  <!-- 前の記事へ -->
  <a href="前の記事のURLがここに入ります" class="simple-page-nav nav-prev">
    <span class="nav-label">PREV</span>
    <div class="nav-container">
      <div class="nav-thumb">
        <img src="アイキャッチ画像のURLがここに入ります" alt="前の記事">
      </div>
      <div class="nav-title">前の記事のタイトルがここに入ります</div>
    </div>
  </a>

  <!-- 次の記事へ -->
  <a href="次の記事のURLがここに入ります" class="simple-page-nav nav-next">
    <span class="nav-label">NEXT</span>
    <div class="nav-container">
      <div class="nav-title">次の記事のタイトルがここに入ります</div>
      <div class="nav-thumb">
        <img src="アイキャッチ画像のURLがここに入ります" alt="次の記事">
      </div>
    </div>
  </a>

</div>

<!-- ===================================================
  2. CSS部分：デザイン（カスタムHTML用に<style>タグで囲んでいます）
=================================================== -->
<style>
/* シンプルな横並びの設定 */
.simple-page-nav-wrapper {
  display: flex;
  gap: 15px;
  margin: 25px 0;
  width: 100%;
}

/* Cocoonの標準的なブログカードを意識した、白背景＋グレーの枠線 */
.simple-page-nav {
  flex: 1;
  display: block;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 15px;
  text-decoration: none !important;
  color: #333 !important;
  background-color: #ffffff;
  transition: background-color 0.2s ease;
}

/* ホバー時はシンプルに背景を少し暗くするだけ */
.simple-page-nav:hover {
  background-color: #f8fafc;
}

/* シンプルなラベル設定 */
.simple-page-nav .nav-label {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  color: #64748b; /* 標準的なグレー */
  margin-bottom: 5px;
}

/* レイアウトの基本 */
.nav-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* サムネイル */
.simple-page-nav .nav-thumb {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
}
.simple-page-nav .nav-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* タイトル */
.simple-page-nav .nav-title {
  flex-grow: 1;
  font-size: 14px;
}

/* スマホ対応（縦並びにするだけ） */
@media screen and (max-width: 768px) {
  .simple-page-nav-wrapper {
    flex-direction: column;
  }
}
</style>

バージョン2：スキン「カラフルライン」対応版

戻る

カスタムHTML用コード

<!-- ===================================================
  1. HTML部分：ページ送りナビゲーターの骨組み
=================================================== -->
<div class="custom-page-nav-wrapper">

  <!-- 前の記事へ（PREV） -->
  <a href="前の記事のURLがここに入ります" class="custom-page-nav nav-prev">
    <span class="nav-label">PREV</span>
    <div class="nav-container">
      <div class="nav-thumb">
        <!-- アイキャッチ画像（50x50） -->
        <img src="アイキャッチ画像のURLがここに入ります" alt="前の記事の画像">
      </div>
      <div class="nav-title">ここに前の記事のタイトルが最大3行まで入ります。</div>
    </div>
  </a>

  <!-- 次の記事へ（NEXT） -->
  <a href="次の記事のURLがここに入ります" class="custom-page-nav nav-next">
    <span class="nav-label">NEXT</span>
    <div class="nav-container">
      <div class="nav-thumb">
        <!-- アイキャッチ画像（50x50） -->
        <img src="アイキャッチ画像のURLがここに入ります" alt="次の記事の画像">
      </div>
      <div class="nav-title">ここに次の記事のタイトルが入ります。</div>
    </div>
  </a>

</div>

<!-- ===================================================
  2. CSS部分：デザイン（カスタムHTML用に<style>タグで囲んでいます）
=================================================== -->
<style>
/* 2カラム用の外枠コンテナ */
.custom-page-nav-wrapper {
  display: flex;
  gap: 20px;
  margin: 30px 0;
  width: 100%;
}

/* ページ送りボタン全体の共通設定 */
.custom-page-nav {
  flex: 1; 
  /* 片方だけになった場合でも、最大で横幅の半分に制限 */
  max-width: calc(50% - 10px); 
  display: block;
  position: relative;
  border: 1px solid rgba(85, 85, 85, 0.15); 
  border-radius: 6px;
  padding: 22px 15px 15px; /* ラベルの余白を考慮 */
  text-decoration: none !important;
  color: #333 !important;
  /* 【背景色】カラフルラインに合わせた爽やかなライトグリーン */
  background-color: rgba(220, 245, 222, 0.75);
  backdrop-filter: blur(2px); 
  transition: all 0.3s ease;
}

/* マウスホバー時のエフェクト */
.custom-page-nav:hover {
  background-color: rgba(200, 240, 203, 0.95);
  border-color: #555555;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px); /* フワッと少し浮き上がる演出 */
}

/* ブログカード風ラベルの共通設定 */
.custom-page-nav .nav-label {
  position: absolute;
  top: -10px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  padding: 3px 9px;
  border-radius: 4px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* Cocoon標準のブログカードに合わせたダークグレー */
  background-color: #555555;
}

/* PREV / NEXT の個別配置設定 */
.nav-prev .nav-label { left: 15px; }
.nav-next .nav-label { right: 15px; }

/* 「前の記事（PREV）」が非表示のとき、「次の記事（NEXT）」を右寄せにする */
.nav-next:first-child, 
.nav-prev + .nav-next:last-child {
  margin-left: auto;
}

/* 内包要素のレイアウト（サムネイルとタイトルの並び） */
.nav-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* サムネイル画像の縮小設定（正方形 50px） */
.custom-page-nav .nav-thumb {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
}
.custom-page-nav .nav-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: 4px;
}

/* 記事タイトルと矢印 */
.custom-page-nav .nav-title {
  flex-grow: 1;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* タイトルを最大3行まで表示 */
  -webkit-box-orient: vertical;
}

/* 矢印マーカーの共通カラー設定 */
.nav-prev .nav-title::before,
.nav-next .nav-title::after {
  color: #555555; 
}

/* 前の記事へ（左矢印） */
.nav-prev .nav-title { padding-left: 18px; }
.nav-prev .nav-title::before {
  content: "< ";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

/* 次の記事へ（右矢印） */
.nav-next .nav-title { padding-right: 18px; text-align: right; }
.nav-next .nav-title::after {
  content: " >";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}

/* スマートフォン（画面幅768px以下）用のレスポンシブ設定 */
@media screen and (max-width: 768px) {
  .custom-page-nav-wrapper {
    flex-direction: column; 
    gap: 15px;
  }
  .custom-page-nav {
    max-width: 100%;
    margin-left: 0 !important; /* スマホ時は右寄せを解除 */
  }
}
</style>

バージョン3：訪問済み対応版

戻る

「訪問済み対応版」はバージョン２をベースとしてCSSに以下を追加することで対応できました。

CSSコード

/* ===================================================
 * 【追加機能】一度クリックした（訪問済み）リンクの設定
 * =================================================== */
.custom-page-nav:visited {
  /* 【背景色】クリック後は落ち着いたライトグレーに変化 */
  background-color: rgba(235, 235, 235, 0.8) !important;
  /* 枠線の色も少し馴染むグレーに */
  border-color: rgba(85, 85, 85, 0.1) !important;
}

/* 訪問済みカードにマウスを乗せた時のエフェクト（未訪問時より少し控えめに） */
.custom-page-nav:visited:hover {
  background-color: rgba(220, 220, 220, 0.95) !important;
  border-color: #777777 !important;
}

動作確認

動作環境

ブログ「くもり のち 快晴」と「やすりとのり」で動作確認を行いました。動作環境は以下です。

  • レンタルサーバー：ConoHaWing
  • WordPressのバージョン：7.0-ja
  • テーマ：Cocoon Child バージョン 1.1.2
  • スキン：カラフルライン

「くもり のち 快晴」と「やすりとのり」では問題は発生しませんでしたが、それ以外の環境では動作確認を行っていません。動作を試す場合は各自の責任で実施してください。

試し方

以下の手順で「ページ送りナビゲーター」をWordPressの記事に配置してください。

  1. テキストエディタを起動する。
  2. ソースコードをコピーしてテキストエディタ―の編集画面にペーストする。
  3. ペーストしたソースコード内の「前回の記事」、「続きの記事」へのURL、それぞれのアイキャッチ画像へのURLを実際のものに置き換える。
  4. ソースコード内の「前回の記事」、「続きの記事」のタイトルを実際のものに置き換える。
  5. ブログの記事内に「カスタムHTML」を配置する。
  6. 「HTMLを編集」ボタンをクリックする。（編集画面が開く。）
  7. テキストエディタ―で編集したソースコードの全文をコピーし、カスタムHTMLの編集画面にペーストする。
  8. 「更新」ボタンをクリックする。
  9. 記事を公開、または下書保存する。
  10. プレビューを表示する。

ソースコードのコピーについてですが、バージョン１，バージョン２を試す場合はそれぞれの全文をコピーしてください。

バージョン３を試す場合はバージョン２をコピー、ペーストした後、バージョン３のCSSをコピーして「/* マウスホバー時のエフェクト */」と書かれた部分の前にペーストしてください。

戻る

コメント