【初心者向け】はてなブログ アコーディングメニュー"クリックしたら表示される" Part1【jQuery】
コピーして貼り付けるだけ！［part1］ ====
はてなブログではHTMLやCSSというプログラミング言語で、最低限記事を書いたりおしゃれにできるのですが、より高度に"動き"などをつけるためには、『jQuery』というプログラミング言語を使う必要があります。
今回はそのjQueryを使ってクリックすると文字が表示され、もう一度クリックすると隠れるという動きの作り方をご説明します。
ここをクリック
こんにちは
ネタバレ防止や、気になった人だけ読むことができる設定にするなど、好きなように応用することができ、読み手にとってもとても親切な仕様にすることができます。
この記事でできるようになること
● 初心者の方でも、はてなブログでjQueryを使って以下のような "動き" をつけられるようになります。（使っている編集モードは『はてな記法』ですが、『見たまま』や『Markdown』でもできると思います。）
会釈
えしゃく
CSS
以下のコードをコピーして、『デザイン』➡︎『カスタマイズ』➡︎『デザインCSS』にそのまま貼り付けてください。
/* アコーディングメニュー */ .entry-content .acodion-content p{ margin: 0; padding: 10px; } .acodion-panel{ box-sizing: border-box; background-color: #ececec; border: 1px solid gray; border-top-left-radius: 7px; border-top-right-radius: 7px; margin-top: 30px; margin-bottom: 30px; } .acodion-title{ background-color: white; border-top-left-radius: 7px; border-top-right-radius: 7px; padding: 5px 15px 5px 15px; cursor: pointer; margin-bottom: 20px; } .acodion-content { display: none; background-color: #ececec; padding-left: 10px; padding-right: 10px; }
jQuery 準備
以下のコードをコピーして、『設定』➡︎『詳細設定』➡︎『検索エンジン最適化』➡︎『headに要素を追加』にそのまま貼り付けてください。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
すでにこのようなコードがある場合は貼り付けずに先に進んで見て、もし動かないようでしたら貼り付けてください。
jQuery
以下のコードをコピーして、『デザイン』➡︎『カスタマイズ』➡︎『フッタ』にそのままコピーしてください。（右にスクロールできます。）
<script> $(window).on("DOMContentLoaded", function(){ var $title = $(".acodion-title"); var $content = $(".acodion-content"); $title.on("click", function(){ var indx = $title.index($(this)); $content.eq(indx).slideToggle(300); }); }); </script>
コード内に「slideToggle(300)」と書かれた場所がありますが、この値は開閉スピードです。例えばこの値を1000に変更したら「1秒」で開閉しますし「100」にしたら「0.1秒」で開閉させることになります。（『クリアメモリ』より）
HTML
以下のコードをコピーして、使いたい記事内に直接貼り付けてください。（コードは右にスクロールできます。）
もちろん文章は好きなように変更可能です。
<div class="acodion-panel"> <p class="acodion-title">会釈</p><div class="acodion-content"><p>えしゃく</p> </div> </div>
これで完成です。
あとは自分なりにカラーなどアレンジしていきましょう。
【はてなブログ】開閉式コンテンツ(アコーディオンパネル)でネタバレとかの表示・非表示を切り替える！
「jQueryをもっと学んでブログをおしゃれにしたい！」という方におすすめ本はこちらです。ぜひ参考にしてみてください。
