【jQuery/CSS】はてなブログで使える！記事の一部を隠し、押したときに表示するボタン

表示ボタンを押したときに隠していた項目を表示するボタンです。
実際に動かしてみたほうが分かりやすいかも

f:id:jacklin8:20171107193938j:plain

DEMO

表示する

このようにボタンを押したときに隠していた文章が表示されます。
見たい人だけ詳細をみたりするようのに、記事が長くなってしまうときに隠したりするのに使えるのではないかと思います。

CODE

実装する方法です。

jQuery

jQueryを入れてない人は以下のコードを

設定<詳細設定<head
にいれてください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

そして以下のコードを、はてなブログの

デザイン<カスタマイズ<ヘッダ<タイトル下
に埋め込んでください。

    <script>
    //クリックすると表示されるボタン
    $(function(){
        $(".show-button").click(function(){
            var $this = $(this);
            var $target = $this.next();
            if($target.css('display') == 'none'){
                $target.slideDown(400);
                $this.text("隠す");
            }else{
                $target.slideUp(400);
                $this.text("表示する")
            };
        });
    });
    </script>

CSS

PC版は以下のコードをはてなブログの

デザイン<カスタマイズ<デザインCSS
に埋め込みます。

<style>
/*隠すボタン*/
.show-button-block{
    text-align:center;          /*ボタンを中央揃えに*/
}
.show-button{
    display: inline-block;
    border: 2px solid black;    /*ボタンの枠の太さ・色*/
    border-radius: 5px;         /*ボタンに丸み*/
    padding: 10px 15px;         /*サイズ*/
    cursor: pointer;            /*カーソルポインターに*/
}
.show-button:hover{
    background: black;          /*背景色*/
    color: white;               /*文字色*/
    transition: .3s;            /*ぼんやりと変化*/
}
.hide-area{
    display: none;              /*隠しエリアの表示*/
}
</style>

スマホ版は上記のコードに<style tyle=text/css></style>で挟んでを記事上に埋め込んでください。

HTML

あとは隠したい場所があれば以下のコードを書き加えます。

<div class="show-button-block">
    <span class="show-button">表示する</span>
    <div class="hide-area">
        <!--ここに隠したいものを入れる-->
    </div>
</div>

<div class="hide-area">の後ろに文字を追加すればボタンを押したときに表示されるようになります。

こんな感じのデザインも作ってみました

コードって長くなってしまうのでCode部分を非表示にするボタンです。
jQuery側でthis.textの部分を変更して、CSSのデザインを変更しています。

Show Code

                $(function () {
                    $(".show-code").click(function () {
                        var $this = $(this);
                        var $target = $this.next();
                        if ($target.css('display') == 'none') {
                            $target.slideDown(400);
                            $this.text("Hide Code");
                        } else {
                            $target.slideUp(400);
                            $this.text("Show Code")
                        };
                    });
                });

                /*隠すボタン*/
                .show-code-block {
                    text-align: center;
                }
                .show-code {
                    display: inline-block;
                    text-align: center;
                    display: inline-block;
                    width: 200px;
                    height: 54px;
                    cursor: pointer; 
                    text-decoration: none;
                    line-height: 54px;
                    outline: none;
                    position: relative;
                    z-index: 2;
                    border: 2px solid #333;
                    color: #fff;
                    line-height: 50px;
                    -webkit-perspective: 300px;
                    perspective: 300px;
                    -webkit-transform-style: preserve-3d;
                    transform-style: preserve-3d;
                }
                .show-code::before,
                .show-code::after {
                    position: absolute;
                    z-index: -1;
                    display: block;
                    content: '';
                }
                .show-code,
                .show-code::before,
                .show-code::after {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    -webkit-transition: all .3s;
                    transition: all .3s;
                }
                .show-code:hover {
                    color: #333;
                }
                .show-code::after {
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: #333;
                    -webkit-transform-origin: center bottom;
                    transform-origin: center bottom;
                    -webkit-transform: rotateX(0);
                    transform: rotateX(0);
                }
                .show-code:hover::after {
                    -webkit-transform: rotateX(-180deg);
                    transform: rotateX(-180deg);
                }
                .hide-code {
                    display: none;
                }