wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

はてなブログの目次のスタイルをカスタマイズ

今更ですが、比較的文字数の多い記事に目次をボチボチ付けてます。

f:id:wanichan:20180401092226p:plain

これってはてな記法ですよね? 私は「見たまま」モードにしてるんですけど。

一応ググってみたら、はてなブログの目次のスタイルのカスタマイズについての記事がいろいろヒットしていきますが、どれもうまくいかないという感じ?

ちなみに、このはてなブログのテーマはNishikinoを適用し、後で色とかをいぢってます。

 

デスクトップのデザインCSS

しょうがないので、以下の記事の目次部分がどのようにHTML出力されているのか確認してみました。

blog.wanichan.net

<ul class="table-of-contents">
<li><a href="#はてなブログのいいところ">はてなブログのいいところ</a></li>
<li><a href="#はてなブログを追い出される理由">はてなブログを追い出される理由</a></li>
<li><a href="#自分から結果を求めてはいけない">自分から結果を求めてはいけない</a></li>
</ul>

 すると、ulタグに .table-of-contents スタイルが適用されているんですよね。

ふつうに .table-of-contents プロパティを作って、マージンを指定しても私のはてなブログではうまくいきませんでした。既定で左マージンが存在し、背景色がそこから始まるみたいな。箇条書きリスト行頭記号がその背景エリアから外れてしまうんですよ。

まあ、リストの左マージンをデフォでmargin-left:0 とかにしていたらそういうことは起きないんですけど、たまに番号付きリストとか使ったりするんで、デフォでは左マージンは必要なのです。

仕方がないので以下のように指定。ul.table-of-contents にしないとダメでした。

f:id:wanichan:20180401093519p:plain

現在のCSSは以下のように変更しました。

ul.table-of-contents{
background: #fffcff; /*背景色*/
border:solid 1px #fcf;
padding: 0.5em;
margin: 1.5em 0em;
}
.table-of-contents:before{
content: ":::: I N D E X ::::";
display: block;
text-align: center;
font-weight:bold;
color:deeppink;
margin-bottom:1em;
padding-bottom:0.5em;
border-bottom: dotted 2px #fcf;
}
.table-of-contents li{
margin-left:2em;
}
.table-of-contents a:link{
text-decoration:none;
color:#999;
}
.table-of-contents a:hover{
text-decoration:underline;
}

スマートフォン用のデザインCSS

あとは色とかをカスタマイズするだけでどのブログテーマでもOKになるはずです。

シンプルですけど、これでいいんですよ。はい。

現状、スマホのタイトル下ではこんな感じにしてます。

f:id:wanichan:20180401093902p:plain

<style type="text/css">
.table-of-contents ul{
margin-left: 0;
padding-left:0;
}
.table-of-contents:before{
content: ":::: I N D E X ::::";
display: block;
text-align: center;
font-weight:bold;
color:#999;
border-top:dotted 1px #ccc;
padding:0.5em;
margin:2em 0em 0em -1.5em;
}
.table-of-contents:after{
content: "";
display: block;
text-align: center;
border-bottom:dotted 1px #ccc;
margin:1em 0em 2em -1.5em;
</style>