PS Auto SitemapのCSSカスタマイズ｜子カテゴリと記事タイトルを見分けやすくする

サイトマップを簡単に作成できたプラグイン「PS Auto Sitemap」。前回は大まかな紹介と初期設定について「サイトマップを生成するWordPressプラグイン「PS Auto Sitemap」」に書きました。

初期設定のままでもサイトマップの役割は果たしてくれていると思いますけどちょっとだけ見やすくするためのCSSカスタマイズをしてみました。

PS Auto Sitemapのデザインをカスタマイズ

PS Auto Sitemapにはデフォルトで14種類もテンプレートがあるんですがカテゴリの階層構造がわかりやすいレイアウトは限られていました。

その中でもトータルで見やすかったのが「シンプル2」

初期状態はこんな見た目になります↓

カテゴリに背景色が付いて2階層目はインデントがあるので階層が分かりやすいですね。

ただし細かい部分で気になる点があります。

インデントが大きくてiPhoneで見にくい

1階層、2階層の関係を分かりやすくするためにインデントが設定されているんですが結構深いので幅の狭いiPhone5sなどで見ていると画面右側に偏ってしまいます。

記事タイトルが長い場合は2階層目の行数が多くなってしまって見にくくなります。

2階層目のカテゴリが1階層目の記事と見分けにくい

親カテゴリの下にある子カテゴリが記事と同じ階層にあるのでサイトマップだととても見分けがつきにくくなっています。

CSSでカスタマイズ

• インデントが大きい
• 2階層目のカテゴリが見分けにくい

という問題を解決するべくCSSで微調整してみました。

最終的にCSSはこのようになりました。（あらゆる場面で大丈夫かわからないので参考までに）

↓完成したサイトマップのレイアウトがこちら。

• インデントを小さくしてiPhone5sで2階層目が狭くならないように調整
• 2階層目のカテゴリに背景色を設定して同じ階層の記事と見分けやすく
• 記事と記事の間（段落間）を広くして見分けをつきやすく

ちなみにこちらが初期状態の「シンプル2」スタイルのレイアウト↓

段落間の調整とかは好みによって意見が別れるかもしれませんけど2階層目カテゴリの背景色はあったほうが明らかに分かりやすくなるんじゃないかと思います。

コードをサクッとコピペでも大丈夫だと思いますがそれぞれ簡単に補足すると、

インデントの調整とついでに段落間の調整

margin-left が左側インデントの調整になっています。5pxにまで縮めました。

margin-top は他に正しいやり方があるかもしれませんけどとりあえず整ったのでよしとしました。記事と記事の間が狭すぎると見分けがつきにくくなるので。

ちなみに !important という記述は使っているWordPressテーマによっては必要ないかもしれないのでまずはimportant無しで試してみてください。importantを使うことによって、それ以上のCSS上書きがされなくなります。

子カテゴリに背景色を設定

Chromeのデベロッパーツールを使って1階層目のカテゴリに設定されているCSSをまるっとコピペして背景色の部分だけを変更しました。

子カテゴリの記事まで設定された背景色を解除

先ほど設定したCSSで子カテゴリの記事まですべて背景色が設定されてしまったので記事の背景色を元の色に戻しています。

ちょっとしたカスタマイズで自分好みにできたら楽しい

ゼロから自分ですべてCSSを書くのは大変ですけどあらかじめおおまかなデザインがあるプラグインなどはデベロッパーツールでCSSをコピペして数値だけを変更すれば自分好みのデザインにすることが割りと簡単にできます。

練習としてプラグインのCSSカスタマイズはなかなかおすすめ。

※WordPressプラグインのまとめ書きました。