ブログ記事の長い文章の途中で「続きを読む」ボタンを設置して表示／非表示する方法

ブログ記事が長くなると、トップページや一覧ページで全文を表示すると見づらくなります。そこで便利なのが「続きを読むボタン」です。この記事では、WordPressで簡単に続きを読むボタンを設置する方法を解説します。

1 方法1：WordPress標準機能を使う

WordPressには標準で「続きを読む」機能があります。

1. 投稿編集画面で本文の途中にカーソルを置く
2. ツールバーの「もっと見る」ボタン（横線に点が3つ）をクリック

これだけで自動的に「続きを読む」リンクが表示されます。

2 方法2：クラシックエディタでボタン風にカスタマイズ

よりデザイン性を高めたい場合は、HTMLとCSSでカスタマイズできます。以下のコードをクラシックエディタに貼り付けてください。

<p><span class="read-more-button">続きを読む</span></p>
<div class="read-more-content" style="display:none;">
  <p>ここに隠したい長文コンテンツを入れます。ユーザーが「続きを読む」をクリックすると表示されます。</p>
</div>

2.1 設置例

3 function.php にコードを追加

//---------------------------------------------
// 「続きを読む」ボタンのJSの読み込み
//---------------------------------------------
function enqueue_read_more_script() {
    wp_enqueue_script(
        'read-more',
        get_stylesheet_directory_uri() . '/js/read-more.js',
        array(),
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_read_more_script');

4 javascript にコードを追加

ファイル名：read-more.js
保存先：wp-content/themes/child-theme/js/read-more.js

//-------------------------------------------
// 続きを読むボタンで表示／非表示
//-------------------------------------------
document.addEventListener('DOMContentLoaded', function() {
  const buttons = document.querySelectorAll('.read-more-button');
  buttons.forEach(function(btn) {
    btn.addEventListener('click', function() {
      const content = btn.parentElement.nextElementSibling;
      if (content.style.display === "none") {
        content.style.display = "block";
        btn.textContent = "閉じる";
      } else {
        content.style.display = "none";
        btn.textContent = "続きを読む";
      }
    });
  });
});

4.1 ディレクトリ構造

5 汎用CSS

/* -----------------------------
 * 続きを読むボタンを設置
----------------------------- */

.read-more-button { /* ボタン全体のスタイルを指定 */
  display: inline-block; /* インライン要素として表示しつつ、幅・高さを設定可能にする */
  padding: 6px 12px; /* 上下6px、左右12pxの余白を設定 */
  background-color: #0073aa; /* ボタンの背景色をブルーに設定 */
  color: #fff; /* ボタン文字色を白に設定 */
  border-radius: 3px; /* ボタンの角を3px丸める */
  cursor: pointer; /* ホバー時にマウスカーソルをポインターにする */
  text-decoration: none; /* リンクの下線を消す */
}

.read-more-button:hover { /* ホバー時のボタンスタイル */
  background-color: #005177; /* ホバー時の背景色を濃いブルーに変更 */
}

6 ポイント

• クラシックエディタに直接貼り付け可能
• JavaScriptでクリック時に表示／非表示を切り替え可能

7 完成イメージ

続きを読む

8 まとめ

「続きを読むボタン」を設置することで、記事一覧が見やすくなり、ユーザーの離脱率を下げることができます。標準機能でも十分ですが、デザインにこだわる場合はHTML、CSS、JavaScriptを組み合わせてカスタマイズしましょう。