このブログのデザインをカスタマイズしてみた件 ④目次と「続きを読む」を追加してみた

↓これが目次です↓

このブログのデザインをカスタマイズしてみた件４回目！
目次があるとなんかカッコイイヨネ！
はてなブログには標準で目次機能がある
CSSで目次のカスタマイズをやってみる
「続きを読む」を追加
まとめ

このブログのデザインをカスタマイズしてみた件４回目！

今までこんなんカスタイマイズしてきました。

almemo.hateblo.jp

スタイルシート関係は②のあともどんどんいじっくていてCSSの行数は倍以上に。

そのうち更新版も書きたいとは思うけどまずは新要素から。

目次があるとなんかカッコイイヨネ！

ブログによっては先頭に目次が来るじゃないですか。

あれってなんか構造的に文章書いてるみたいでカッコイイじゃないですか。

ぼくのブログにも欲しいなぁということで実装することに。

はてなブログには標準で目次機能がある

当初はプラグイン的な手法でやろうかなと思ったんですが、調べていくうちにはてなブログ自体に目次機能があると知る。

というか「見たまま」編集のツールバーに普通にいた。

これを押すと目次を埋め込むための文字が出力される。

これをこのブログのテーマで表示すると自動的に見出しのテキストが展開されてこうなる。

非常にシンプルなulの階層構造。

まあこれはこれでアリかなとは思ったんだけど、スマホ版だとmargin/paddingが余計で狭くなるうえに見づらいことが判明。

ならばデザインいじくるかということで

CSSで目次のカスタマイズをやってみる

2回目のカスタマイズでCSSいじくったのと同じようにやる。

どこに設定するとか細かいところはそちらを見て。

almemo.hateblo.jp

HTMLを読んだりCSSを書いたりするWeb開発の知識は必要なので、それらが難しい方はこのページに書いてある方法は諦めてください。

まずは目次の構造を押さえる

目次全体はブログ記事クラス「entrty-content」内のID「table-of-contents」な ul なのでこれがベースになる。

.entry-content ul.table-of-contents {
}

大見出しはこの直下の li として配置されるのでこうなる。

直下を指定する > を入れないと中見出しとかにも適用されるので注意。

.entry-content ul.table-of-contents > li {
}

中見出しは大見出しの li の中に ul として配置されるのでこうなる。

.entry-content ul.table-of-contents > li > ul {
}

.entry-content ul.table-of-contents > li > ul > li {
}

このブログは中見出しまでしか使わないのでここまでしか設定してないけど、小見出しまで使う人は同様にもう一段階追加しておくといいかも。

.entry-content ul.table-of-contents > li > ul > li > ul {
}

.entry-content ul.table-of-contents > li > ul > li > ul > li {
}

目次の先頭に「目次」ってあるとなんかイイッ！

埋め込み目次の前に普通に「目次」って書いてもいいんですが、できるだけ楽にしたいので疑似要素で埋め込むことにした。

ついでに下線なども入れたいので表示も調整。

.entry-content ul.table-of-contents::before {
  content: "目次";
  display: inline-block;
  width: 100%;
  border-bottom: 3px double #119e4d;
}

こんな感じに表示されるようになった。

下線（border-bottom）を幅いっぱいにするには display と width の設定も必要。

項目は線で区切って字下げは最小限に

スマホで見たときとにかく見づらかったんですよ。

ぼくは見出しのテキストを長めに書く傾向があるので折り返しも入ってよけいにゴチャゴチャ。

幅が狭いんで左端のリスト記号や広めの字下げも邪魔！

デザインをバッサリ変えることに。

.entry-content ul.table-of-contents {
  padding: 1rem;
  list-style: none;
}

.entry-content ul.table-of-contents > li {
  border-bottom: 1px dashed #119e4d;
  margin: 2px 0;
}

.entry-content ul.table-of-contents > li > ul {
  list-style: none;
  margin: 0 0 5px 0.5rem;
  border-left: 1px dotted #119e4d;
}

.entry-content ul.table-of-contents > li > ul > li {
  padding-left: 0.5rem;
  border-bottom: 1px dotted #119e4d;
}

.entry-content ul.table-of-contents > li > ul > li:first-of-type {
  border-top: 1px dotted #119e4d;
}

大した事書いてないので、細かい説明はCSS解説サイトなど見てください。

表示するとこうなる。

リスト記号が無くなって字下げも小さめになったのでスマホ版でキツキツ感出ることなくなったかな。

全体のデザインも手を入れる

目次全体のデザインはそんなに手を入れなくてもいいかなと思っていたんですが、気づいたら飾ってました。

.entry-content ul.table-of-contents {
  border: 20px solid rgba(255, 255, 0, .8);
  border-width: 5px 0 5px 0;
  border-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, #119e4d 5px, #119e4d 10px) 10 0;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, .2);
  padding: 1rem;
  list-style: none;
}

レイアウトだけなら padding と list-style だけでいいと思います。

ここまでのを全部適用したのがこれ。