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

readmore

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

 

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

 

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

 

 

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

 

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

→本家サイト

→GitHub

 

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

 

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

 

HTML head

 

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

 

 

HTML body

 

 

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

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

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

 

 

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

上記のオプションでは、
speed→開閉するスピード
collapsedHeight→最初に表示するコンテンツの高さ
となっています。

 

では、Readmore.jsを使用した簡単なデモページを作成しましたのでご覧ください。

デモページはこちら

 

 

今回は「続きを読む」ボタンでコンテンツの開閉を簡単に行えるReadmore.jsを紹介しました。

要素を開閉するだけであれば、プラグインを使用する必要はないかもしれませんが、簡単に導入できるので便利ですね。

 

概要文のみを表示させることで、複数の長いコンテンツが並んでいるページをコンパクトに見せることができます。

 

ですが、Googleはコンテンツを隠すことに対して、快く思ってない節があるので、多様するのは考えた方がいいかもしれないですね。

 

以上、ウェブラボ クリエーターズメモでした。

  • このページを共有する