「続きを読む」ボタンで要素の開閉を簡単に組込めるプラグインReadmore.js

2018.10.25　Posted by Coding_team

Webプログラミング

こんにちは、ウェブラボクリエーターズメモです。

近年、スマホの普及率もあがり、Webサイトを閲覧するときもスマホメインとなってきています。
スマホでブログやまとめサイト等の記事を見ている時、文字ががずらっと並んでいてはあまり読む気にもならないですよね？
ですが、短い導入でその記事が気になるのであれば、続きを読みたいと思いますよね！

そこで今回は「続きを見る」や「Read More」というボタンを設置して、長いコンテンツの続きを読む的な、挙動をするjQueryプラグイン「Readmore.js」を紹介します。

では実際Readmore.jsを実装していきます。

まず下記のページからReadmore.jsをダウンロードします。
本家サイトとGitHubです。
どちらからでもダウンロードできます。

→本家サイト

→GitHub

使用するファイルは「Readmore.js-master」フォルダ内の
readmore.jsになります。

次にreadmore.jsとjquery本体を読み込ませます。

HTML head

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/readmore.js"></script>
<script>
jQuery(function () {
    $('.open').readmore({
        speed: 750,
        collapsedHeight: 105,
        moreLink: '<a class="btn" href="#"><span>続きを読む</span></a>',//続きを読むボタンタグ
        lessLink: '<a class="btn_close" href="#"><span>閉じる</span></a>'//閉じるボタンタグ
    });
});
</script>

jQuery(function () {

$('.open').readmore({

speed: 750,

collapsedHeight: 105,

moreLink: '<a class="btn" href="#"><span>続きを読む</span></a>',//続きを読むボタンタグ

lessLink: '<a class="btn_close" href="#"><span>閉じる</span></a>'//閉じるボタンタグ

});

</script>

次にbody内に以下の記述をします。

HTML body

<div class="open">
    （省略）<!-- ここに文章が入ります。 -->
</div>

（省略）

</div>

次にコンテンツの開閉を行うため、「Readmore.js」を実行します。

先ほどのhead内に続けて記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/readmore.js"></script>
<!-- 下記 Readmore.js 実行文 -->
<script>
	$(function () {
		$('.open').readmore();
	});
</script>
<!-- //下記 Readmore.js 実行文 -->

$(function () {

$('.open').readmore();

});

</script>

※上記はデフォルトです。

またオプションをつけることにより、開閉するスピードなどを変えたりすることもできます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/readmore.js"></script>
<!-- 下記 Readmore.js 実行文 -->
<script>
    $(function () {
        $('.open').readmore({
        	//オプション
            speed: 750,
            collapsedHeight: 105,
            moreLink: '<a class="btn" href="#"><span>続きを読む</span></a>',//続きを読むボタンタグ
            lessLink: '<a class="btn_close" href="#"><span>閉じる</span></a>'//閉じるボタンタグ
        });
    });
</script>
<!-- //下記 Readmore.js 実行文 -->