[Blogger #014] 目次のデザインを全体に調和させる~Chrome ディベロッパーツールを使う~

目次の追加は、＃006でやりました。ここです。

さて、目次はできるけど、デザインがねぇ、周りとあってないよ。以前に、目次ってとこだけ、CONTENTS に変えてました。これも「ふじろじっく」さんとこの真似。どんだけ真似すんだって言われそうですが、いいものは取り入れます。途中経過でこんな感じ。

オリジナルはさらに違うけど、上のは、マージンあたりをいじくりってる途中状態です。最終的には、こんな感じになりました。

単にCSS部分をいじくっていって、色やマージンやらを触るだけですが、BloggerのHTMLを触って、リロードしてってやっていたら、日が暮れる。

そこで、Chrome のディベロッパーツールを使うことにしました。Chrome の右上、ハンバーガーマークから、その他のツール、ディベロッパーツールを開きます。

すると、こんな画面になります。右上の赤色がHTML部分、右下がCSS。選択したHTML部分のCSSの使われてる部分が一目瞭然。優先条件もわかるし、調整して、リアルタイムで確認できる優れもの。カラー調整もサクサクできます。

さらに、弄ったところをBlogger側のHTMLへ直接コピペもできますので、最後に張り付ければ終了です。このChromeのディベロッパーツールでの調整は本当に便利なので、ぜひ、お試しください。

さて、変更ポイントは、ごにょごにょしたので、全部覚えてないですが、概略は以下のとおり。

右側の非表示は残しました。ただし、CONTENTSがその下の行にくるのが気に入らないので、CONTENTS のマージンをマイナスにして、高さあわせました。

CONTENTSの下にboarder-bottom入れて区切った。

幅を95％まで広げました。中身の背景は本文色と一緒にして、外形枠をしっかり際立たせた。 

そういえば、ディベロッパーツールでいじくっている最中に、css_bundle_v2.cssという、Blogger のほうが勝手に差し込んでくるcssがいることに気が付きました。こいつに書かれているのは変更できないので、Widget 関係で設定しているものを弄るときは、!important 付けて対応しました。

PageSpeedでの遅延レポートにも挙がってくるようなので、そのうち、こいつもインライン化しようかなぁとおもったりしてます。今日は、ここまで。

そう、そして今日も、デザインを弄っただけで、記事は増えません。

また次回。