オリジナルカスタマイズ

コピペするだけ!WP Sitemap Pageで作った地味なサイトマップを一瞬できれいにするCSSを配布!AFFINGER6(アフィンガー6)

この記事は「WP Sitemap Pageプラグインを使ってサイトマップを作成した人」向けの記事です。

HTMLサイトマップを生成してくれるプラグインの中でおすすめなのが「WP Sitemap Page」です(以前、使い方を解説した記事を投稿させていただきました)。しかし、このプラグインには1つ欠点がありました。それは専用のデザイン(CSS)が用意されていないことなんです。なので「WP Sitemap Page」で作ったサイトマップはとても質素読みにくいです。

これを読みやすいものに変えるべく当サイトではオリジナルのCSS作りに着手。苦労の末、専用のCSSを作ることに成功しました!コードをペーストするだけでWP Sitemap Pageで作ったサイトマップが一気にきれいに!読みやすくなります!よかったら使ってください。

ビフォー(デフォルト)

WP Sitemap Pageで作った地味なサイトマップ(CSS適用前)

アフター(完成図)

WP Sitemap Pageで作った地味なサイトマップを一瞬できれいにするCSSを適用した後:AFFINGER6(アフィンガー6)

注意点

  • カテゴリー一覧は2階層まで対応しています。3階層以降になるとデザインが崩れます。

オリジナルCSSの紹介

CSSのこだわりポイントを紹介します。

間隔にこだわりました!

カテゴリーの間隔を自然に見えるように調節!大きい階層は間隔をゆったりさせ小さい階層は間隔を狭くしています。これにより階層の大きさがわかりやすくなっています。

オリジナルCSSの紹介1(間隔にこだわりました)

アイコンを使ってわかりやすく!

カテゴリーの先頭にフォルダのアイコンを!そして記事の先頭には矢印を表示!カテゴリーと記事の違いが明確になりグッと見やすくなりました!

オリジナルCSSの紹介1(アイコンを使ってわかりやすく)

文字の大きさを変えてわかりやすく!

文字の大きさに差を付けることで階層を認識しやすくしました!1階層のカテゴリー名は大きく!2階層のカテゴリー名はやや大きくなっています!また、2階層下の記事名はやや小さくなっています!

オリジナルCSSの紹介1(文字の大きさを変えてわかりやすく)

これより先は当サイトでAFFINGERを購入された方のみが閲覧できます。まだの方はこちらでAFFINGERをご購入ください。特典付きでAFFINGERを購入する

[パスワード4]を入力してください。

購入者限定エリア

-オリジナルカスタマイズ