RECORDS

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

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

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

はてなブログではHTMLやCSSというプログラミング言語で、最低限記事を書いたりおしゃれにできるのですが、より高度に"動き"などをつけるためには、『jQuery』というプログラミング言語を使う必要があります。

今回はそのjQueryを使ってクリックすると文字が表示され、もう一度クリックすると隠れるという動きの作り方をご説明します。


ここをクリック

こんにちは


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

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

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


会釈

えしゃく



流れ

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

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



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