はてなブログの目次を考える
目次に悩んで数日、数週間
気に入ったのが見つかっても、階層が有りすぎとか、枠が大きすぎるとか・・・
要は、シンプルデザイン・大見出しだけ・目次自体がセンター・CSSが少ない等々
どれもCSSを触れるなら、すぐ出来そうな感じ。しかし悲しいかな、全くの初心者
これは可愛すぎるし、空間を減らしたい
ここまででも相当数の目次に挑戦
失敗（出来ない）が多く、成立までいかない
シンプル目次ができた・・が、まだ変更したい
- これを、幅を狭く字の数に合わせて狭まるようにしたい → やはり同じ幅が良い
- 目次本体をセンター配置したい→辞めた
- 背景の色を変更・字の色も変更
- 字の下の線は大見出しだけ
/* ===============目次カスタマイズ============== */
.table-of-contents {
border: 1.5px solid #191970;
padding: 20px 10px 20px 40px;
list-style-type: decimal;
border-radius: 5px;
font-size: 17px;
}
.table-of-contents:before{
content: "目次";
font-size: 20px;
}
.table-of-contents{
background: #efefef;/*背景色はここから変更*/
}
はてなブログ「Brooklyn」導入とhtml/CSSカスタマイズ - ネットde副業
枠を付ける復習
枠に入れるには、以下をコピーしてHTML編集画面にペースト
編集見たまま画面に戻り、編集する
<div style="border: 1px solid #cccccc; border-radius: 10px; padding: 10px; width: 80%;">
<p>ここに本文を入れる</p>
</div>
こればかり使っている・・・と言うより、これしか知らない(笑)
枠の中の背景色を変えたいものだ
なんかコピペで出来そうな感じもするが・・・