HOME > コラム > WEB全般 > 「続きを読む」や「Read More」を設置する「Readmore.js」の使い方

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

コラム

Readmore.jsは、読み物サイトの多くに実装されている「続きを読む」や「Read More」を設置して、文章が長くてもコンテンツが縦長にならないようにコントロールするボタンを設置するjQueryプラグインです。
今回、CSSの装飾を追加して実装しました。
使い慣れると便利なプラグインかなと思います。
文章が多いと全文表示をするとやたら縦長になることが多いので、このようなプラグインを常時使い込んでおくと、いざという時に助かりそうな感じがしました。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

WEB全般に投稿したコラム記事

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

Readmore.jsとは

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

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

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

本家サイト

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

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_rm_180213.zip
組み込み済みサンプル

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

元になるWEBサイトテンプレート(PHP)について

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

ポイント
利用するjsファイル
<script type="text/javascript" src="/js/readmore.js"></script>

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

トリガーになるJS記述

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

<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」の使い方の通常ページ

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。