100文字以上のレビューテキストを「もっと見る」で表示させるJavaScript
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文字以上に変更しても良いと思う。
テーマのHTMLを編集せずに実装できる
JavaScriptのみで実装可能にした理由は、使用しているWordPressテーマ「SWELL」の「吹き出し」というブロックを使用していたため。HTML編集を行ったら「ブロックのリカバリーを試行」となり、実装できなかった。
また、すでに複数の記事が完成しており、各記事を修正するのが手間だった。
以上のことから、JavaScriptを1つ追加するだけで簡単に済むようにしたかった。