【WhiteTiger】テーマ　サブディレクトリサイトで本文下のランキング画像が表示されない現象を修正

まだまだ【WhiteTiger】テーマネタは続きますよ～（笑）。

個別記事をデベロッパーツールで見てたらエラーが・・・。それは本文下のカテゴリー別ランキング表示の王冠マーク。

発生したのはサブドメインにインストールしているこのサイトでのこと。

たまたまデベロッパーツールを見たこと、ドメインルートのサイトには【WhiteTiger】テーマが入っていないことからたまたま発見しました。そもそも本文下のランキングに王冠マークがあるなんて知らなかったし・・・。

で内容を見てみると、参照先となっているドメインルートの画像がないから表示できないよ～～というエラーでした。

まあ単純にドメインルートのサイトへ【WhiteTiger】テーマをアップロードしておけば済む話ですけど、何の気なしに削除してしまったときには困るので対処しました。

行ったのは単純にCSSの修正をしたこと。

もともと

.category_in_populars ul li:first-child .ranking_image {
background-image: url(/wp-content/themes/white-tiger/images/ranking_1.png);
}

.category_in_populars ul li:nth-child(2) .ranking_image {
background-image: url(/wp-content/themes/white-tiger/images/ranking_2.png);
}

.category_in_populars ul li:nth-child(3) .ranking_image {
background-image: url(/wp-content/themes/white-tiger/images/ranking_3.png);
}

となっていて、これはドメインの一番上の階層にあるwp-contentの中の・・・画像ですよと書かれています。

それを

category_in_populars ul li:first-child .ranking_image {
background-image: url(./images/ranking_1.png);
}

.category_in_populars ul li:nth-child(2) .ranking_image {
background-image: url(./images/ranking_2.png);
}

.category_in_populars ul li:nth-child(3) .ranking_image {
background-image: url(./images/ranking_3.png);
}

と/wp-contentの手前に「.(ドット)」を付けて、１つ上の階層です！として「image」フォルダの中を参照するように指定してやっただけ。

他の環境（階層構造とか）では分かりませんが、このサイトの場合はこれで解消されました。

それからどこだったか忘れましたが、CSSの中に閉じ子が１つ多い箇所もあり、ついでに修正しておきました。

自身でテーマの作成ができるようなスキルはありませんが、こうして１つ１つ対処していくのも面白いですよ！！