サイト内コンテンツの一覧表示ページはサイトマップと呼ばれます。
本で例えるなら”目次のような物”と言ったところでしょうか。
当サイトでも以前から導入を考えていましたが、どのようなデザインにするか迷ったあげく既存のプラグインに任せる事にしました。
何より追加ページを自動的に反映してくれるのは大いに助かります。
ただし少しだけCSSのアレンジを加えれば利便性が向上しますので、そのやり方をご紹介します。
・用いたプラグインはPS Auto Sitemap
wordpressでこのプラグインを導入している方も多いかと思われますが、設定も簡単でいくつかデザインが用意されている点が良いです。
ただし見た目以外の点で大きく2種類のデザインにわけられます。
- 常に同じ見た目のデザイン
- 既に訪問したリンクに何かしらの印が付くページ
の2種類です。
おおまかなカテゴリーだけなら1番目の見た目でも問題ありませんが、ページ数が多くなるにつれて2番目の方が見やすくなります。
今回は”見た目が好みだけど1番目のデザインの時”に、2番目のように訪問したリンクが判別できるようにするやり方です。
・外観の”CSS編集”を使う方法
wordpressの機能で、”外観”の編集があります。その中で”CSS編集”を選べば既存のテーマやプラグインのデータを直接いじらなくても、デザインに手を加える事が出来ます。
まずPS Auto Sitemapで作ったサイトマップから”ページのソース”を覗いてみましょう。
その中に <ul id=”sitemap_list” class=”sitemap_disp_level_0“> という記述があります。（階層の設定で数字は違う値になっている場合もあります）
この記述のクラスの値を確認します。
そして”CSS編集”を開き”追加CSS”の中に
.sitemap_disp_level_0 a:visited {
}
というソースを書き込むだけです。{ }の中に加えたい変化を足していけば良いです。
ただし文字のサイズ指定などは反応しない場合があります。これはテーマ内の指定で段落や範囲に制限が設けられているからです。
CSS編集のメリットは”間違って記述しても簡単に削除できる”という点です。
テーマのCSSまでいじらなければ実現しない効果は付けない方が無難でしょう。
他にも”プラグインを直接編集する”方法もありますが、何かの間違いでエラーになってしまうと修復が面倒になるので詳しい方以外はオススメしません。