#171 【はてなブログ改修】アコーディオンを実装し、新台カレンダー記事内にアーカイブを作成！
どうもねこだまし（@Nekodamashi_p）です。
今回は改修日記と題して新ブログの記事内で『アコーディオン』を実装してみたので、その時の様子をお届けしたいと思う。まあ改修とは言ってみたものの基本的にはコピペのみでできる簡単改修だ。
■改修の目標
●『アコーディオン』を実装し、導入日が過ぎた機種をアーカイブ化する
今回は新ブログのメインコンテンツの1つとして随時更新中の『新台導入カレンダー』の改修回となる。カレンダーという事で日・月を追うごとに掲載している情報を更新していかなければならないのだが、ただ単に古い情報を消してしまうとページの情報量という観点でSEO的にマイナスに働く可能性がある。
そこで『アコーディオン』の出番だ。『アコーディオン』を実装する事で見た目上はコンパクトに整理できつつ、ソース上にはしっかりと情報として保持する事ができる。
デメリットとしては『アコーディオンのボタンを押して開かないとコンテンツが表示されないので気づかれにくい』という点が主となるのだが、今回の場合はあくまでアーカイブの情報を収納するのに使用するため、この点はさほど問題にはならない。
■実際の改修内容
●『アコーディオン』の実装手順
それでは早速『アコーディオン』の実装手順を紹介するのだが、使用するのは『html』『css』『jquery』の3つ。ねこだましの知識ではこれらをゼロベースから書くことはできないので、今回は以下のサイトを参考に進める事とした。
①htmlに以下のコードを記載する。
<div class="acd-box"> <p class="acd-title">コンテンツタイトル</p> <div class="acd-content"> <p>コンテンツの内容</p> </div> </div>まずは記事編集画面にて上記htmlを記述し、一時保存する。
②『デザイン』→『カスタマイズ』→『デザインCSS』に以下のCSSをコピペする。
/** アコーディオン**/
.entry-content .acd-content p{
margin: 0;
padding: 10px;
}
.acd-box{
box-sizing: border-box;
background-color: #f6f8f9;/*コンテンツボックスの色*/
border: 1px solid gray;/*ボックスの線の色*/
border-top-left-radius: 5px;/*左上の角を丸くする */
border-top-right-radius: 5px;/*右上の角を丸くする */
margin-top: 30px;
margin-bottom: 30px;
}
.acd-title{
background-color: #f3cece;/*タイトルボックスの色*/
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 5px 15px 5px 15px;
cursor: zoom-in;/*マウスを乗せたときのカーソル形状*/
margin-bottom: 20px;
}
/*タイトルホバー時*/
.acd-title:hover {
background :#e9a5a5;
}
.acd-content {
display: none; /*コンテンツを閉じておくため*/
background-color: #f6f8f9;
padding-left: 10px;
padding-right: 10px;
}
/*アイコンを表示*/
.acd-title:before {
padding-right: 8px;
content: '\f039’; /*アイコンフォントから*/
font-family: "Font Awesome 5 Free";
}radiusやmarginをはじめ、background-color等をこの時点でいじっても良いのだが、完成イメージが見えない以上やりづらいと思うので、基本的にcss周りをいじるのは全行程を完了した後をおすすめする。
③『設定』→『詳細設定』→『headに要素を追加』に以下スクリプトをコピペする。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>上記はjQueryを呼び出すためのスクリプトとなる。
④『デザイン』→『カスタマイズ』→『フッタ』に以下スクリプトをコピペする。
<script>
$(window).on("DOMContentLoaded", function(){
var $title = $(".acd-title");
var $content = $(".acd-content");
$title.on("click", function(){
var indx = $title.index($(this));
$content.eq(indx).slideToggle(300);
});
});
</script>以上4つの工程でアコーディオンの実装は完了だ。こんな感じで実装自体はコピペだけで完了できる簡単作業。あとはcssを調整して自分好みの『アコーディオン』に仕上げていくだけである。
●『アコーディオン』デザインの調整
デザインに関しては基本的に自分のサイトに合わせた配色・構成に仕上げていく形となる。実装時は上記のようなデザインになると思うのだが、デフォルトではradiusが効いているため、ねこだましの場合は記事中の雰囲気に合わせてradiusをまるっと削除。
すると上記の通り角の丸みがなくなり、角ばったボタンに。記事内で使用するボタンが総じて丸みを帯びている場合は、それらボタンに合わせてradiusのpxを調整すると統一感が生まれて良いかと思う。
また実装時はmargin-topとmargin-bottomがそれぞれ30pxずつ取られているため、ここも自分のサイトのmarginの取り方に合わせ、削るなりして調整する事をおすすめする（30pxは少々広めな印象）。
htmlのコードだが『はてな記法』で編集する場合、下手にコードを改行するとその分余計なスペースが生まれるため、この点も要注意だ。
ボタンの色味に関してはcssを繰り返し更新して確認するのではなく、GoogleChromeの検証モードを使用して、随時cssを改修しながらチェックする事をおすすめする。（右クリック→検証で検証モードを展開）
検証モードでは疑似的にcssの調整ができるため、cssをいじる際は基本的には検証モードでテストを行ってから、そのコードを本番に充てるようにすると良い（不慮の事故でcssをぶっ壊す危険性が減る）。
という事で今回はアーカイブにつきそこまで目立たせるものでもないので、ボタン自体は目立たない配色に変更し、加えて閉会できる事が直感的にわかるよう『▼』を入れてみた（margin-topとmargin-bottomは20pxに変更）。
その他にボタンのホバー（タップ）時の色も固定に変更し、後はhtmlの<div class="acd-content"> <p>の中に任意のコンテンツを記述すれば完了だ。15分程でできた作業であったが、概ね想定通りの出来となり満足（何ならこの記事を書く方がよっぽど時間がかかっている）。
簡単に実装できるかつ、アコーディオンに関しては色々と用途がある素材なので、実装しておくに越した事はないと思う。今回紹介した内容はあくまで『はてなブログ』用となるが、wordpressにしても概ね応用がきく内容かと思うので、ぜひ試してみていただければと思う。
今回実装したアコーディオンの実際の挙動は上記ページをチェック！
👛ねこだましおすすめのパチスログッズ👛
↓記事が面白かったり参考になったという方はぜひ1回ポチっていただけると嬉しいです！（ブログ村ランキング参加中！）
前回のブログはこちら！
＜#170 ブログ関連雑記【noteについて】新ブログ移行完了！今後noteではブログ運営の小話を更新します＞
Twitterでは日々のプチ稼働などをお届け！
良かったら是非フォローをお願いします！
執筆：ねこだまし
連絡先：https://twitter.com/Nekodamashi_pこの記事が気に入ったらサポートをしてみませんか？