「続きを読む」や「Read More」を設置する「Readmore.js」の使い方

「続きを読む」や「Read More」を設置する「Readmore.js」の使い方

Readmore.jsは、「続きを見る」や「Read More」というボタンを設置して、コンテンツの続きを読む的な、そういう挙動をするjQueryプラグインです。
特に難しいとは思っていませんでしたが、「続きを見る」などのボタンのCSS装飾に若干手間が取られた感じがしました。

jQueryプラグインはインターフェイス上での挙動の諸々をコントロールするので、CSSが干渉しやすい感じですよね。
ということで、今回はCSSを別途用意いたしました。

まぁ、特に難しいテクニカルなCSS装飾をするわけではありませんので、構えず見てください。

本家サイトとGitHubです。
どちらでもプラグイン一式をダウンロードして頂けます。

• Readmore.js本家
• Readmore.jsGitHub

phptemp_rm_180213.zip

サンプルです。
トップページの文章部分だけに適応させています。

• 組み込み済みサンプル

当サイト内の「SEOの基礎知識」の中のコンテンツです。

• コンテンツSEOのためのWEBサイトテンプレート（PHP）

<script type="text/javascript" src="/js/readmore.js"></script>

本家からダウンロードしたファイルをアップして読み込ませてください。
新たに読み込ませるファイルは以上です。

ヘッダ部分に以下の記述も同じように記述してください。

<script>
$(function () {
$('.topmain-txt').readmore();
});
</script>

因みにですが、当サイトで配布しているファイルでは、トップページのみ適応させているので、共通ファイルなどには記述していません。

トリガー記述の部分にオプション記述が出来ます。
以下の記述を参考にして、本家サイトやGitHubのオプションをご確認ください。

<script>
$(function () {
$('.topmain-txt').readmore({
	speed: 1000,
	moreLink: '<a href="#" class="opnbtn">続きを読む</a>',
	lessLink: '<a href="#" class="clsbtn">閉じる</a>'
});
});
</script>

因みにですが、上記の「続きを読む」と「閉じる」のaタグ内にあるclassはオリジナルで追加しています。

本来、ここで設定が完了です。
ただ、当サイトで配布しているファイルでは、CSSでの装飾が必要になります。

先述のオプション設定しているaタグのclassの装飾をすることになります。
今回、以下のCSSファイルを追記していますので、装飾内容は、それらのファイルの装飾を適宜調整してください。

<link href="/css/sp_readmore.css" type="text/css" rel="stylesheet" />
<link href="/css/tbl_readmore.css" type="text/css" rel="stylesheet" />
<link href="/css/readmore.css" type="text/css" rel="stylesheet" />

readmore.cssの内容は以下の通りです。

.topmain-txt {
	max-height: 150px;
	overflow: hidden;
}

.topmain-txt p:last-child {
	margin-bottom: 0;
}

a.opnbtn {
	display: block;
	width: 100%;
	clear: both;
	margin-bottom: 60px;
	padding-top: 40px !important;
	z-index: 15000;
}

a.clsbtn {
	display: block;
	width: 100%;
	clear: both;
	margin-bottom: 60px;
	padding-top: -40px !important;
	z-index: 15000;
}

あとは、それぞれのボタンが見やすくなればベスト・・・というところでしょうか。

ということで、最後に動作確認です。
まぁ特に難しいことはありませんので、上手くご確認くださいね。

デバイスによっての指定を入れている場合、デバイス毎のチェックも欠かさずに。

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

• 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_171030.zip 」です。

いかがでしたでしょうか？

CSSの装飾の部分さえわかればそんなに難しい内容ではない感じです。
言い方が悪いかもしれませんが、パッと見で去られることがないようにする仕掛けにもなりますよね。
何かしらのアクションを起こしてもらい、コンテンツの続きを見てもらうため、直帰率の改善になるかもしれません。

ただ、Googleはこれらのコンテンツ表示非表示の仕掛けを快く思ってない部分があります。
その点だけ気になるところですので、多用するのは宜しくないかもしれません。

その時々のトレンドや流れを見て、要所要所で使うようにしてくださいね。

執筆 : 清水 隼斗

「続きを読む」や「Read More」を設置する「Readmore.js」の使い方のAMPページ