チョコベリーの暮らしをちょっと豊かにするブログ

3児育児中のワーママです。ワーママライフハック、子育て、投資など暮らしを豊かにするヒントや気づきを綴っています。

MENU

 

はてなブログで、吹き出しのアイコンが変わらない・・・!原因と解決まとめ

こんにちは!

3児育児 ✕ ワーママ のチョコベリー(@chocoberry_k)です。

 

はてなブログで吹き出しのアイコンが変わらない

 

ブログに吹き出し、使っていますか?

吹き出しとは、自分のアイコンの横に、言葉を出す会話形式のデザインです。

 

このたび、自分のアイコンを変えたので、吹き出しのデザインも変えようとしました。

しかし、アイコンがどうしても変わらない・・・!

 

なぜ?

何がよくないの?

 

試行錯誤の結果、ようやく解決!

どなたかの参考になれば!

  

 

アイコンを変えました

 

今までは、背景がピンク色のアイコンを使っていました。

ピンク色の可愛いアイコン

それを、こちらに変更。

f:id:chocoflowerheart:20190215065037j:plain


今までの吹き出しがこんな感じだったので・・・

 

以前の吹き出し

この吹き出しアイコンを新しく変えたいと思いました。

 

吹き出しを変えたいけど、変わらない!

 

吹き出しの変更は、「デザイン」→「カスタマイズ」→「デザインCSS」の処理を変更します。

デザインCSS

 

私の場合、他のサイトを参考にさせていただき、吹き出しを作ったので、基本コピペです。

 

吹き出しの処理は

.fuki1::after {background-image:url(画像のURL);} 

と書かれていました。

 

「画像のURL」の部分を、新しい画像のURLに変えれば、変更OKです。

 

さあ、変更しよう!とURLを新しいものに変えてみましたが・・・、

あれ?アイコンが変わらない!

おかしい・・・。

 

 

やってみたこと

 

原因を調べるために、いろいろ試してみました。

2つめの吹き出しを設定してみる

私の場合、コピペだったので、もともと2つめの吹き出しの処理がありました。

そこで、2つめの吹き出しのURLに、新しいアイコンのURLをいれました。

 

.fuki1::after {background-image:url(画像のURL);} 

.fuki2::after {background-image:url(新しい画像のURL);}

 

そして、吹き出しを表示するfuki1の処理を、fuki2に変更。

吹き出し2を表示するようにしてみました。

 

その結果・・・、修正した吹き出しは、アイコンなしのまっしろ吹き出しに!

2つめの吹き出し処理も、正常に表示できませんでした。

 

キャッシュを削除してみる

Googleで調べてみたところ、アイコンを変えたけれど、古いアイコンが表示されたまま、という事例がありました。

これは、キャッシュを削除すると解決するとのこと。

Windows(IE、Firefox、Chrome): Ctrl + F5

やってみましたが、吹き出しには該当せず・・・。

 

スマホ用の画像URLを変えてみる

スマホ用のデザインは「デザイン」→「スマートフォン」→「記事下」に吹き出しの処理があります。

 

スマホ用設定

ここにも、

.fuki1::after {background-image:url(画像のURL);} 

の処理があります。

 

この画像URLを、新しいURLに変えてみたところ・・・、

できました!

 

ということは、PC用のカスタマイズの処理がおかしいに違いない・・・!

 

原因は、2重処理だった!

 

「デザイン」→「カスタマイズ」→「デザインCSS」の処理を、もう一度確認することにしました。

処理をコピーし、テキストに貼り付けます。

なんとなく、画像URLの文字列をコピーし、テキスト上で検索をかけてみました。

 

すると・・・、

あれ?なんか2回引っかかる・・・?

 

なんと、画像の処理が2回あったのです!

 

CSSファイルの処理は、

吹き出し、見出し、カエレバ、更新日

の順で処理が並んでいました。

 

それが、

吹き出し、見出し、吹き出し、見出し、カエレバ、更新日

と、同じ処理が2回繰り返されていたのです。

 

どうやら、なにか修正のタイミングで、同じ処理を繰り返して書いてしまい、そのままにしていた模様。

私は、最初の吹き出しの処理を修正していたので、ブログ表示される際は、後の吹き出し処理が読み込まれて、旧アイコンが表示されていました。

 

重複している吹き出し、見出し処理を削除し、画像のURLを再度変更して表示したら・・・

 

吹き出し変わった!

 

やっと吹き出しが変わりました!

 

注意点は?

 

やはり、CSSを修正する際は、修正前のコードを保存しておくべきですね。

はてなブログに書いたものだけにしてしまうと、修正がうまくいかなかったとき、もとに戻せなくなってしまいます。

 

私は、修正ごとに履歴をとっています。

履歴をとっておくと、どこでどんな修正をいれたかわかるのでいいですね。

できれば、修正ごとに履歴をとっておいた方が、より安心ですね!

 

まとめ

 

 

 ・吹き出しのアイコンが変わらないときは、処理の重複チェックをしてみよう!

 ・CSSの修正は、履歴をとっておこう!

 

 

何が原因かわからず、かなりの時間を費やしてしまいました・・・。

もし、私と同じように困った方の参考になれば、嬉しいです!

 

よろしければ、こちらも↓

www.chocoberry-life.com

www.chocoberry-life.com