100文字以上のレビューテキストを「もっと見る」で表示させるJavaScript

2024年10月11日2024年10月14日

100文字以上のテキストは、「もっと見る」というリンクをクリックすることで表示されるようにしたい。

その理由が、複数のクチコミを羅列するにあたって、短いテキストと長いテキストが混在して見栄えが悪いため、レイアウトを整えたい。

また、長文のテキストはスマホ表示の際、文字量の多さに、離脱するリスクも考えられるので、ユーザーのストレス軽減のためにも、見たい人だけ見れる状態にする。

また、ページ内のユーザーアクションを誘発させることによって、SEO効果も期待。

ソースコード

100文字以上のテキストは「もっと見る」というリンクをクリックで表示
特定のCSSクラス内のテキストに適応
既存のHTMLやCSSは編集せずJavaScriptのみで実装可能
100文字以下のテキストには「もっと見る」リンクは表示させない
ソースコード上は全文読み込まれているので文字量によるSEOの影響なし

<script>
document.addEventListener('DOMContentLoaded', function() {
    // すべてのテキストコンテナを取得
    const textContainers = document.querySelectorAll('.c-balloon__text');

    textContainers.forEach(function(textContainer) {
        const textContent = textContainer.querySelector('p'); // 各コンテナ内の<p>を取得
        
        // 元のテキストを取得
        const originalText = textContent.innerHTML;

        // テキストの長さを確認
        if (originalText.length > 100) {
            // 最初の100文字を取得
            const truncatedText = originalText.substring(0, 100);
            // 最初の100文字を表示し、「もっと見る」リンクを追加
            textContent.innerHTML = truncatedText + '... <a href="#" class="more-link">もっと見る</a>';

            // 「もっと見る」リンクを取得
            const moreLink = textContent.querySelector('.more-link');
            
            moreLink.addEventListener('click', function(event) {
                event.preventDefault();
                textContent.innerHTML = originalText; // 元のテキストを表示
            });
        } else {
            // 100文字以下の場合はそのまま表示
            textContent.innerHTML = originalText; // 変更しない
        }
    });
});
</script>

このJavaScriptコードをHTMLファイルの<body>タグの最後または<head>タグ内の<script>タグ内に追加。

スマホだと、100文字でもまだ長く感じるので、50文字以上に変更しても良いと思う。