【THE THOR】サイドバーの目次のデザイン修正の例。

以前、「THE THOR」のサイドバーに追従する目次設定について記事をかきました。
【THE THOR】プラグインなしで追従する目次を表示させる方法とプラグインの有無のサイトの表示速度。

目次 デザインの修正

この目次のデザインが気に入らないため、少し手を加えていきたいと思います。

まず、以下のソースを追加CSSに記述して「目次」の文字を消去します。

#side_outline .outline__title {
    font-size: 0rem;
}

次に「外観」→「ウィジェット」→「HTMLカスタム」をドラッグアンドドロップして、「追従サイドバー」の項目に入れる。

そして、題名に「目次」と記入する。

すると以下のようになります。

目次 デザイン 編集

あとはデベロッパーツールでお好みのデザインにしました。

私はborderを消去し、「margin-top: -50px;」で空白を埋めました。

この方法の欠点は、この記事のように文字量が少なく、見出しを設定しないと、目次がないのに関わらず、「目次」という題名だけがサイドバーに表示されます。

まあ、一つ一つの記事の量を増やし、質を上げるという戒めのために、今後はこの設定のままで記事をアップしていきたいと思っています。

目次デザインの修正
ツイートもチェックしよう!