jQuery

jQueryで「Read More」ボタンを作る方法

2021年6月23日 by single コメントはまだありません

よくウェブサイトで「さらに読む」とか「Read More」のようなボタンあり、それを押すと、さらに内容が表示されるようになりますよね。今回はjQueryのライブラリを利用して実装してみます。

jQueryで「Read More」ボタンを作る方法

今回はjQueryのプラグイン「readMoreFade」を利用します。

readMoreFade

「readMoreFade」のページに行って『Download』ボタンを押して、ZIPファイルをダウンロードしてください。

ダウンロードすると書庫ファイルにはHTMLとCSS、JSファイルがありますが、cssとjsファイルを適時配置ください。

サンプル

皆さん、こんにちは。 このサイトは、投資やサイト運営、その技術（Javascriptやその他のAPI）の情報を発信しています

基本的には雑記ブログのようなものですが、私自身、サイト運営について学習するために運営しております。

普段はフリーランスとして仕事をしております。

フリーランスといっても、お客様の会社に常駐しているので、生活はほぼ、会社員と変わりません。

幸いにも、長く契約をさせていただいておりますし、当分、解約解除についてもい心配はありません。

質素に生活もしているので、そこそこ貯金もたまり、契約が解除されてもすぐに困る状況ではありません。

ただ、長期的な資産経済についても心配はあり、２年位前から投資を再開しだしました。

その資産形成の過程を公開ししつつ、テック系の情報を発信できればなんて思っております。

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Sample</title>
   <!-- jQuery -->
   <script src="https://code.jquery.com/jquery.min.js"></script>

   <!-- 読み込むスタイルシート--><!-- パスは適時変更ください -->
   <link href="/assets/readMoreFade/readMoreFade.css" rel="stylesheet" >

   <!-- 読み込むスJSファイル--><!-- パスは適時変更ください -->
   <script type="text/javascript" src="/assets/readMoreFade/readMoreFade.js" ></script>
   <style type="text/css">
      /* Read More ボタンを表示させる領域 */
      #fadeMe{
         padding: 10px;
         background-color: lightgrey;
         width: 420px;
         margin:30px auto;
      }
      /* Read More ボタンで利用するボタンの定義 */
      .btn, button.btn {
         font-size: 1.6rem;
         font-weight: 700;
         line-height: 1.5;
         position: relative;
         display: inline-block;
         padding: 1rem 4rem;
         cursor: pointer;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
         -webkit-transition: all 0.3s;
         transition: all 0.3s;
         text-align: center;
         vertical-align: middle;
         text-decoration: none;
         letter-spacing: 0.1em;
         color: #212529;
         border-radius: 0.5rem;
      }
      .btn--orange,
         a.btn--orange {
         color: #fff;
         background-color: #eb6100;
      }
      .btn--orange:hover,
         a.btn--orange:hover {
         color: #fff;
         background: #f56500;
      }
      a.btn--radius {
         border-radius: 100vh;
      }
   </style>
</head>
<body>
   <div id="fadeMe">
      <p>
         皆さん、こんにちは。
         このサイトは、投資やサイト運営、その技術（Javascriptやその他のAPI）の情報を発信しています<br /><br />
         基本的には雑記ブログのようなものですが、私自身、サイト運営について学習するために運営しております。<br /><br />
         普段はフリーランスとして仕事をしております。<br /><br />
         フリーランスといっても、お客様の会社に常駐しているので、生活はほぼ、会社員と変わりません。<br /><br />
         幸いにも、長く契約をさせていただいておりますし、当分、解約解除についてもい心配はありません。<br /><br />
         質素に生活もしているので、そこそこ貯金もたまり、契約が解除されてもすぐに困る状況ではありません。<br /><br />
         ただ、長期的な資産経済についても心配はあり、２年位前から投資を再開しだしました。<br /><br />
         その資産形成の過程を公開ししつつ、テック系の情報を発信できればなんて思っております。<br /><br />
      </p>
   </div>
   <script type="text/javascript">
      $('#fadeMe').readMoreFade({
            buttonClass: "btn btn--orange",
            backgroundColor: "white" 
      });
   </script>
</body>
</html>

デモ

コーディング

前提

まず、jQueryのライブラリを読み込む必要があります。

   <!-- jQuery -->
   <script src="https://code.jquery.com/jquery.min.js"></script>

次に、ダウンロードした「readMoreFade」のJSファイルとCSSファイルを読み込んでください。


   <!-- 読み込むスタイルシート--><!-- パスは適時変更ください -->
   <link href="/assets/readMoreFade/readMoreFade.css" rel="stylesheet" >

   <!-- 読み込むスJSファイル--><!-- パスは適時変更ください -->
   <script type="text/javascript" src="/assets/readMoreFade/readMoreFade.js" ></script>

「Read More」ボタン表示領域

<div>領域で「Read More」ボタンを表示させたい領域を定義します。

   <div id="fadeMe">
      <p>
         ...
      </p>
   </div>

<div>の下部オブジェクトとして必ず<p>の領域を設定してください。「Read More」ボタンクリック後の、高さをうまく取得できないためです。

このdiiv領域のスタイルはスタイルシートで行います。

      #fadeMe{
         padding: 10px;
         background-color: lightgrey;
         width: 420px;
         margin:30px auto;
      }

「Read More」ボタン表示設定

「Read More」ボタンを表示させるには、以下のようなコードが必要になります。

   <script type="text/javascript">
      $('#fadeMe').readMoreFade({
            buttonClass: "btn btn--orange",
            backgroundColor: "white" 
      });
   </script>

セレクタで「Read More」ボタンを表示させたいdivエリアを選択し、「readMoreFade」を呼び出します。パラメータは以下の通りです。

buttonClass「Read More」ボタンCSSクラス
backgroundColor非表示領域のグラデーションの色

「Read More」ボタン表示時の高さ

「Read More」ボタン表示時のdiv領域の高さは「310px」となります。これはreadMoreFade.jsのソース内に直書きされています。調整したい場合には８行目を修正すればよいかと思います。

「Read More」ボタンのラベルを変更したい

「Read More」の文字列はこれも、readMoreFade.jsに直書きされていて修正したい場合には11行目を修正してください。

(function ( $ ) {
    $.fn.readMoreFade = function(options) {
        var settings = $.extend({
            backgroundColor: "white",
            buttonClass: "button"
        }, options );

        this.css( "height", 310 );
        this.css( "overflow", "hidden" );
        this.css( "position", "relative" );
        this.append('<p class="readMoreFade"><a href="#" class="' + settings.buttonClass + '">Read More</a></p>')

以上、ご参考になればと思います。