日刊ドンキーinfo

元プログラマが語る…ジャンプ系のマンガ・ITガジェット・睡眠について!

【はてブログ向け】目次の枠付けがうまくいかない人への忘備録

スポンサーリンク

 f:id:necDK:20160202202102j:plain

 

目次記法の導入で、僕の貴重な3時間がつぶれたので…これから目次をつけたいと思っている人のために、苦戦して貴重な時間をつぶさないためにここに忘備録をつけさせていただく。 

ハイパーざっくり書くので質問のある方はコメントをください。あるいは自分で調べて(鼻ほじ)

 

 

 

導入しようと思った経緯

通常の雑談スタイルの記事とかだと必要ないけど、目次がついてるの恰好よくないか?しかも、見やすそう。

というか、目次と見出しのデザイン決まればテンプレート化して、自動入力させたらブログの中身がいまいちでもまとまって見えて更新しやすくなるかも…。

 

でも、あの恰好いい目次の作り方がわからん…

 

そうだ調べよう。

 

 

参考サイトにしたサイト

そう調べたら簡単にでてくるんですよね。

はてなブログ目次記法についてはすでにあらゆる人がやっていて、僕が語ることは少ない。まずは、参考にさせていただいたサイトを貼らせていただく。

 

 

www.yukihy.com

 

www.bunoshi.com

 

上記、二つのサイト様ともにソースが貼られていて、CSSにコピーするだけで枠のついた目次が作成できるようになる。

しかし、僕はここから問題が発生したので、ここに忘備録として書かせていただく。

皆様の貴重な時間を減らさないために!!

 

問題点

上記二つのブログサイト様のCSSソースを張り付ければだいたいの方が、目次を恰好よく番号つき枠付きで 、作成できたかと思います。

しかし、僕の場合は容易に使うことができませんでした。

 

f:id:necDK:20160202200143p:plain

 

そう、上記のように表示されてしまったのです。 

CSSソース貼るだけで楽々らくちん!先人の知恵すげー!って思ってたら、罠が発生。

CSSソースを理解してから使わなければならない事態に…

 

 

このような事態が発生した理由

CSSソース内のpaddingという子要素…枠内の空白について定義する部分が効かないためにこのような事態が発生しました。

では、なぜ効かなかったのか。

 

ブログのテンプレート内で先にpaddingという要素を定義しており、CSSでは先に定義されている要素が優先されるため、目次記法に使おうとしているpaddingについては無効じゃぼげぇえ!

 

と、無効化されてしまったのです。

 

 

解決方法

ブログデザインを変える方法も一つの手かと思います。しかし、面倒くさい…少し気に入ってきたブログデザインを変えるのも釈然としてません。

先に定義されてしまったなら、再定義を施せばばっちり解決!!

 

ulのpaddingを定義されているので、ulのpaddingを再定義です。つっても、難しい話しできませんし、ulがなんのタグなのか理解してません。理解してなくてもできるのです。

以下、赤い部分がulのpaddingを定義してるところです。

下のcssソースを

【ダッシュボード】→【デザイン】→【カスタマイズ】→【デザインcss】に張り付けることで、目次に枠がつけることができるようになります。


/*--- 目次記法 ---*/

/*--- ブログデザインのCSSで先に定義されているためpaddingを再定義 ----*/

ul.table-of-contents{
padding: 10px 10px 20px 40px;
}
/*--- 目次の番号 ---*/
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
/*--- 目次記法の設定 ---*/
.table-of-contents {
border: 1px solid #e4e4e4;
border-radius: 5px;
font-size: 90%;
}


/*--- 小見出し非表示
.table-of-contents ul ul{
display: none;
}
---*/
/*--- 目次と名前をつける ---*/
.table-of-contents:before{
content: "目次";
font-size: 120%;
}

 

小見出しに番号つけたり、小見出しも目次に表示したい場合はコメント化を解除してください。「/*--- ---*/」に囲まれているとコメント扱いになります。

まとめ

一部自動テンプレート…見出しの自動化などがこれでうまくいくようになりました。

いままで、自分で目次などを書いていたのでめちゃくちゃ面倒だったので、これで少し書きやすくなるかもしれません。

 

アフィリエイトなども僕の場合、一部自動化してますが勝手に張り付けるようになると貼り忘れたりしなくなったりカスタマイズしやすくなるので、そのあたりもう少し調査していこうと思います。

 

 

 ※スマフォを見たところスマフォ対応されていませんでした。2016年2月3日 am3時

 

 終わり