RECORDS

書評、動画実況、機材、ソフト、動画編集、副業、How to

【初心者向け】はてなブログ "クリックしたら表示される" アコーディングメニューPart2【jQuery】

f:id:higehigex:20181101191326j:plain
コピーして貼り付けるだけ![Part2]


今回はPart1に引き続きPart2です。

jQueryを使ってクリックすると文字が表示され、もう一度クリックすると隠れるという動きの作り方をご説明します。
Part1とは違ったアコーディングメニューを作ります。


表示する


こんにちは



ちなみにPart1ではこちらを作成しました。


こちらをクリック

こんにちは

まだPart1を見ていない方はこちらからどうぞ。
www.thinking-samurai.net


jQueryを使いこなせれば、ネタバレ防止気になった人だけ読むことができる設定にするなど、好きなように応用することができ、読み手にとってもとても親切な仕様にすることができます。



この記事でできるようになること

● 初心者の方でも、はてなブログjQueryを使って以下のような "動き" をつけられるようになります。(使っている編集モードは『はてな記法』ですが、『見たまま』や『Markdown』でもできると思います。)


会釈』の読みは?

答え


えしゃく



流れ

CSS』『jQuery 準備』『jQuery』『HTML』のコードをコピーして、それぞれ指定された場所に貼り付けるだけです。

そのため、それぞれの英語の意味がわかっていなくても大丈夫です。



CSS

以下のコードをコピーして、『デザイン』➡︎『カスタマイズ』➡︎『デザインCSS』にそのまま貼り付けてください。

/* アコーディングメニュー */
.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;
}



jQuery 準備

以下のコードをコピーして、『設定』➡︎『詳細設定』➡︎『検索エンジン最適化』➡︎『headに要素を追加』にそのまま貼り付けてください。

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

すでにこのようなコードがある場合は貼り付けずに先に進んで見て、もし動かないようでしたら貼り付けてください。(Part1と同じです。)



jQuery

以下のコードをコピーして、『デザイン』➡︎『カスタマイズ』➡︎『フッタ』にそのままコピーしてください。(右にスクロールできます。)

<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>



HTML

以下のコードをコピーして、使いたい記事内に直接貼り付けてください。(コードは右にスクロールできます。)
もちろん文章は好きなように変更可能です。

<p class="show-button">答え</p>
 <div class="hide-area">
えしゃく
</div>

これで完成です。

あとは自分なりにカラーなどアレンジしていきましょう。


参考記事
最初に記事の一部を隠しておいてjQueryでスライドにして見せるようにする方法 - Yukihy Life




jQueryをもっと学んでブログをおしゃれにしたい!」という方におすすめ本はこちらです。ぜひ参考にしてみてください。