omitsublog

自分がいいと思ったもの、チャレンジしたこと、試したものなどを紹介してくブログ。いろんな分野のハンドメイドに挑戦中。クズ男ガチャの引きなら誰にも負けない自信あり

ど素人のブログカスタム [目次編]

こんにちは。おみつです。

ずっとやり方がわからなくて放置していた、目次を可愛く表示させてみましたのでご紹介します。もうすでにこの記事にも表示させているこちらです↓

 

 

 

目次をつける

そもそも、はてなブログで目次を表示させるやり方はめちゃくちゃ簡単で、ブログ更新時に目次を表示させたいところで、PC版では目次アイコンを押す、スマホ版アプリ版では[:contents]と入力すれば、その位置に見出しが目次として表示されます。

ですが、そんなことも分からなかったど素人の私は今まで目次をつけることなく、ブログを更新し続けてきました。調べてみたら、そんな簡単に目次ってつけれるのー…って衝撃でした。

でもせっかく目次をつけるなら、見やすくて可愛いほうがいいよねってことでカスタマイズしましたのでご紹介します。

 

 

 

CSSコード

 

可愛い目次にカスタマイズするために、いろんなサイトを巡りました。

今回はこちらのブログを参考にさせていただきました。ありがとうございます。

 

kimix.hatenablog.com

 

 私のブログは全体的にピンクっぽいデザインなので、こちらのコードをお借りしました。

 

 ul.table-of-contents {
font-size: 12px !important;/*文字サイズ*/
border: 1px solid #eee !important;
padding: 1em 1.5em 1em 2.25em !important;
color: #999 !important;
display: inline-block;
}
ul.table-of-contents:before {
content: "[ も く じ ]"; /* お好きな文言に変更してください */
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; /* リンクの下線あり・なし */
}
ul.table-of-contents li a:hover {
color: #bac !important; /* リンクにマウスを重ねた時の色 */
}
ul.table-of-contents li {
margin: 5px 0 10px 10px !important;
line-height: 1.5;
padding: 0;
list-style-type: none !important;
}
ul.table-of-contents li:before {
content: "▼"; /*お好きな記号に変更可能です*/
position: absolute;
left: 1.7em !important; /*左端からのアイコンまでの距離*/
color: #fac;
}
ul.table-of-contents ul li,
ul.table-of-contents li ul {
/* H1のみ表示させる */
display: none !important;
}

 

引用元:はてなブログの目次をシンプル&おしゃれにカスタマイズ / サンプルCSS付き! - THE LITTLE ESCAPE

 

 

 

ブログにコードを貼る

 載せてあるコードをそのままコピーさせていただいて、ブログに貼り付けます。

はてなブログ>デザイン>スパナマーク>デザインCSSに貼り付け。

 

 

コード内に分かりやすく日本語で説明を書いてくれていますので、/ から / までを全て削除します。

そして、自分なりに編集を加えました。

 

 

アレンジ編集

 

目次内に大見出しと中見出しの両方を表示させたい場合

私は、目次内に大見出しと中見出しの両方を表示させたかったので、h1のみ表示させるためのコードは消しました。ココの5行を全て削除です↓


f:id:omitsublog:20181211132404j:image

 

 

 

” もくじ ” を ” index ”に変更

 

 

 

文字の色とサイズを変更

文字の色を少し濃くしたかったので、上から5行目のcolorと、”リンク文字の色”と説明があるcolorを#908484に変更しました。サイズももう少し大きいほうがいいなと思ったので、15PXに変更しました。上から2行目の”文字サイズ”の部分です。

 

 

 

・▼アイコンの位置を整える。

f:id:omitsublog:20181208155430j:plain

 

大見出しのみの表示が前提に作られているからなのか、私のブログデザインと相性が悪かったのかは分かりませんが、アイコンの位置がこのようになってしましました。▼が文字についてきてくれなくて、とくに中見出しとは離れてしまいました。

ちなみに、ハーブティとツボが大見出しで、タイム マーシュマロウ ジャーマンカモミールが中見出しです。

 

 

(見出しの文字位置が揃っていないのは、ブログで見出しを書く時に文字の前に空白をいれてしまっているからです。記事を編集して直しました。この画像でいうとハーブティとタイムの前に空白が入ってしまっています。)

 

 

で、この▼が文字と離れてしまう現象は、アイコンの位置設定が左端からの距離で決まってるからなんじゃないかな~と思いましたので”left: 1.7em ! important;”を削除しました。この部分↓



f:id:omitsublog:20181211140441j:image

 

これを削除した状態で変更を保存すると、こうなります↓

 

f:id:omitsublog:20181208155433j:plain

 

ついてきたけど、文字と重なった…。

でも、文字位置と同じ位置に来たってことは、どこかのコードが反映されてこうなっているのでは…??と思いました。ので、文字位置はそもそもどこのコードで決まっているのか考えました。

上から4行目の”padding: 1em 1.5em 1em 2.25em !important;” きっとこれだ!!と思ったので、 このコードをコピーして、もともと”left: 1.7em ! important;”が書いてあった位置に貼り付けました。そして変更を保存すると↓

 

f:id:omitsublog:20181208155431j:plain

 

キレイに並びました~!!

本当は”padding: 1em 1.5em 1em 2.25em !important;”を貼り付けた後、数字をいじっていかなきゃいけないんだろうなぁと思っていたのですが、なぜかいじらなくてもキレイに並びましたね…。なんでだかは分かりません…。なんで??

 

 

 

 

最後に

 最終的にコードは以下のようになりました↓

 

f:id:omitsublog:20181211132531j:plain

f:id:omitsublog:20181211132425j:plain



ですが、あくまでど素人の編集が加わっていますので、参考にするときは自己責任でお願いします。

 

 

今回、目次をカスタマイズついでに見出しも可愛くカスタマイズしたのですが、思ったより目次のことが長くなってしまいましたので、また次回、ご紹介させていただきます。

 

 

 

おみつ。