釣りキチ 日常のおすすめ!!

日常の出来事 個人的なおすすめ記事を紹介します!!

スポンサーリンク

【はてなブログ】吹き出しのカスタマイズに挑戦したが反映されないを解決!

f:id:ls460mn:20191203174212p:image

そろそろブログをカスタマイズしてみようかなと思い吹き出しに挑戦することにしました。 

 

こんな感じのオシャレな吹き出しをしてみたかったんですよね。

しかし、なかなか上手く反映できませんでした。同じく反映、表示できない人がいるかと思いますので簡単に解説していきたいと思います。

 

 

吹き出しに挑戦

はてなブログ初心者には絶対見てほしいブログです。

マジでわかりやすくて神です。

blog.kottanmom.com

 

www.notitle-weblog.com

 こちらの二つがめっちゃいい感じでした。上記を参考にしていただけばCSSやHTMLは問題ないと思います。

 

吹き出しが反映、表示されない

 初心者には大敵のCSSをゴソゴソして完璧にできたはず。

f:id:ls460mn:20191203150537j:plain

CSSってこんなやつです。

 そして、HTML編集で直接入力。

 

f:id:ls460mn:20191203153106j:plain

よーしプレビューで確認してみよう!

f:id:ls460mn:20191203152751j:plain


 ん?何も変わってない?

何か途中で間違ってるかも?と思い再度CSSコピペして次こそ完璧なはず!

ついでにHTMLも確認して間違いなし!

そしてプレビュー確認

f:id:ls460mn:20191203152751j:plain

2回目のプレビュー

 全く変化なし!

ここまでめっちゃ時間かかってます。

 

Googleで調べよう

何とか吹き出しをしたいので、ググりまくりです(笑)

みなさん結構すんなりいってる記事ばかりです。スマホには反映されるがPCには反映されないという記事はありましたが、今回の場合両方とも反映されないパターンです。

Twitterでも質問させてもらいこんなアドバイスを頂きました。

CSSの位置を上にしてみて下さい。

このようなスーパーヒントをもらっても理解できず再度この内容をググりました。

そしてCSSの並び順という答えにたどりつきました!

原因として今までのカスタムCSSが今回の吹き出しCSSと重複していたため上手く反映そして表示されなかったみたいです。

CSSは重複した場合は上から順に読んじゃうみたいですね。

 

解決策として

CSSの位置を上にしてみる。

CSSは重複した場合は上から順に読むので出来るだけ上にコピペしました。位置的にはテーマの後ろ当たりなので10行目付近にしてみました。

すると...

どーも釣りキチです。

出来たときは感動しました!

 

同じような事で困っている方是非お試し下さい!

 

さらに詳しくって方はこちらもおすすめ!