【フォント変更】blogger:qooq目次カスタマイズ

今回は、目次生成コード（スケ六様：作成）を使っている方向けの記事です。

この目次のフォントを変更する方法です！（私のブログでは既に変更してあります⇩⇩⇩）

👆今回私が紹介するのは、こちらのコードで生成される目次のフォント変更する方法です。

✓やり方はいたって簡単で、スケ六様のコードの以下の部分を変更するだけです。

オレンジ色部分だけをコピペするだけでオッケーです💪

なお赤色の文字部分はデフォルトのコードとは違いますので、こちらは特に変えないでください。

赤色部分のコードは目次の文字を左に詰める改変コードです。

詳しくは別記事にまとめてありますので、気になる方は参考して見てください。

     .b-toc-container{font-family: Meiryo, sans-serif;background:#f9f9f9;border:1px solid #aaa;padding:10px 10px 10px 0px;margin-bottom:1em;margin-left:auto;margin-right:auto;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;margin:0;padding:0}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0}.b-toc-container>ul{margin:15px 0 0}.b-toc-container.hide>ul{display:none}.b-toc-container ul li{margin:0;padding:0 0 0 20px;list-style:none}.b-toc-container ul li:after,.b-toc-container ul li:before{background:0;border-radius:0;content:""}.b-toc-container ul li a{text-decoration:none;color:#008db7!important;font-weight:400;display:flex;align-items:flex-start;flex-wrap:nowrap}.b-toc-container ul li .toc-number{margin:0 .5em 0 0;white-space:nowrap}.b-toc-container ul li .toc-text:hover{text-decoration:underline}

  </style>

</b:if>

👆自分のお気に入りのフォントに変えたい方は、こちらのサイトが分かりやすいので気になる方は参考にしてみて下さい。

👆フォントの数は、色々なブラウザでの表示を想定すればもう少し増やした方が良いかも知れません。（私は、今のところこれで良いかなと思っています）

私は以前からBloggerの目次（スケ六様作成）を使わせて貰っています。

ブログ全般の文字フォントは既に変更してあるのですが、目次はBloggerのCSSがあたらずデフォルトのままです。

目次だけ違和感を感じてしまい、フォント変更をやってみました😀