「もっと見る」ボタンの実装方法｜HTML・CSS・JavaScript・WordPressでシンプルに実装【2026年リライト】

「もっと見る」ボタンとは、一覧に表示するコンテンツを最初からすべて表示せず、ユーザーがボタンをクリックしたタイミングで追加表示するUIです。

例えば、10件のニュースがある場合、

• 最初に3件を表示
• 「もっと見る」をクリック
• さらに3件を表示
• もう一度クリック
• さらに3件を表示
• 最後の1件を表示したらボタンを非表示

といった動きを実現できます。

ブログ記事一覧やニュース一覧だけでなく、

• 商品一覧
• 実績一覧
• スタッフ一覧
• 画像ギャラリー
• ポートフォリオ
• キャラクター一覧
• FAQ
• イベント情報

など、さまざまなコンテンツに利用できます。

「もっと見る」を導入する大きなメリットは、一覧ページをコンパクトに整理できることです。

ページの縦長化を抑えられる

コンテンツが数十件、数百件ある場合、すべてを最初から表示するとページが非常に長くなります。

最初に必要な件数だけを表示しておけば、ユーザーが目的のコンテンツを探しやすくなります。

ユーザー自身が追加表示できる

自動的に大量のコンテンツを読み込むのではなく、ユーザーが「もっと見たい」と思ったタイミングで追加表示できます。

そのため、ユーザーの操作に合わせた自然なUIを作ることができます。

スマートフォンとの相性が良い

スマートフォンでは、PCよりも縦方向のスクロールが長く感じられます。

ニュースや商品などを一定数ずつ表示することで、スクロール量を抑えながらコンテンツを整理できます。

「もっと見る」は、WordPressを使っていないWebサイトでも実装できます。

基本的な仕組みは非常にシンプルです。

HTMLでコンテンツを用意し、CSSで非表示にし、JavaScriptでクリックされた項目を表示するという構成です。

今回は、最初に3件表示し、ボタンをクリックするたびに3件ずつ追加表示するサンプルを作ります。

HTML

まずは表示するコンテンツをHTMLで用意します。

<ul class="news-list">
  <li class="news-item">ニュース1</li>
  <li class="news-item">ニュース2</li>
  <li class="news-item">ニュース3</li>
  <li class="news-item">ニュース4</li>
  <li class="news-item">ニュース5</li>
  <li class="news-item">ニュース6</li>
  <li class="news-item">ニュース7</li>
  <li class="news-item">ニュース8</li>
  <li class="news-item">ニュース9</li>
</ul>

<button type="button" class="more-button">
  もっと見る
</button>

ここでは9件のニュースを用意しています。

実際のWebサイトでは、ニュースタイトルや画像、リンクなどを入れて使用します。

CSS

次に、最初に表示しないコンテンツを非表示にします。

.news-item.is-hidden {
  display: none;
}

.more-button {
  display: block;
  margin: 30px auto 0;
  padding: 10px 30px;
  cursor: pointer;
}

JavaScriptによって表示対象となった要素からis-hiddenというクラスを削除することで、コンテンツを表示できるようにします。

JavaScript

最後にJavaScriptを追加します。

document.addEventListener('DOMContentLoaded', function () {

  const items = document.querySelectorAll('.news-item');
  const button = document.querySelector('.more-button');

  const initialCount = 3;
  const addCount = 3;

  let visibleCount = initialCount;

  // 最初に表示する件数以外を非表示
  items.forEach((item, index) => {
    if (index >= initialCount) {
      item.classList.add('is-hidden');
    }
  });

  // 最初からすべて表示できる場合はボタンを非表示
  if (items.length <= initialCount) {
    button.style.display = 'none';
  }

  button.addEventListener('click', function () {

    const hiddenItems = document.querySelectorAll(
      '.news-item.is-hidden'
    );

    // 3件ずつ表示
    for (
      let i = 0;
      i < addCount && i < hiddenItems.length;
      i++
    ) {
      hiddenItems[i].classList.remove('is-hidden');
    }

    visibleCount += addCount;

    // すべて表示したらボタンを非表示
    if (visibleCount >= items.length) {
      button.style.display = 'none';
    }

  });

});

このコードでは、querySelectorAll()で指定したCSSセレクターに一致する要素を取得しています。querySelectorAll()は複数の要素を取得できる標準的なWeb APIです。

