【初心者向け】はてなブログ "クリックしたら表示される" アコーディングメニューPart2【jQuery】
コピーして貼り付けるだけ！［Part2］
====
今回はPart1に引き続きPart2です。
jQueryを使ってクリックすると文字が表示され、もう一度クリックすると隠れるという動きの作り方をご説明します。
Part1とは違ったアコーディングメニューを作ります。
ちなみにPart1ではこちらを作成しました。
こちらをクリック
こんにちは
まだPart1を見ていない方はこちらからどうぞ。
www.thinking-samurai.net
jQueryを使いこなせれば、ネタバレ防止や気になった人だけ読むことができる設定にするなど、好きなように応用することができ、読み手にとってもとても親切な仕様にすることができます。
この記事でできるようになること
● 初心者の方でも、はてなブログでjQueryを使って以下のような "動き" をつけられるようになります。（使っている編集モードは『はてな記法』ですが、『見たまま』や『Markdown』でもできると思います。）
『会釈』の読みは？
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をもっと学んでブログをおしゃれにしたい！」という方におすすめ本はこちらです。ぜひ参考にしてみてください。
