ウーパールーパーの智慧

ウーパールーパー、子供、学習、生活お役立ち情報など

ブログ記事の見出しのデザイン設定と目次のフォントを大きくする方法

ちょっと長いのですが、以下のコードを貼り付けることで、見出しを強調したり、目次のフォントを大きくすることができました。

f:id:MisaTamaki:20190319010609j:plain
 

目次変更後↓

f:id:MisaTamaki:20190316211232p:plain

 

この様に目次のフォントが本文と同じ大きさになっています。

 

見出し部分はこんな感じになりました。

 

見出し変更後↓

f:id:MisaTamaki:20190316211259p:plain

CSS

コードはこちら、デザイン>カスタマイズ>デザインCSS欄に追加します。

フォントや色のコードを変更することでマイナーチェンジできます。↓

 

 

/*目次*/

ul.table-of-contents {

font-size: 18px !important; 

border: 1px solid #c0c0c0 !important;

color: #999 !important;

display: inline-block;

}

ul.table-of-contents a:after {

display: none !important;

}

ul.table-of-contents li a,

ul.table-of-contents li a:visited {

color: #4169e1 !important; 

text-decoration: none; /* リンクの下線あり・なし */

}

ul.table-of-contents li a:hover {

color: #000000 !important; /* リンクにマウスを重ねた時の色 */

}

ul.table-of-contents li {

margin: 5px 0 10px 6px !important;

line-height: 1.5;

padding: 0;

list-style-type: none !important;

}

ul.table-of-contents li:before {

font-family: blogicon;

content: "\f008";

position: absolute;

left: 1.2em;

color: #5a6dba;

}

.entry-content h4 {

padding: 4px 10px;

color: #111;

background-color: #f0f0f0;

border-left: 8px solid #1056a2;

border-bottom: 1px solid #1056a2;

}

 

こちらのブログに様々な見出しデザインのコードがあるので、好みのものを選んでください↓

コピペで簡単!CSSではてなブログの見出しをカスタマイズ! | NO TITLE