私は文系人間でこのブログもコピペだけで作ってます。
その過程をログっておこうとすると、どうしても HTML のコードを記事内に貼り付ける事になります。
長いコードを貼ると記事がやたらと長くなってしまい、なんか格好悪いですよね。
今回はこれをアコーデオンパネル（閉開式コンテンツ）で解決したいと思います。
アコーディオンパネル（閉開式コンテンツ）とは？
コードなどを記事に貼る場合がありますよね。
これくらいの短いコードならまだ良いのですが...。↓
中にはこんなに長くなってーしまうケースも多々あります。↓
（実際には囲み込めてないくらい長いコードです。）
いろいろなブログを見てると、普段は閉じていて、クリックすると開くような技を使っている方が多く見受けられます。
これをアコーディオンパネル（閉開式コンテンツ）と呼ぶそうです。
アコーディオンパネル（閉開式コンテンツ）の設置方法
アコーディオンパネルを設定するには、いくつかの手順が必要になります。
- JQuery を記述する
- 動かすためのコードを書く
- 記事自体を HTML で編集する
- デザインCSS で見た目を良くする
JQuery の部分は私もまったく理解していません。
以下を「カスタマイズ」→「ヘッダ」→「タイトル下」に貼り付ければ良いです。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
※ 似たようなコードが既にあればコピペの必要はありません。
次に動かすためのコードを「カスタマイズ」→「フッタ」にコピペします。
<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>
実際に表示・非表示を切り替えたい部分を以下のように書きます。
<div class="acodion-panel">
<p class="acodion-title">ここが開閉式コンテンツのタイトル</p>
<div class="acodion-content">
<p>非表示になる内容</p>
<p>非表示になる内容</p>
<p>非表示になる内容</p>
<p>非表示になる内容</p>
<p>非表示になる内容</p>
<p>非表示になる内容</p>
<p>非表示になる内容</p>
</div>
</div>
書きますと言ってますが、実際にはコピペで、赤字の非表示になる内容の部分だけを書き換えていけば OK です。
表示・非表示の切り替えはここをクリック
非表示になる内容
非表示になる内容
非表示になる内容
非表示になる内容
非表示になる内容
非表示になる内容
非表示になる内容
これでとりあえず、表示・非表示の切り替えはできるようになります。
最後にデザイン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;
}
これで少し見栄えが良くなります。
偉そうに書いてますが、今回のカスタマイズもすべてコピペです。
今回は、こちらのブログを参考にさせて頂きました。
【はてなブログ】開閉式コンテンツ(アコーディオンパネル)でネタバレとかの表示・非表示を切り替える！ - クリアメモリ
ありがとうございました。
デフォルトで非表示になるハズなのですが、その部分がうまくいってません。
何かお気づきの方はアドバイス頂けると助かります。
↓ ランキングに参加しています。よろしければポチッとして下さい。
