【左に詰める方法】blogger:qooq目次カスタマイズ

皆さん！こんにちは😀

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

この目次の左側の空白を詰める方法です！（私のブログでは既に詰めてあります）

先ずは目次生成コードですが、スケ六様の以下サイトを参照してみて下さい。

参考：[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）で公開されいるので参考にしてください。

今回私が紹介するのは、こちらのコードで生成される目次の左の空白を詰める方法です。

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

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

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

赤色部分のコードは目次のフォントを改変するコードです。

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

     .b-toc-container{font-family: 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>

スマホで見た場合目次の左側の空白が大きく見えることが気になっていました。