はてなブログの作り方（目次） - 多忙な社会人がブログ始めてもこの程度

f:id:wat-shiota:20180817201553p:plain

目次のデザインについて
- 目次のCSSについて

ブログを初めて３日が経ちました。

まだ３日かよって感じですが・・・。

PVは安定のゼロです（笑）

しかし、ページの整理整頓は順調に進んでいます。

安定するのはいつのことやら。

ですが、時間を効率的に使うにはもってこい。

本日は目次の付け方に書いていきます。

目次のデザインについて

目次のデザインについては、まとめて下さっている方がたくさんいるのでここでは実際に私が使っているものだけ紹介します。こういうやつです。

その他の目次デザインはコチラを参考にして下さい。

私もこのブログを参考にしております。

ありがとう御座います＾＾

　　　　　　コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに

他にもたくさん How To 系の記事を載せておられます。

私も相当参考にさせて頂いておりますので非常にオススメです。

目次のCSSについて

コチラが実際に私が使用している目次のCSS。

まだ勉強し始めて２日目なので間違っていたらすみません。

/*--------------------------------------------------*/
/*【目次を編集する　　　　　　　　　　　 */
/*--------------------------------------------------*/
.table-of-contents {
border: 1px solid #7db4e6;
padding: 1.2em 1em 1em 2em;
margin: 0.5em 0 1em 0;
position: relative;
background-color: #fff;
font-size: 80%;
border-radius: 3px;
}
.table-of-contents:before {
content: "Index";
display: inline-block;
position: absolute;
top: -0.8em;　/*上の余白を変更*/
left: 0.3em;　/*左の余白を変更*/
background: #fff;　/*背景の色を選択*/
padding: 0 0.5em;　/*表示する位置を変更*/
font-weight: 700; 　/*フォントの太さを変更*/
color: #7db4e6;　/*フォントの色を変更*/
}
.table-of-contents ul ul{
display: none;/*3階層以降を消す*/
}
.table-of-contents li,
.table-of-contents ul{
list-style-type: none;/*表示一時的に消す*/
}
.table-of-contents li:before {
content: "＊"; /*記号に変更*/
color: #b0d7fd;
padding-right: 0.2em;
font-size: 100%;
vertical-align: text-left;
margin: 2em 0 0 0;
}
.table-of-contents ul{
font-size: 80%;/*h3以降小さく*/
}
.table-of-contents a{
color:#444;
text-decoration: none;
}
.table-of-contents a:hover {
color: #ccc ;/* リンクにマウスを重ねた時の色 */