元CAバンビのずぼら日記

元国際線乗務員の情報発信ブログ。海外、旅行、料理、ワイン、美容のお話など。

もくじカスタマイズ@はてなブログ★(解説付き)

皆様、こんにちは!元CAのバンビです。
自分用メモです。

今日は、はてなブログの〜もくじ〜をカスタマイズしました!!!

 

↓↓こんな風にしたい!

f:id:zuboraca:20180316212242p:plain

基本的には、こちらのid:kimixさんのコードを使用してます。
オリジナルはこちらです!!!


ただ、コピペした時に自分のテーマだとデザインが少し崩れちゃったので、直し方を探したら、他にも困っている人がいたので情報共有&あと自分がすぐに忘れちゃうのでメモめも♡

 

まず、kimixさんのコードをコピペすると(自分のテーマだと)こんな風に三角がはみ出してしまう。本当はピンクの逆三角は枠の中に入らないといけない...

f:id:zuboraca:20180316123333p:plain

  

直し方を公開している方も何人かいらして、こちらなど→はてなブログの目次をカスタマイズする方法まとめました。 - 本と仕事のすちろぐ



私が試したのは別の方法。

(あくまでもオリジナルはkimixさんのコードです。私はコードとか良く分からないので、何回も数値などを変えて、どこがどこに対応しているか、などを調べて変更しているだけなので、悪しからずご了承くださいませ...)

▼のズレ
kimixさんのコードは「postion: absolute;」で絶対値で指定になっています。「left」で左からの絶対値で▼の位置を指定しているため、テーマによってはズレてしまうのかなー?と思って
試しに「postion: relative;」(相対値)にして、「left」の数値を0にしたら、文字のすぐ前に▼が来た。そのままだと文字に▼がくっつき過ぎなので「-0.5em」でやったら、ちょうど良い感じになりました!


その他の変更点
❤︎枠を点線にしました。「dashed」
❤︎文字の下線を点線に。「dotted」
❤︎スマホで見ると枠が右寄りになってしまうのを「margin 0 0 0 0;」を使って枠の外側に余分な空白が入らないようにした。
❤︎オリジナルでは「h1」しか表示しないようになっていたが、それ以外も表示したかったので、その部分は削除した。

 
一応、自分で直したコードを貼っておきますが、何回も言うようですが、オリジナルはkimixさんです。
kimixさんは素敵なカスタマイズのコードをたくさん記事にされていますので、ぜひ参考にされるとよいと思います。

/*--------------------------------------
  もくじ
--------------------------------------*/
ul.table-of-contents {
  position: relative;
  font-size: 12px !important;/*文字サイズ*/
  border: 1px dashed #fac !important;
  padding: 1em 1em 1em 1.5em; !important;
  margin: 0 0 0 0;
  color: #999 !important;
  display: inline-block;
  background-color: #fff;
}
ul.table-of-contents:before {
  content: "[  contents ]"; /* お好きな文言に変更してください */
  display: inline-block;
  margin: 0.2em 0em 1em;
  padding: 0.2em 1em;
  font-weight: bold;
  background-color: #f5f5f5;
}
ul.table-of-contents a:after {
  display: none !important;
}
ul.table-of-contents li a,
ul.table-of-contents li a:visited {
  color: #999 !important; /* リンク文字の色 */
  text-decoration: none; /* リンクの下線あり・なし */
  border-bottom: 1px dotted #fac;
}
ul.table-of-contents li a:hover {
  color: #bac !important; /* リンクにマウスを重ねた時の色 */
}
ul.table-of-contents li {
  margin: 0px 0px 0px 0px !important;
  line-height: 1.5;
  padding: 0;
  list-style-type: none !important;
}
ul.table-of-contents li:before {
  content: "❤︎"; /*お好きな記号に変更可能です*/
  position: relative;
  left: -0.5em !important; /*左端からのアイコンまでの距離*/
  color: #fac;
}

/*------------もくじ------------*/

 
一応、いつものテキトー解説♡

貼り付けたけどデザインが崩れる場合は、下記の数字などを参考に変えてみてください。ちなみにコードに関しては、調べたことを載せているだけで、私はあまりよくわかってませんので、ご了承くださいませ m(_b_)m

f:id:zuboraca:20180316204344p:plain

f:id:zuboraca:20180316204809p:plain

  

目次カスタマイズ色々リンク

コードのオリジナルはこちら。


参考にしたページ★今回もたくさん、勝手にありがとうございました!

はてなブログのスマホデザインを初心者がカスタマイズしてみた。 - Enjoy!America

【CSS】コピペするだけ!「目次」をカスタマイズする方法 - えむしてっく

【はてな】目次のカスタマイズでデザインが崩れるときの対処方法 – さめって参る!

はてなブログの目次をカスタマイズする方法まとめました。 - 本と仕事のすちろぐ

スマホ対応!はてなブログの目次を見やすくカスタマイズしよう - えふじん