「続きを読む」リンクの自動表示：readmore.jsを使った指定高さのコンテンツ制御方法｜DAD UNION

ウェブページのデザインやUXを考慮する際、特定の高さを超えたコンテンツを折りたたむ「続きを読む…」という機能は非常に役立ちます。このような機能を実装するためのスクリプトとして「readmore.js」があります。
この記事では、このスクリプトを使用して指定した高さ以上のコンテンツエリアに自動で「続きを読む…」リンクを表示する方法について詳しく解説します。

Contents

readmore.jsを使った自動「続きを読む…」表示の設定
HTML構造の作成
readmore.jsを使用して指定の高さ以上のコンテンツに自動で「続きを読む…」を表示するデモページ
ソース元：Readmore.js: jQuery plugin for long blocks of text
readmore.jsのメリット
最後に

readmore.jsを使った自動「続きを読む…」表示の設定

最初に必要なライブラリとして、jquery-1.9.0.min.js と readmore.js ファイルを読み込む必要があります。
以下のコードは、指定されたコンテンツエリア（今回の例では#info）が指定の高さ（250px）を超えた場合に「続きを読む…」リンクを表示するためのJavaScriptの設定です。

<script src="jquery-1.9.0.min.js"></script>
<script src="readmore.js"></script>
<script>
$(document).ready(function() {
	//コンテンツエリアのid名を指定
	$('#info').readmore({
		moreLink: '<a href="#">続きを読む…</a>',
		maxHeight: 250
	});
});
</script>

HTML構造の作成

次に、リンクを表示したいコンテンツエリアのHTML構造を設定します。
以下は、id=”info”を持つエリア内に複数のliタグを使用してコンテンツを配置した例です。

<div id="info">
<ul>
 	<li>
					<a href="https://dad-union.com/">DAD UNION</a></li>
 	<li>
					<a href="https://dad-union.com/about">このサイトについて</a></li>
 	<li>
					<a href="https://dad-union.com/javascript/57">getJSONでjson形式の配列情報を取得表示する方法</a></li>
 	<li>
					<a href="https://dad-union.com/javascript/51">jQueryの$.get()を使ってxmlデータを取得表示する方法</a></li>
 	<li>
					<a href="https://dad-union.com/javascript/46">window.location.search：URL（アドレス）のパラメータ値をJavaScriptで取得する方法</a></li>
 	<li>
					<a href="https://dad-union.com/javascript/43">テキストボックスの入力文字をJavaScriptで別エリアに同時にコピー表示する方法</a></li>
 	<li>
					<a href="https://dad-union.com/javascript/32">iframe先ページの高さにあわせてコンテンツを表示する方法</a></li>
</ul>
</div>
<!--/info-->

readmore.jsを使用して指定の高さ以上のコンテンツに自動で「続きを読む…」を表示するデモページ

実際にこの機能を動作させて確認したい場合、以下のデモページで試すことができます。

readmore.jsを使用して指定の高さ以上のコンテンツに自動で「続きを読む…」を表示デモ

ソース元：Readmore.js: jQuery plugin for long blocks of text

公式の情報や詳しいドキュメントは以下になります。

ソース元：Readmore.js: jQuery plugin for long blocks of text

readmore.jsのメリット

もちろん、PHPなど他の言語・技術を使って「続きを読む」リンクの実装は可能です。しかし、readmore.jsを使用する最大の利点は、コンテンツの高さを指定してリンクを表示できるため、文字数を気にすることなく使える点です。これにより、デザインの一貫性を保ちつつ、必要に応じてコンテンツを簡単に折りたたむことができます。