スポンサーリンク

ブログカスタマイズ  見出しと目次自動生成をつけました。

虎寅です。

見出しのデザインを変えたい。目次をつけてみたいと思いブログカスタマイズを行いました。




見出しデザインの変更

参考ブログ

ゆきひー(id:ftmaccho)さんの下記記事を参考に見出しを変更
www.yukihy.com



変更内容

大見出しをこちら

.entry-content h3{ //大見出し
color: #000000;
background: #e07000;
padding: 15px 15px;
}

中見出しをこちら

    .entry-content h4{ //中見出し
    color: #000000;
    padding: 10px 15px; 
    border-left: 10px solid #e00000;
    border-bottom: 1px solid #e00000;
    }

に変更させていただきました。


目次の自動生成設定

参考ブログ

そら@soraさんのブログを参考にさせていただきました。

kumoaozora.hatenablog.com


変更箇所

数字の記載方法をいじれたらと思いいろいろいじってみた結果現在の形へ。
CSSをいじるのは初めてだったのでなぜこうなったのかすらわかりませんがなんかうまくいった。
一度CSSやHTMLは勉強したいな。


変更したソースコードがこちら。
デザイン→カスタマイズ→CSSデザイン

 /* 目次 */
.entry-content .sectionList {
  background: #F6F6F6;
  margin: 20px 0;
  padding: 10px 15px;
  border: 1px solid #CCC;
}
.entry-content .sectionList h5 {
  font-size: 110%;
  margin: -5px 0px;
  border-bottom: 1px dotted #999;
}
.entry-content .sectionList ul {
  counter-reset: section;
  list-style-type: none;
}
.entry-content .sectionList > li {
  margin-top: 10px;
  margin-left: 0;
}
.entry-content .sectionList ll:before{
  counter-increment: section;
  content: counters(section, ".") " ";
} 


スクリプトのカスタマイズはそら@soraさんのブログをそのままコピペしただけですので、そちらをご参考ください。


今後のカスタマイズ

 今後のカスタマイズですが、今やってみたいとおもっているのはパンくずリストの導入、ドロップダウンリストの導入等ですね。
色々といじるのがとても楽しいです。

それではまた。



ちなみにこの記事は初予約投稿です。