カテゴリー
アフィンガー

AFFINGER4 引用もどきを自分仕様のCSSにしたら画像エラーが出た

AFFINGER4の親テーマのCSSを見ると、「引用もどき」というCSSがあります。これは「引用ではないが、引用風に見せたい」部分に使えます。

引用した文章

引用もどきを使って引用ぽい文章を表示

この「inyoumodoki」を「.inyoumodoki-me」などとして好みの色で利用したくなって、こう指定してみました。真っ白にして中央揃えです。

背景色を変更した引用もどき。背景色を変更した引用もどき。背景色を変更した引用もどき。背景色を変更した引用もどき。

文章ならマージンを上下に50pxという設定をしたほうが良さそうです。引用もどきオリジナルバージョンは、実際には商品画像に利用しています。

商品紹介をしっかりしたい場合にはこれでは全然ダメです。念のため。

ところが───

デベロッパーツールのエラー表示

エラーが出てしまうのです。確認すると background-image: url(images/quote.png)の quote.png の部分でした。

デフォルトなら普通に読める部分が、自分で勝手につくったから読めないのか、“は必要ないのだから、画像は無いよってことにすればいいと考えて、検索しました。

そして background-image: none; とすることで解消しました。私が変更した部分だけ見えるようにしておきます。

引用もどきの画像エラーを解消するCSS

このCSSの設定にあたり、こちらのサイトを参考にしました。
参考リンク
CSSの背景設定の正しい書き方

[sc name=”AFFINGER PACK3 WING”]