jQueryで指定文字数だけを表示して「もっと読む」のリンクをつけるプラグイン「Jquery.readmore.js」

複数の文章など、出だしだけ（指定した文字数）を読ませて興味があれば続きを見らるようにするのに

「文字文章文字文章文字文章文字文章…続きを読む」

みたいな状況をよく見かけると思います。WordPressでは「more link」とかいいます。

jqueryの「Jquery.readmore.js」を使えば、ページ遷移することなく続きの文章を表示させることが出来ます。文字数を制限させて表示するのってプログラマの分担だと思っていましたが、これならデザイナー側でも実装することができると思います。

実際にはこのような表示になります。

scelerisque at pharetra at, gravida nec diam. Phasellus metus nibh, gravida in scelerisque dignissim, vulputate et ipsum.…Read More

必要なもの

• jQuery.js
• Jquery.readmore.js

上記をダウンロードしてjsフォルダなどにアップロードします。

htmlに記述する

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.readmore.js"></script>
<script type="text/javascript">
$(function(){
	$(".class名").readmore({
	substr_len: 50 //表示させたい文字数
	});
});
</script>

指定した文字数を表示する箇所

<p class="class名">指定した文字数を表示する箇所</p>

気をつけたいのは、デフォルトでは「Read more」をクリックすると下に伸びて残りのテキストを表示します。縦に可変可能なレイアウトで実装した方がよいです。