MRKなんでも記録

MRKなんでも記録 〜 好奇心・チャレンジ → synapse 増やそう

MRKなんでも記録

MENU

ブログの目次をカスタマイズしたく、先人の跡を追う毎日

スポンサーリンク

f:id:r2okarain:20190711104722p:image

 

はてなブログの目次を考える 

 

目次に悩んで数日、数週間

気に入ったのが見つかっても、階層が有りすぎとか、枠が大きすぎるとか・・・

要は、シンプルデザイン・大見出しだけ・目次自体がセンター・CSSが少ない等々

 

どれもCSSを触れるなら、すぐ出来そうな感じ。しかし悲しいかな、全くの初心者

 

これは可愛すぎるし、空間を減らしたい

 

ここまででも相当数の目次に挑戦
失敗(出来ない)が多く、成立までいかない

f:id:r2okarain:20190418041124j:image

シンプル目次ができた・・が、まだ変更したい  

 

f:id:r2okarain:20190418041207j:image

 

 

  • これを、幅を狭く字の数に合わせて狭まるようにしたい → やはり同じ幅が良い
  • 目次本体をセンター配置したい→辞めた
  • 背景の色を変更・字の色も変更
  • 字の下の線は大見出しだけ 
     

 

/* ===============目次カスタマイズ============== */
.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;/*背景色はここから変更*/
}

  

 

枠を付ける復習 

 

枠に入れるには、以下をコピーしてHTML編集画面にペースト
編集見たまま画面に戻り、編集する 

<div style="border: 1px solid #cccccc;  border-radius: 10px; padding: 10px; width: 80%;">
<p>ここに本文を入れる</p>
</div>

 

こればかり使っている・・・と言うより、これしか知らない(笑)
枠の中の背景色を変えたいものだ
なんかコピペで出来そうな感じもするが・・・