リストの点が消えない!ハミングバードやストークで「PS Auto Sitemap」のレイアウトが崩れをなおす方法

ps auto sitemapでliの点が変

こんにちは。ニシムラ(@nissy421)です。

OPEN CAGEのWordPressテーマ「ハミングバード」や「ストーク」をつかっていて、「PS Auto Sitemap」というプラグインを導入すると、デザインが崩れてしまいます。

解決するにはどうすれば?

ハミングバードやストークで「PS Auto Sitemap」のデザインが崩れる問題

PS Auto Sitemapは、ブログやWebサイトのページにサイトマップを出力してくれるプラグインです。

メニューなどにカテゴリ一覧のページがあれば、読者の方がブログ内で迷ってしまわないための地図代わりになるので、とっても便利なんですよね。

それでさっそく、PS Auto Sitemapをインストールしてみたんです。

10種類以上のスタイルがあるので、いろいろとためしてみたのですが、どうもデザインがおかしい・・・。

よく見ると、PS Auto Sitemapのデザインの前に、リスト(li)の点が表示されて重なってみえてしまいます。
ps auto sitemapのデザイン崩れ スマホの場合 う〜む。

このままでも使えないことはないのですが、どうにも気持ち悪い。

list-type-styleをnoneにしてもリストタグが消えない

ps auto sitemapのデザイン崩れ PCの場合

PC画面でもこのとおり・・・

とりあえずプラグインの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テーマの「ハミングバード」とプラグインの相性がわるいみたい。

同様の問題はおなじOPEN CAGEのWordPressテーマ「ストーク」でも起こってしまうようです。

なんとか解決しようと必死にググっているうちに、こんな記事を見つけました。

のらりんさんの記事を参考に修正します。

「外観」→「テーマの編集」→「スタイルシート(style.css)」を選択

紹介されていたCSSコード(記事の下の方にありました)をスタイルシートにコピペ

キャッシュをクリア

3STEPで完了です♪

のらりんさんという方のブログに解決方法が書かれていたのですが、残念ながら記事が消えてしまっているようです。

それでこちらのブログの運営者のTOMOMIさんにお問い合わせフォームからお聞きして、無事に解決することができました。

リスト(li)の点を消すのではなく、疑似要素を指定して隠す

ps auto sitemap デザイン崩れ 解決

無事になおりました!

さて、実際どうすればデザイン崩れがなおるのでしょうか。

テーマの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のデザインがくずれてしまう問題の解決方法をご紹介しました。

人気のテーマをつかっているとデザインがかぶっちゃってオリジナリティがだしずらいなんていわれます。

でも、おなじテーマをつかっている仲間がいれば、こまったときに助けてもらえるのがありがたいですよね。

ちなみに当ブログのカテゴリ一覧はこんな感じです。

全カテゴリー | 古風礼賛

読みにきてくれた方が迷わないように、メニューバー(グローバルメニュー)に表示しています。

とっても便利なので、ぜひためしてみてくださいね!

この記事を読んだ人はこんな記事も読んでいます

無敵のワードプレス有料テーマ!ハミングバードが超人気な5つの理由

2016.11.01
————————–
ニシムラ・ケイイチの詳しいプロフィールとお問い合わせはこちらからお願い致します。
お問い合わせ

ブログ更新はTwitterにてお知らせしております。ぜひフォローしてください!
@nissy421