readmoreプラグイン
readmoreプラグインは、一定文字数を超えた文章は折りたたみ、続きを読むリンクを表示させることのできるプラグインです。このプラグインを使うことで、ブログの見出し一覧のようなサイトを作ることができます。
下記サイトからjtsnake-jquery-plugins-7d6728e20daa.zipをダウンロードし、解凍後のreadmoreフォルダにあるjquery.readmore.jsをpluginsフォルダに配置します。
今回は、デフォルトで使用した場合と、表示させる文字数を指定する場合、リンクの表示文字を指定する場合の3種類について説明します。
リスト1にreadmoreプラグインの使用例を示します。
リスト1 readmoreプラグインの使用例（jQueryPlugin_readmore.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery readmoreサンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="Scripts/jquery-1.5.2.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/jquery.readmore.js"></script>
<!--3.CSSの設定-->
<style type="text/css">
body {
font-family: helvetica, arial;
margin: 0px;
padding: 0px;
font-size: 1.3em;
}
.container {
margin: 0 auto;
width: 800px;
border-left: 15px solid #AA4488;
padding-left: 25px;
}
.more {
font-weight: bold;
color: #BB4488;
cursor: pointer;
}
h2 {
margin-top: 60px;
}
</style>
<!--4.プラグインの設定-->
<script type="text/javascript">
$(function () {
//（1）Defaultの使い方
$("#def .short").readmore();
//（2）表示文字数を指定する
$("#len .short").readmore({ substr_len: 50 });
//（3）ReadMoreの表示を変更する
$("#link .short").readmore({ more_link: '<a class="more something">続きはこちら</a>' });
});
</script>
</head>
<body>
<div class="container">
<h1>Jquery.readmore サンプル</h1>
<h2>（1）Defaultの使い方</h2>
<div id="def">
<h3>プラグイン適用前</h3>
<p class="before">
012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで100文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで200文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで300文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで400文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで500文字→）ここからデフォルト（500文字）以降で折りたたまれる部分 ～（中略）～
</p>
<h3>プラグイン適用後</h3>
<p class="short">
012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで100文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで200文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで300文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで400文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで500文字→）ここからデフォルト（500文字）以降で折りたたまれる部分 ～（中略）～
</p>
</div>
<h2>（2）表示文字数を指定する</h2>
<div id="len">
<h3>プラグイン適用前</h3>
<p class="before">
01234567890123456789012345678901234567（ここまでで50文字→）ここから折り返される部分0123456789012345678901234567890123456789 ～（中略）～
</p>
<h3>プラグイン適用後</h3>
<p class="short">
01234567890123456789012345678901234567（ここまでで50文字→）ここから折り返される部分0123456789012345678901234567890123456789 ～（中略）～
</p>
</div>
<h2>（3）ReadMoreの表示を変更する</h2>
<div id="link">
<h3>プラグイン適用前</h3>
<p class="before">
012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで100文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで200文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで300文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで400文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで500文字→）ここからデフォルト（500文字）以降で折りたたまれる部分 ～（中略）～
</p>
<h3>プラグイン適用後</h3>
<p class="short">
012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで100文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで200文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで300文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで400文字→）012345678901234567890123456789012345678901234567890123456789012345 678901234567890123456（ここまで500文字→）ここからデフォルト（500文字）以降で折りたたまれる部分 ～（中略）～
</p>
</div>
</div>
</body>
</html>
今回は、表示領域を「3.CSSの設定」のようにbody、container、more、h2について指定しました。こちらは、必要に応じて書き換えてください。
プラグインの使い方は、「4.プラグインの設定」のように、表示領域のid属性、classを指定し、readmoreメソッドを用います。引数に何も指定しない場合は、デフォルトで50文字以降が折りたたまれ、ReadMoreというリンクが表示されます。プラグイン適用前を図1に、プラグイン適用後を図2に示します。
図1 プラグイン適用前
図2 プラグイン適用後
ReadMoreリンクをクリックすると、図3のように残りの文字が表示されます。
図3 ReadMoreリンクをクリックした状態
また、表示される文字数を指定するには、「4.プラグインの設定」の「（2）表示文字数を指定する」のように、引数にsubstr_lenで、文字数を指定します。実行結果を図4に示します。
図4 表示文字数を指定した場合
最後に「ReadMore」リンクの表示文字を指定するには、「4.プラグインの設定」の「（3）ReadMoreの表示を変更する」のように、引数にmore_link、クラスに「more something」と表示テキストを指定します。実行結果を図5に示します。
また、「（3）ReadMoreの表示を変更する」はリスト2のようにも書き換えられます。
リスト2 リンクの表示文字を指定する場合の書き換え
$.fn.readmore.defaults.more_link = '<a class="more something">続きはこちら</a>';
$(".short").readmore();
図5 ReadMoreの表示を変更した場合
