【jQuery】特定の行数以上で「続きを読む」ボタンを表示させる方法
今回はjQueryを使用して、特定の行数以上で「続きを読む」ボタンを設置する方法について、紹介していきます。
追記
ありがたいことに、本記事は多くの方に見ていただいております。
需要がありそうなので、本件に関連したjQueryプラグイン「shino_rm」を開発しました。
「内容は知らなくてもいいから機能だけ使いたい」という方は、ぜひこちらのプラグインをご利用ください。
以上、追記となります。
下記より本編です。
使用するケース
Webサイト閲覧者全員に見てほしいわけではない長いテキストを特定の行のみ表示させ、サイト全体を見やすくするために使われます。
今回解説する機能の仕様
下記仕様に基づいて解説していきます。
・初期状態では特定の行までを表示させ、それより後の行を非表示にする
・非表示になっている行がある場合は「続きを読む」のボタンが表示される
・「続きを読む」のボタンを押すと、非表示だった行が表示され、ボタンは非表示になる
「続きを読む（readmore、もっと読む）」機能における一般的な内容のはずです。
サンプル
こちらからご覧ください。※別タブで開きます
作成方法
jQueryを使って実装していきます。
なお、「jQueryが良く分からない」「基礎が知りたい」という方は、別にjQueryの入門用記事を書きましたので、合わせてご覧ください。
かなり分かりやすく書いたつもりです。
まずHTMLについて、該当部分は下記のようにマークアップします。
<p class="text">じゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけじゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけじゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけじゅげむじゅげむごこうのすりきれかいじゃりすいぎょのすいぎょうまつうんらいまつふうらいまつくうねるところにすむところやぶらこうじのぶらこうじぱいぽぱいぽぱいぽのしゅーりんがんしゅーりんがんのぐーりんだいぐーりんだいのぽんぽこぴーのぽんぽこなーのちょうきゅうめいのちょうすけ</p>
<p class="readmore-btn"><a href="">続きを読む</a></p>「続きを読む」で区切りたい文章のまとまりである<p>タグに「text」というクラスをつけて区別しています。
その下に「続きを読む」ボタンを<p>タグに内包する形で<a>タグを使用して設置しています。
CSSについては下記のように設定を行います。
.text {
line-height: 24px;
}
.readmore-btn {
text-align: right;
display: none;
}
「text」の部分について、1行の高さを指定する「line-height」は、初期値の「normal」以外の数値を必ず設定しておく必要があります。
初期状態で表示させる「text」の高さを計算するために必要な数値になるからです。
「readmore-btn」について、大抵の場合は範囲内の右側に配置されるので上記でも「text-align: right」を指定しています。
「display: none」の指定は必須です。
「text」で表示される行数が制限したい行数以下であれば「続きを読む」ボタンは表示させる必要がないので、基本はCSSで非表示にしておきます。
そしてjQueryの記述は下記のように書きます。
$(function() {
var textHeight = $('.text').height();
var lineHeight = parseFloat($('.text').css('line-height'));
var lineNum = 4;
var textNewHeight = lineHeight * lineNum;
if (textHeight > textNewHeight) {
$('.text').css({
'height': textNewHeight,
'overflow':'hidden'
});
$('.readmore-btn').show();
$('.readmore-btn').click(function() {
$(this).hide();
$('.text').css({
'height': textHeight,
'overflow': 'visible'
});
return false;
});
};
});順番に説明していきます。
var textHeight = $('.text').height();これは、「text」の元の高さ（＝全文表示されたときの高さ）を「textHeight」という変数に代入しています。
var lineHeight = parseFloat($('.text').css('line-height'));これは、「$('.text’).css('line-height’)」で「text」の「line-height」を求めているのですが、そのままでは「px」の単位がついてしまい計算が出来ないので、「parseFloat()」の関数を使って単位を除去し、単純な数値にしたものを「lineHeight」という変数に代入しています。
var lineNum = 4;これは、初期状態で表示させる行数で、例では4になっていますが任意で設定してください。
var textNewHeight = lineHeight * lineNum;これは、「text」の「line-height」に、初期状態で表示させる行数を掛けた数値を、「textNewHeight」という変数に代入しています。
そしてこの数値が、初期状態での「text」の高さになります。
例えば「text」の「line-height」が「20」で、初期状態で表示させる行数が「5」なら「20*5＝100」で、初期状態で「text」の高さは「100px」になります。
if (textHeight > textNewHeight) {
}この部分については、もし「text」の元の高さが初期状態での「text」の高さを超えた場合（＝表示する行数が制限した行数より多かった場合）は{}内の処理を行うといった場合分けをするという意味になります。
「text」の元の高さが初期状態での「text」の高さを超えなかった場合（＝表示する行数が制限した行数以下の場合）は何もせず、「続きを読む」ボタンも非表示のままです。
そして{}内に、あふれた行の表示を制御する命令を書いていきます。
$('.text').css({
'height': textNewHeight,
'overflow':'hidden'
});これは、「text」の高さを初期状態で表示させる高さに置き換え、さらに飛び出して表示されているテキストを「overflow:hidden」で非表示にしています。
$('.readmore-btn').show();これは、「続きを読む」ボタンを表示させています。
$('.readmore-btn').click(function(){
});これは、「続きを読む」ボタンを押したときに、{}内の命令が行われるというイベント設定です。
$(this).hide();これは、「続きを読む」ボタンを非表示にする命令です。
$('.text').css({
'height': textHeight,
'overflow':'visible'
});これは、「text」の高さを元の高さに戻す、つまり非表示だったテキストを表示させるという内容の命令になります。
「overflow」のプロパティも初期値の「visible」に戻しています。
return false;こちらは<a>タグクリック時のリンク先に飛ぶ動作を無力化するための命令です。
以上となります。