WordPressでブログやWebサイトを運営する際、トップページや記事一覧ページの見栄えを整えることは非常に重要です。
記事の全文が一覧に表示されてしまうと、ユーザーが目的の記事を探すために長いスクロールを強いられ、利脱率が高まる原因となります。
そこで活用したいのが、記事の途中で文章を区切り「続きを読む」というリンクを表示させるmoreタグの機能です。
2026年現在のWordPress環境においても、このmoreタグはコンテンツの読みやすさを制御するための基本かつ強力なツールとして健在です。
本記事では、初心者の方でも迷わずにmoreタグを使いこなし、さらにサイトのデザインに合わせてカスタマイズする方法を詳しく解説します。
moreタグとは？記事一覧をスッキリさせる仕組み
moreタグとは、投稿編集画面で挿入できる特殊なコードであり、記事の「概要」と「詳細」を分ける境界線の役割を果たします。
このタグを挿入した箇所で文章が一時的に途切れて、フロントエンド（公開画面）では「続きを読む」や「Read More」といったボタンやテキストリンクが表示されます。
WordPressの多くのテーマでは、トップページやカテゴリーページで記事を表示する際、このmoreタグまでの内容を「リード文」として抽出するように設計されています。
これにより、ユーザーは記事の冒頭部分だけを読み、興味があれば詳細ページへ移動するというスムーズな体験が可能になります。
moreタグは、HTMLソースコード上では<!--more-->という形式で記述されますが、ビジュアルエディタを使えばコードを意識せずに挿入できます。
ブロックエディタ（Gutenberg）で「続きを読む」を挿入する方法
現在のWordPressの標準であるブロックエディタでは、専用の「続き」ブロックを使用することで簡単にmoreタグを設置できます。
「続き」ブロックの追加手順
まず、記事の編集画面を開き、文章の区切りにしたい場所で新しいブロックを追加します。
ブロック選択画面の検索窓に「続き」または「more」と入力すると、専用のアイコンが表示されます。
この「続き」ブロックを選択すると、編集画面上に水平線とともに「READ MORE」というラベルが表示されます。
これが記事一覧ページでの区切り位置となり、これ以降の文章は詳細ページのみで表示されるようになります。
設定パネルでのオプション確認
「続き」ブロックを選択した状態で右側の設定サイドバーを確認すると、いくつかのオプション設定が可能です。
例えば、「フルコンテンツを表示しているページではティーザーを隠す」という設定項目があります。
これにチェックを入れると、個別記事ページ（シングルページ）を表示した際に、moreタグより前の文章（ティーザー）を非表示にすることができます。
通常はチェックを外したままにして、記事の冒頭から全文が読めるようにしておくのが一般的です。
クラシックエディタでmoreタグを使用する場合
旧来のクラシックエディタを愛用している場合や、特定のカスタム投稿タイプでクラシックエディタを有効にしている場合も、操作は非常にシンプルです。
エディタのツールバーにある「『続きを読む』タグを挿入」というアイコンをクリックするだけで完了します。
アイコンは、紙が上下に分かれているようなデザインをしており、マウスホバーすると説明が表示されます。
テキストモードで編集している場合は、任意の場所に直接<!--more-->と入力することでも同様の効果が得られます。
「続きを読む」のテキストを自由にカスタマイズする方法
デフォルトの「続きを読む」という文言を、サイトの雰囲気に合わせて「続きをチェックする」や「もっと読む」に変更したい場合があるでしょう。
ここでは、代表的な2つのカスタマイズ手法を紹介します。
1. テンプレートファイル（PHP）を直接編集する
テーマのテンプレート内で記事を出力する際、the_content()関数が使われています。
この関数の引数にテキストを指定することで、moreリンクの文言を変更することが可能です。
<?php
// index.phpやarchive.phpなどのループ内で記述
the_content('もっと詳しく見る »');
?>このように記述すると、表示されるテキストが「もっと詳しく見る »」へと切り替わります。
2. functions.phpを使用して一括変更する
テーマ全体で一貫して文言を変更したい場合は、functions.phpにフィルターフックを追加する方法が最も効率的です。
以下のコードを子テーマのfunctions.phpに追記してください。
/**
* 「続きを読む」のテキストをカスタマイズする
*/
function custom_read_more_link() {
// リンクのテキストを自由に変更できます
return '<a class="more-link" href="' . get_permalink() . '">この記事の続きを読む</a>';
}
add_filter('the_content_more_link', 'custom_read_more_link');この方法であれば、個別のテンプレートファイルを修正する手間が省け、サイト全体のリンクテキストを一括で管理できます。
CSSで「続きを読む」をボタン形式にデザインする
デフォルトの状態では単なるテキストリンクとして表示されることが多いですが、CSSを加えることで目立つボタン風のデザインに変更できます。
ユーザーがクリックしやすいように、色や余白を調整してみましょう。
/* 「続きを読む」リンクのボタン装飾 */
.more-link {
display: inline-block;
margin-top: 20px;
padding: 10px 25px;
background-color: #cf2e2e; /* ブランドカラー等に合わせる */
color: #fff !important;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s ease;
}
/* ホバー時の挙動 */
.more-link:hover {
background-color: #a02424;
text-decoration: none;
}HTMLのクラス名はテーマによって異なる場合がありますが、多くの場合は.more-linkというクラスが付与されています。
もしクラス名が異なる場合は、ブラウザのデベロッパーツール（検証機能）を使ってクラス名を確認し、CSSを適用してください。
moreタグと「抜粋（Excerpt）」の違いを正しく理解する
WordPressには、moreタグと似た機能として「抜粋」があります。
これらには明確な違いがあるため、用途に応じて使い分けることが重要です。
| 機能名 | 特徴 | 適したケース |
|---|---|---|
| moreタグ | 本文中の好きな場所で区切れる。画像なども含められる。 | 記事の冒頭（導入文）をそのまま一覧で見せたい場合。 |
| 抜粋（Excerpt） | 本文とは別に用意した「要約」を表示する。通常はテキストのみ。 | 一覧用に専用の短い紹介文を書きたい場合。 |
moreタグは、記事本文の一部を表示するため、執筆中に手軽に設定できるというメリットがあります。
一方で抜粋は、一覧ページ専用の文章を作成できるため、よりSEOを意識した要約を提示したい場合に有効です。
最近のテーマでは、moreタグよりも「抜粋」を優先して表示する仕様のものも増えています。
moreタグを入れても反映されない場合は、使用しているテーマが「全文表示（the_content）」ではなく「抜粋表示（the_excerpt）」を採用している可能性が高いです。
moreタグが表示されない・動かない時のチェックリスト
設定したはずのmoreタグが反映されない時は、以下のポイントを確認してください。
まず、現在表示しているページが「投稿の個別ページ」ではないか確認してください。
moreタグは仕様上、単一の記事ページでは動作せず、アーカイブページやホームページでのみ機能します。
次に、テーマのテンプレートファイルを確認しましょう。
テンプレート内でthe_excerpt()が使われている場合、WordPressはmoreタグを無視して自動的に文章をカットし、末尾に「[…]」を表示します。
moreタグを有効にしたい場合は、その箇所のコードをthe_content()に書き換える必要があります。
また、トップページを「固定ページ」に設定している場合、デフォルトではmoreタグが機能しないというWordPressの仕様が存在します。
この問題を解決するには、グローバル変数の$moreを一時的に調整するコードをテンプレートに記述する必要があります。
<?php
// 固定ページでmoreタグを強制的に有効にする
global $more;
$more = 0;
the_content('続きを読む');
?>このように、固定ページをフロントページにしている環境では、少し工夫が必要になることを覚えておきましょう。
SEOとユーザビリティの観点から見たmoreタグの重要性
moreタグを適切に使用することは、SEO（検索エンジン最適化）の観点からも間接的なメリットがあります。
一覧ページに全文を掲載してしまうと、複数のページで同じ内容が重複することになり、検索エンジンから「重複コンテンツ」と見なされるリスクがわずかに生じます。
moreタグで適切にコンテンツを区切ることで、各アーカイブページを軽量化し、インデックスを整理することができます。
また、ページの読み込み速度（PageSpeed）の向上にも寄与します。
大量の画像が含まれる記事が並ぶ一覧ページでは、全文表示は非常に重くなります。
moreタグで画像を記事詳細に押し下げることで、一覧ページの転送量を減らし、モバイルユーザーにとって快適なブラウジング環境を提供できます。
ユーザーが迷うことなく次のアクション（記事を読む）を起こせるような導線作りは、サイト全体の回遊率アップに繋がります。
まとめ
WordPressのmoreタグは、記事一覧ページのデザインを整え、読者の利便性を向上させるために欠かせない機能です。
ブロックエディタの「続き」ブロックを使えば、専門知識がなくても一瞬で設置でき、サイトの更新作業がスムーズになります。
さらにこだわりたい方は、PHPやCSSをカスタマイズして、自分のサイトに最適な「続きを読む」ボタンを作成してみてください。
moreタグと抜粋の性質を正しく理解し、テーマの仕様に合わせて使い分けることが、プロフェッショナルなサイト運営への第一歩です。
今回の内容を参考に、あなたのWordPressサイトの記事一覧をより魅力的で使いやすいものに改善していきましょう。