この記事は「WP Sitemap Pageプラグインを使ってサイトマップを作成した人」向けの記事です。
HTMLサイトマップを生成してくれるプラグインの中でおすすめなのが「WP Sitemap Page」です(以前、使い方を解説した記事を投稿させていただきました)。しかし、このプラグインには１つ欠点がありました。それは専用のデザイン(CSS)が用意されていないことなんです。なので「WP Sitemap Page」で作ったサイトマップはとても質素で読みにくいです。
これを読みやすいものに変えるべく当サイトではオリジナルのCSS作りに着手。苦労の末、専用のCSSを作ることに成功しました！コードをペーストするだけでWP Sitemap Pageで作ったサイトマップが一気にきれいに！読みやすくなります！よかったら使ってください。
ビフォー(デフォルト)
アフター(完成図)
注意点
- カテゴリー一覧は２階層まで対応しています。３階層以降になるとデザインが崩れます。
オリジナルCSSの紹介
CSSのこだわりポイントを紹介します。
間隔にこだわりました！
カテゴリーの間隔を自然に見えるように調節！大きい階層は間隔をゆったりさせ小さい階層は間隔を狭くしています。これにより階層の大きさがわかりやすくなっています。
アイコンを使ってわかりやすく！
カテゴリーの先頭にフォルダのアイコンを！そして記事の先頭には矢印を表示！カテゴリーと記事の違いが明確になりグッと見やすくなりました！
文字の大きさを変えてわかりやすく！
文字の大きさに差を付けることで階層を認識しやすくしました！１階層のカテゴリー名は大きく！２階層のカテゴリー名はやや大きくなっています！また、２階層下の記事名はやや小さくなっています！
これより先は当サイトでAFFINGERを購入された方のみが閲覧できます。まだの方はこちらでAFFINGERをご購入ください。特典付きでAFFINGERを購入する
[パスワード４]を入力してください。