ブログに吹き出し、使っていますか？
吹き出しとは、自分のアイコンの横に、言葉を出す会話形式のデザインです。
このたび、自分のアイコンを変えたので、吹き出しのデザインも変えようとしました。
しかし、アイコンがどうしても変わらない・・・！
なぜ？
何がよくないの？
試行錯誤の結果、ようやく解決！
どなたかの参考になれば！
アイコンを変えました
今までは、背景がピンク色のアイコンを使っていました。
それを、こちらに変更。
今までの吹き出しがこんな感じだったので・・・
この吹き出しアイコンを新しく変えたいと思いました。
吹き出しを変えたいけど、変わらない！
吹き出しの変更は、「デザイン」→「カスタマイズ」→「デザインCSS」の処理を変更します。
私の場合、他のサイトを参考にさせていただき、吹き出しを作ったので、基本コピペです。
吹き出しの処理は
.fuki1::after {background-image:url(画像のURL);}
と書かれていました。
「画像のURL」の部分を、新しい画像のURLに変えれば、変更OKです。
さあ、変更しよう！とURLを新しいものに変えてみましたが・・・、
あれ？アイコンが変わらない！
おかしい・・・。
やってみたこと
原因を調べるために、いろいろ試してみました。
２つめの吹き出しを設定してみる
私の場合、コピペだったので、もともと2つめの吹き出しの処理がありました。
そこで、２つめの吹き出しのURLに、新しいアイコンのURLをいれました。
.fuki1::after {background-image:url(画像のURL);}
.fuki2::after {background-image:url(新しい画像のURL);}
そして、吹き出しを表示するfuki1の処理を、fuki2に変更。
吹き出し２を表示するようにしてみました。
その結果・・・、修正した吹き出しは、アイコンなしのまっしろ吹き出しに！
２つめの吹き出し処理も、正常に表示できませんでした。
キャッシュを削除してみる
Googleで調べてみたところ、アイコンを変えたけれど、古いアイコンが表示されたまま、という事例がありました。
これは、キャッシュを削除すると解決するとのこと。
Windows（IE、Firefox、Chrome）： Ctrl + F5
やってみましたが、吹き出しには該当せず・・・。
スマホ用の画像URLを変えてみる
スマホ用のデザインは「デザイン」→「スマートフォン」→「記事下」に吹き出しの処理があります。
ここにも、
.fuki1::after {background-image:url(画像のURL);}
の処理があります。
この画像URLを、新しいURLに変えてみたところ・・・、
できました！
ということは、PC用のカスタマイズの処理がおかしいに違いない・・・！
原因は、２重処理だった！
「デザイン」→「カスタマイズ」→「デザインCSS」の処理を、もう一度確認することにしました。
処理をコピーし、テキストに貼り付けます。
なんとなく、画像URLの文字列をコピーし、テキスト上で検索をかけてみました。
すると・・・、
あれ？なんか２回引っかかる・・・？
なんと、画像の処理が２回あったのです！
CSSファイルの処理は、
吹き出し、見出し、カエレバ、更新日
の順で処理が並んでいました。
それが、
吹き出し、見出し、吹き出し、見出し、カエレバ、更新日
と、同じ処理が２回繰り返されていたのです。
どうやら、なにか修正のタイミングで、同じ処理を繰り返して書いてしまい、そのままにしていた模様。
私は、最初の吹き出しの処理を修正していたので、ブログ表示される際は、後の吹き出し処理が読み込まれて、旧アイコンが表示されていました。
重複している吹き出し、見出し処理を削除し、画像のURLを再度変更して表示したら・・・
吹き出し変わった！
やっと吹き出しが変わりました！
注意点は？
やはり、CSSを修正する際は、修正前のコードを保存しておくべきですね。
はてなブログに書いたものだけにしてしまうと、修正がうまくいかなかったとき、もとに戻せなくなってしまいます。
私は、修正ごとに履歴をとっています。
履歴をとっておくと、どこでどんな修正をいれたかわかるのでいいですね。
できれば、修正ごとに履歴をとっておいた方が、より安心ですね！
まとめ
・吹き出しのアイコンが変わらないときは、処理の重複チェックをしてみよう！
・CSSの修正は、履歴をとっておこう！
何が原因かわからず、かなりの時間を費やしてしまいました・・・。
もし、私と同じように困った方の参考になれば、嬉しいです！
