Memoranote

興味のあること、感じたこと、気になったこと、体験したこと、手に取ってみたことを記したブログ

【はてなブログ】「UnderShirt」目次にアコーディオンを実装して折りたたんでみた

f:id:Kiwham16:20190201095903j:plain

途中でページを離脱する事無く、ページを上から下まで読んでもらうためには、目次を用意して、アンカーリンクを付与するのはとても大事。
特に長いページなんかでは、上から下までユーザ側にスクロールをさせてページを閲覧させてしまうようでは、ページの使い勝手を意味する「ユーザビリティ」としてはあまり良いとは言えないので、ブロック毎に行き来出来るような仕様は是非用意しておきたい所。
Google Analyticsでいう、直帰率や離脱率に大きく関わってくる事項です。
目次があることによって、そのページでどのような項目について言及されているかが、ある程度分かるという点でもその重要性は明白です。

はてなブログは「目次」パーツが存在しており、「見出し」パーツとして用意した要素に対して、自動的に目次の一項目として用意してくれるのは、投稿者側であれこれやらなくても良い分、とても有難い機能です。

ただ、あまりにも見出しを用意すると、目次自体が少々長くなりすぎて、どうなのかしらとおネエみたいになってしまったので、今回ちょっとカスタマイズしてみた、そのお話。

実装前のコード調査

ブログを構築しようとする時に比較されるのが、「はてなブログ」や「アメブロ」などのブログサービスや、「WordPress」などに代表されるCMSのパッケージです。
WordPressに比べると、はてなブログは構築のし易さがある反面、ソースコードの自由度はあまりないので、デザインを変えたいなと思った時に、そのデザインに応じたタグの構成ではなかったりすると、カスタマイズのために、どうしてもjsなどを使ってDOMを無理矢理修正する形に持って行かざるを得ません。
エリアによっては直接タグを追加出来たりするエリアもありますが、目次はそれができないんだよね。

つまり何が言いたいかというと、

目次のDOM構成ヤバない!!!???

HTML齧ったことある人なら分かると思いますが、「目次」ってテキストは流石にpか何かで囲われてんのかなと思ったら、まさかのulのbefore要素っておい!!
contentプロパティでテキスト入れちゃってるもんだから、まいっちんぐマチコ先生(死語)ですよこれはもう。
いや、contentプロパティは便利なんだよ。ね。CSS側でテキスト入れられちゃうんだから。

ははーん、そう来たかー。とか言ってる場合じゃない。

ぶっちゃけ目次自体を全て自分で構成すれば、タグも自由に改変できますが、今回は元々ある「目次」パーツを最大限に利用しつつカスタマイズします。

今回やること

f:id:Kiwham16:20190201104430j:plain

目次には元々開閉は付いていないのですが、目次の横に、スマートフォンの右上にメニューを開閉させるために良く存在している、「ハンバーガーボタン」を付けて、こいつをクリックすると、目次が開いたり閉じたりできるようにします。
デフォルトでは閉じておきます。

修正箇所

今回はcssjavascript(jQuery)を使用して実装を行います。

javascript(jQuery)

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
//目次カスタマイズ
<script>
$(function(){
  const TABLECONT = $(".table-of-contents"),
        SWITCHCLASS = "open";
  $(TABLECONT).wrap('<div class="tableWrap"></div>');
  $(".tableWrap").prepend('<p class="tableButton"><span></span></p>');
  $(TABLECONT).find("li").hide();
  $(".tableButton").on("click", function(){
      $(TABLECONT).find("li").toggle();
      $(this).find("span").toggleClass(SWITCHCLASS);
  });
});
</script>

2行目のjQueryのライブラリファイルの読み込みに関して、既に他で読みこんでいるという場合は重複して読みこませる必要はありませんので、3行目以降のみをコピペして下さい。

こちらを「ダッシュボード」→「デザイン」→「カスタマイズ」→「フッタ」内に追記して下さい。

css

/*-------------- 
目次
----------------*/
.tableWrap {
position: relative;
}
.tableWrap .tableButton {
position: absolute;
top: 17px;
left: 18px;
margin: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #234777;
cursor: pointer;
}
.tableWrap .tableButton span {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 2px;
margin: -1px 0 0 -5px;
background: #ffffff;
transition: .3s;
}
.tableWrap .tableButton span::before,
.tableWrap .tableButton span::after {
display: inline-block;
content: "";
position: absolute;
top: 50%; left: 50%;
width: 10px;
height: 2px;
margin-left: -5px;
background: #ffffff;
transition: .3s;
}
.tableWrap .tableButton span::before {
margin-top: -6px;
}
.tableWrap .tableButton span::after {
margin-top: 4px;
}
.tableWrap .tableButton span.open {
background: transparent;
}
.tableWrap .tableButton span.open::before,
.tableWrap .tableButton span.open::after { margin-top: 0; }
.tableWrap .tableButton span.open::before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.tableWrap .tableButton span.open::after {
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.entry-content .table-of-contents::before {
padding: 0 0 10px 40px;

こちらを「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインcss」内に追記して下さい。

内容を簡単にお伝えします。
説明の関係上、行数が前後するのはご了承ください。

7~17行目…こちらでボタンの下地にある青い丸を構成しています。

18~28行目…今回は三本線も×も全てCSSで構成しています。こちらでボタンの三本線のうちの1本を構成。その後の29~46行目で上と下の線をそれぞれ構成しています。

47~49行目47行目以降は全て展開時のデザインです。こちらでは三本のうちの真ん中の線を消す処理をしています。元々用意されている三本の線の内、上と下の線をそれぞれ使って×を構成するため、真ん中の線は展開時には不要となります。

52~58行目…こちらでは元々横置きで用意していた上下の線の角度を変えることによって、×印に変更しています。

まとめ

項目を展開時に上からバラバラバラっと蛇腹のように展開出来れば良かったですが、コードの構成上、手間が結構かかるので、今回はパッパッと表示非表示する形に留めておきました。
目次自体のデザインももう少しカスタマイズしようかと思いましたが、こちらはまた後追いで。
カスタマイズした折には、記事に起こす予定です。