記事全文をグラデーション隠して、続きを読むボタンをjQueryでつける

質問が来たので、記事に残しておきます。

よくブログなどにある「続きを読む」ボタンですね（笑）はい。

WordPressの場合、プラグインやらタグやらで組み込めますが、今回は、HTMLとjQueryを使った方法になります。

アニメーションさせたり、cssだけで表現したりと、いろんなやり方があると思いますが、これまでちょくちょく組み込んできて、結局シンプルなのが読みても、運用サイドもどちらとも良いみたいで落ち着きました。

ので、シンプルな方法をまとめておきます。

HTML

    <div class="content hide">
        <div class="text">
            本文はここに色々書く
        </div>
        <div class="more">続きを読む</div>
    </div>

最初からclassにhideを書いておくとHTMLのレンダリング時に記事が一瞬見えるなどの引っかかりが消えてスムーズになります。

CSS

        .content{
            position:relative;
        }
        .content.hide{
            height:300px; /* 最初から見えているコンテツの高さ */
            overflow-y:hidden;
        }
        .content .more{
            position:absolute;
            bottom:0;
            width:100%;
            padding-top:100px; /* グラデーションの高さはここで調整 */
            padding-bottom:50px; /* 続きを読むテキストの位置 */
            text-align:center;
            background: linear-gradient(to bottom, rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255, 1) 70%);
            font-weight:bold;
            cursor:pointer;
        }

moreの中身を調整し、ボタンなんかを作ったりするとよいかも。

JavaScript

            $(function () {
                $(".more").click(function () {
                    $(this).fadeOut();
                    $(".content").removeClass("hide");
                });
            });

「続きを読む」部分をクリックすると、このタグをフェードで消して、コンテンツのhideクラスも消してあげると記事全文が表示されます。

昔は気合い入れて、複数のコンテンツに対応させたり、アニメーションさせたりと汎用的に作っていたのですが、可読性やコードのシンプルさ、表示のスムーズさから、どんどん簡素になりました（笑）

参考までに。