OPEN CAGEのWordPressテーマ「ハミングバード」や「ストーク」を使っていて、PS Auto Sitemap」というプラグインを導入すると、サイトマップのデザインが崩れてしまう。
具体的には、リストの点が消えずに不自然な位置に表示されてしまう。
そのままでも見れないことはないが、どうにも気持ちが悪い。
そこでこの記事では、リストの点が消えない原因と対処法を解説する。
【事象】ハミングバードやストークで「PS Auto Sitemap」のデザインが崩れる
PS Auto Sitemapは、ブログやWebサイトのページにサイトマップを出力してくれるプラグインだ。
サイトマップは、読者がブログ内で迷わず目的の記事へたどり着くための地図の役割を持っている。
当ブログにもさっそくインストールしてみたが、どうもデザインがおかしい・・・。
よく見ると、PS Auto Sitemapのデザインの前にリスト(li)の点が重なるように表示されている。
PS Auto Sitemapには10種類以上のスタイルが用意されているが、どれも試しても同じような状態に。
う〜む。
このままでも使えないことはないが、どうにも気持ち悪い。
list-type-styleをnoneにしてもリストタグが消えない
とりあえずプラグインのCSSをいじってみることに。
リストタグについて調べてみると、プラグインのCSSのli（リストタグ）のクラスに以下のようなコードを指定すると点が消えることがわかった。
- list-style-type: none;
- list-style-image:none;
- display: block;
list-style-typeは、リストの頭についている・のデザインを決めるためのタグだ。
[none]を指定すると、頭には何もつけないという意味になる。
list-style-imageは、リストの頭の・を画像で表現するためのタグ。
こちらも[none]を指定すると、画像を表示しないという意味になる。
displayは、要素を指定するタグだ。
要素というのは表示形式のことで、たとえばinlineと指定すると指定した場所が文中の要素のひとつとして表示される。
この場合、前後の文と仲間として認識される。
displayを[block]と指定すると、前後の文とは別の要素として表示される。
この倍、前後の文とは別のグループとして認識される。
【原因】テンプレートとプラグインの干渉か？
そんなわけで該当しそうなCSSをいくつかイジってみるものの、どれも試してもリストの点は消えない。
どうも当ブログで使っているWordPressテーマとプラグインの相性が悪いようだ。
原因はハミングバードとPS Auto Sitemapの相性の問題。
なお同様の問題はOPEN CAGEのWordPressテーマ「ストーク」でも起こってしまう模様。
それでなんとか解決しようと必死にググっているうちに、こんな記事を見つけた。
→PS Auto Sitemap の矢印をキレイに表示する方法 | HAPPY ORDINARY DAY!
のらりんさんの記事を参考に修正します。
「外観」→「テーマの編集」→「スタイルシート（style.css）」を選択
紹介されていたCSSコード（記事の下の方にありました）をスタイルシートにコピペ
キャッシュをクリア
3STEPで完了です♪
のらりんさんという方のブログに解決方法が書かれているようだが、残念ながらのらりんさんの元記事はすでに削除されていた。
そこでブログの運営者のTOMOMIさんにお問い合わせフォームから問い合わせてみると、丁寧に教えてくださり無事に解決することができた。
【対策】リスト(li)の点を消すのではなく疑似要素を指定して隠す
ではここからは、実際にリストの点を消すための解決方法をご紹介する。
リストの点を消すために、テーマのCSSファイルにこんな記述を追記する。
#sitemap_list li:before{
width: 0;
height: 0;
}
これだけだ。
ボクは[none]を指定してリストそのものを消そうとしていたのだが、消すのではなく疑似要素(:before, :after)を指定して隠すことでリストの点を見えなくすることができる。
今回の問題はPS Auto Sitemapのデザインの前の部分（before）に、テーマで指定されているリストの点が表示されてしまっていることだ。
だからboforeの幅（width）と高さ（height）を0と指定することで、擬似的に点が表示されていた部分を隠すことができるというわけ。
もし疑似要素についてよくわからない場合は、下記の記事も参考に。
→ 【CSS】知らなきゃまずい!?擬似要素「:before」「:after」の使い方の基本 | Web制作会社スタイル
それから、キャッシュ（一時的に記憶しているデータ）が残っているとCSSが反映されないことがあるので、うまく点が消えない場合はキャッシュの削除も試してみよう。
まとめ
今回は、ハミングバードやストークでPS Auto Sitemapのデザインがくずれてしまう問題の解決方法をご紹介した。
人気のテーマを使っているとデザインが被りやすいというデメリットはある。
しかし同じテーマをつかっている仲間がいれば、困ったときに助けてもらえるのが本当にありがたいことだ。
