「…続きを読む」リンク

よくある依頼で長い文章の際に冒頭だけ表示したい。つまり、n行以上の場合に折りたたんで「…続きを読む」リンクを付けたいということがあります。その場合、たいていJavascriptの制御で実現させるというのが定石となります。ただ、よくあるということもあり汎用的に使えるJavascriptを作ってみましたのでご紹介いたします。

See the Pen 「…続きを読む」リンク by yoshiaki nakao (@woopeer) on CodePen.

設置準備

今回はjQueryを使わせていただきましたので、GoogleのCDNライブラリを読み込んでおきます。※ヘッダー等ですでに読み込み済みの場合は不要です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

今回作成したJavascriptは以下になりまして、body内に記述する場合は、本文の邪魔にならないようbody内のできるだけ下部に設置すると（SEO的に）よいかもしれません。また、外部に設置したり、設置済みのものに追加する場合は、jQueryの後に読み込ませてください。

<script>
$(function(){

$(function () {
  $(".more-link").each(function (v_n) {
    $(this).after('<div class="more-link-after"></div>');
    f_lessText(v_n);
  });
});

function f_moreText(v_n) {
  var e_text = $(".more-link").eq(v_n);
  var v_closeHeight = e_text.height();
  var v_poenHeight = e_text.css("height", "auto").height();
  e_text.height(v_closeHeight).animate({ height: v_poenHeight }, 150);
  $(".more-link-after:eq(" + v_n + ")").html(
    '<a href="javascript:void(0)" onclick="f_lessText(' + v_n + ')">閉じる</a>'
  );
}
function f_lessText(v_n) {
  var e_more = $(".more-link:eq(" + v_n + ")");
  var e_moreAfter = $(".more-link-after:eq(" + v_n + ")");

  var v_max = 6;
  if (e_more.data("max")) {
    v_max = e_more.data("max");
  }
  var e_text = e_more;
  var v_textHeight = parseFloat(e_more.css("height"));
  var v_fontHeight = parseFloat(e_more.css("line-height"));
  if (!v_fontHeight) {
    v_fontHeight = parseFloat(e_more.css("font-size")) * 1.5;
  }
  var v_moreMaxHeight = v_fontHeight * v_max;
  if (v_moreMaxHeight < v_textHeight) {
    e_more.css({ overflow: "hidden", "margin-bottom": "0" });
    e_more.height(v_moreMaxHeight);
    e_moreAfter.css({
      "font-size": e_text.css("font-size"),
      "line-height": e_text.css("line-height")
    });
    e_moreAfter.html(
      '<div><a href="javascript:void(0)" onclick="f_moreText(' +
        v_n +
        ')">･･･続きを読む</a></div>'
    );
  }
}

});
</script>

使用方法

設定したいブロック要素（<p>や<div>）にclass="more-link"を追加すると、その要素の高さが６行以上の場合にかぎり、高さを６行で固定し７行目移行を非表示にします。そして、「…続きを読む」のリンクを追加します。

続いて、「…続きを読む」のリンクをクリックすると隠されていた部分をスライド表示させ、「閉じる」リンクに変更します。

6行以上の場合に「…続きを読む」というリンクを付け足して、6行目から非表示にします。そして、「…続きを読む」をクリックすると4行目以降をスライド表示させて「閉じる」リンクに変更します。また、「閉じる」リンクをクリックすると元通りの「…続きを読む」というリンクが表示されます。仕込みたい要素にclass="more-link"を追加するだけでOKです

6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。6行以上のテストテキスト。

6行よりも短い場合は「…続きを読む」というリンクは表示されません。

6行以下のテストテキスト。6行以下のテストテキスト。6行以下のテストテキスト。

「data-max」というオプションを属性追加することでたたむ行数を変更する事ができます。例えば3行でたたみたい場合は、「data-max="3"」と追加すればOKです。このJSの優れているところは設定したい要素に以下のように追記するだけでよい点です。 <p class="more-link" data-max="3" >テキストテキスト・・・・・</p>

3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。3行以上のテストテキスト。

文字サイズが異なる場合でも大丈夫なように、文字の大きさ（高さ）をもとにたたむ高さを決めています。ですので、文字の大きさが違っていても大丈夫です。

文字サイズが大きくても大丈夫です。文字サイズが大きくても大丈夫です。文字サイズが大きくても大丈夫です。文字サイズが大きくても大丈夫です。文字サイズが大きくても大丈夫です。文字サイズが大きくても大丈夫です。文字サイズが大きくても大丈夫です。文字サイズが大きくても大丈夫です。文字サイズが大きくても大丈夫です。文字サイズが大きくても大丈夫です。文字サイズが大きくても大丈夫です。

文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。文字サイズが小さくても大丈夫です。

このブログを検索

webデザイン