また、ボタンのクリック処理にはaddEventListener()を使用しています。

JavaScriptの仕組み

今回の処理を簡単に説明すると、以下の流れです。

① 最初に3件だけ表示

const initialCount = 3;

この数字を変更すれば、最初に表示する件数を変更できます。

例えば、

const initialCount = 6;

とすれば、最初に6件表示できます。

② クリックするたびに3件追加

const addCount = 3;

ここを変更すれば、一度に追加する件数を変更できます。

const addCount = 6;

とすれば、6件ずつ追加表示できます。

③ すべて表示したらボタンを消す

if (visibleCount >= items.length) {
  button.style.display = 'none';
}

最後まで表示された場合、「もっと見る」ボタン自体を非表示にしています。

CSSアニメーションを追加したい場合

追加されたコンテンツを突然表示するのではなく、フェードインさせることもできます。

例えば、以下のようなCSSを追加します。

.news-item {
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

これによって、追加されたコンテンツが少し下から浮かび上がるような表示になります。

ただし、アニメーションは過剰に使用するとユーザーの負担になる場合もあるため、Webサイト全体のデザインに合わせて調整することが重要です。

WordPressの場合も基本的な考え方は同じです。

違いは、HTMLに直接コンテンツを書くのではなく、PHPを使ってWordPressの記事やカスタムフィールドなどからコンテンツを取得する点です。

例えば、WordPressのカスタムフィールドから画像一覧を取得する場合、以下のような構造にできます。

<?php
$post_id = 14;

$field_images = get_post_meta(
  $post_id,
  'custom-field',
  true
);

if (!empty($field_images) && is_array($field_images)) :
?>

<ul class="img-wrap">

<?php foreach ($field_images as $i => $url) : ?>

  <li
    class="img-item"
    <?php echo $i >= 6 ? 'style="display:none;"' : ''; ?>
  >
    <img
      src="<?php echo esc_url($url); ?>"
      loading="lazy"
      alt="画像"
    >
  </li>

<?php endforeach; ?>

</ul>

<?php if (count($field_images) > 6) : ?>

<button
  type="button"
  id="load-more-btn"
  class="load-more-button"
>
  もっと見る
</button>

<?php endif; ?>

<?php endif; ?>

この例では、最初の6件を表示し、7件目以降を非表示にしています。

WordPressでは、PHP側で記事やカスタムフィールドなどのデータを取得し、それをHTMLとして出力します。

その後の「何件ずつ表示するか」という制御はJavaScriptに任せることができます。

WordPressでJavaScriptを使う場合、「jQueryを使わなければならない」と考える必要はありません。

今回のような単純な「もっと見る」であれば、通常のJavaScriptだけで実装できます。

そのため、

• WordPress
• PHP
• HTML
• CSS
• JavaScript

という構成だけでも十分に実現できます。

外部ライブラリや専用プラグインを追加せずに済むため、サイトの構成をシンプルに保ちたい場合にも適しています。

1ページの中に、

• ニュース一覧
• 実績一覧
• 商品一覧

など、複数の「もっと見る」を設置したい場合があります。

その場合は、JavaScriptをそれぞれ個別に書くのではなく、共通の処理として関数化する方法があります。

例えば、

function setupLoadMore(itemsSelector, buttonSelector, step = 6) {

  const items = document.querySelectorAll(itemsSelector);
  const button = document.querySelector(buttonSelector);

  let current = step;

  items.forEach((item, index) => {
    if (index >= step) {
      item.style.display = 'none';
    }
  });

  if (!button || items.length <= step) {
    if (button) {
      button.style.display = 'none';
    }
    return;
  }

  button.addEventListener('click', function () {

    for (
      let i = current;
      i < current + step && i < items.length;
      i++
    ) {
      items[i].style.display = '';
    }

    current += step;

    if (current >= items.length) {
      button.style.display = 'none';
    }

  });
}

そして、それぞれの一覧に対して、

setupLoadMore('.news-item', '#news-more', 6);
setupLoadMore('.work-item', '#work-more', 4);

のように設定できます。

このように処理を関数化しておくことで、同じ仕組みを複数の場所で再利用できます。

ここで重要なのが、「もっと見る」＝ページの読み込みが速くなる、とは限らないという点です。

例えば100件の記事がある場合、

<li class="item">記事1</li>
<li class="item">記事2</li>
...
<li class="item">記事100</li>

というHTMLを最初からすべて読み込んで、CSSやJavaScriptによって非表示にしているだけなら、100件分のHTML自体はページに存在しています。

つまり、「画面上では10件しか見えていない」からといって、必ずしも読み込むデータ量が10件分になるわけではありません。

大量データならAjaxやAPIも検討する

大量のコンテンツを扱う場合は、最初からすべてのデータをHTMLとして出力するのではなく、

「もっと見る」をクリックしたら、サーバーから追加データを取得する

という方法もあります。

例えば、

1. 最初に10件取得
2. 「もっと見る」をクリック
3. AjaxやAPIで次の10件を取得
4. HTMLに追加
5. さらにクリック
6. 次の10件を取得

という仕組みです。

この方法なら、コンテンツ量が非常に多いサイトでも効率的にデータを扱えます。

ただし、AjaxやAPIを使うと実装の複雑さも増えるため、すべてのサイトに必要というわけではありません。

数十件程度ならシンプルなJavaScript方式、大量データならAPIなどを利用する方式

というように、コンテンツ量やサイト構成に応じて選択することが重要です。

一覧ページでコンテンツを整理する方法には、「もっと見る」以外にもいくつかあります。

もっと見る

ユーザーがボタンをクリックしたときだけ追加表示します。

「必要な人だけ続きを見る」という考え方に向いています。

ページネーション

1ページあたりの表示件数を決め、2ページ目、3ページ目というようにページを分けます。

大量のコンテンツを整理しやすく、ページ単位でURLを持たせたい場合にも向いています。

無限スクロール

ページを下までスクロールすると、自動的に次のコンテンツが読み込まれます。

SNSのタイムラインや画像一覧など、連続してコンテンツを閲覧するサイトと相性が良い方法です。

「もっと見る」「ページネーション」「無限スクロール」のどれが正解というわけではありません。

例えば、

ニュースや実績一覧 → 「もっと見る」

数百〜数千件の検索結果 → ページネーション

SNSのように次々とコンテンツを見る → 無限スクロール

というように、ユーザーがどのようにコンテンツを見るのかを考えて選択することが大切です。

1. ボタンは「リンク」ではなく「button」を使う

ページ遷移を目的としない操作の場合、HTMLでは<button>を使うのが適しています。

<button type="button">
  もっと見る
</button>

見た目だけでなく、HTMLの意味に合わせたマークアップを行うことが重要です。

2. スマートフォンでの操作性を確認する

PCでは問題なくクリックできても、スマートフォンではボタンが小さすぎたり、周囲の要素と近すぎたりする場合があります。

特に、

• ボタンのサイズ
• 文字サイズ
• 上下の余白
• タップしやすさ

などを確認しましょう。

3. すべて表示したらボタンを消す

コンテンツがすべて表示されたにもかかわらず、「もっと見る」ボタンが残っていると、ユーザーは「まだ何かあるのでは？」と感じてしまいます。

最後のコンテンツまで表示したら、ボタンを非表示にする処理を入れておくと自然です。

4. JavaScriptだけに依存しすぎない

「もっと見る」をJavaScriptだけで制御する場合、JavaScriptが正常に動作しなかったときのことも考えておく必要があります。

特にSEOやアクセシビリティが重要なページでは、

• HTML上のコンテンツ構造
• 適切な見出し
• リンク構造
• キーボード操作

などにも配慮しましょう。

「もっと見る」は、さまざまなWebサイトで利用できます。

ゲーム・エンタメサイト

• 最新ニュース
• イベント情報
• キャラクター一覧
• 商品情報
• メディア掲載情報

コーポレートサイト

• お知らせ
• 実績紹介
• 採用情報
• ブログ

ECサイト

• 商品一覧
• 関連商品
• レビュー

ポートフォリオサイト

• 制作実績
• 作品一覧
• 写真・イラスト

特にコンテンツが継続的に追加されるWebサイトでは、「もっと見る」を導入することで一覧ページを整理しやすくなります。

「もっと見る」ボタンはWordPressでしか使えませんか？

いいえ。

HTML・CSS・JavaScriptだけでも実装できます。

WordPressの場合は、PHPで取得した記事やカスタムフィールドなどのデータをHTMLとして出力し、その後の表示制御をJavaScriptで行う方法が一般的です。

jQueryは必要ですか？

必須ではありません。

今回紹介したような基本的な「もっと見る」であれば、JavaScriptだけで実装できます。

そのため、jQueryなどの外部ライブラリを追加せずに実装することも可能です。

「もっと見る」にするとページの表示速度は速くなりますか？

必ずしも速くなるわけではありません。

すべてのコンテンツを最初からHTMLに出力し、CSSやJavaScriptで一部を非表示にしているだけの場合、コンテンツ自体は最初から読み込まれています。

表示速度や通信量を改善したい場合は、AjaxやAPIなどを利用して必要なデータだけを取得する方法も検討しましょう。

100件や1000件のデータにも使えますか？

実装自体は可能です。

ただし、すべてのデータを最初に読み込む方式では、コンテンツ量が増えるほどHTMLや画像などのデータ量も大きくなります。

大量データを扱う場合は、AjaxやAPI、ページネーションなどを組み合わせる方法がおすすめです。

「もっと見る」と無限スクロールはどちらがおすすめですか？

Webサイトの目的によって異なります。

ユーザーが自分のタイミングで追加表示したい場合は「もっと見る」、SNSのように連続してコンテンツを見る場合は無限スクロールが適しています。

「もっと見る」ボタンを押したら「閉じる」に変更できますか？

可能です。

JavaScriptで表示状態を管理すれば、「もっと見る」と「閉じる」を切り替えることができます。

ただし、追加表示したコンテンツを閉じる必要が本当にあるのかは、ユーザー体験を考えて判断することが大切です。

「もっと見る」はSEOに悪影響がありますか？

「もっと見る」というUI自体がSEOに悪いわけではありません。

ただし、検索エンジンに認識してほしい重要なコンテンツをJavaScriptによる動的取得だけに依存させる場合などは、実装方法を慎重に検討する必要があります。

SEOが重要な一覧ページでは、HTMLとして適切なコンテンツ構造を用意することや、ページネーションなど別の方式も含めて検討するとよいでしょう。

「もっと見る」ボタンは、ニュース、ブログ、商品、実績、画像など、さまざまな一覧コンテンツを整理するために利用できる便利なUIです。

実装方法も難しくありません。

基本的には、

HTML → 表示するコンテンツを用意する

CSS → 最初に表示しないコンテンツを非表示にする

JavaScript → ボタンのクリックに応じて追加表示する

という構成で実装できます。

WordPressの場合も考え方は同じで、PHPによってWordPressの記事やカスタムフィールドなどからコンテンツを取得し、HTMLとして出力した後、JavaScriptで表示件数を制御できます。

また、コンテンツが非常に多い場合には、AjaxやAPIを利用した追加読み込み、ページネーション、無限スクロールなど、別の方法を検討することも重要です。

大切なのは、単純に「もっと見る」を導入することではありません。

コンテンツの量、ユーザーの閲覧方法、ページの目的、表示速度、SEO、スマートフォンでの操作性などを考慮して、最適な表示方法を選択することが重要です。

Webサイトの構成やコンテンツ量に合わせて適切な実装方法を選ぶことで、ユーザーにとって使いやすく、運用しやすいWebサイトを構築できます。

夢双では、HTML・CSS・JavaScriptによるフロントエンド実装から、WordPressなどのCMS構築まで、Webサイトの目的や運用方法に合わせたサイト制作を行っています。

夢双合同会社では、

• ゲーム公式サイト制作
• Steam向けLP制作
• インディーゲームサイト制作
• リッチアニメーション実装
• SEO/AIOを意識した構成設計
• SNS連動型Web制作

など、ゲーム業界向けのWeb制作を行っています。

RPG・FPS・ノベルゲーム・アクションなど、ジャンルごとの世界観に合わせたデザイン・演出設計にも対応しています。

新作タイトルのプロモーションサイト制作や、既存サイトの見直しについてお悩みの方は、お気軽にご相談ください。

企画段階からのご相談にも対応しており、「何から考えればいいか分からない」といった状態でも問題ありません。

内容を整理しながら、最適なサイトの方向性をご提案いたします。

実際にご相談いただくケースでも、「まだ具体的な要件が固まっていない」という段階からスタートすることがほとんどです。

そのため、初期の方向性整理から伴走する形でサポートしています。

制作実績 → https://6sou.site/works.php

壁打ち相談はこちら → https://6sou.site/free_consult.php