【ブログ】2度もつまづいた会話風吹き出し 解決法
こんばんは！
会話風の吹き出しを入れられるようになってテンション上がってます！みぃですฅ^._.^ ฅ
タイトル通り2度もつまづき一旦置いておこうかと思ってましたが、なんとかミスを見つけみぃとチロが話せるようになりました！
犬系女子というより、犬みたいな女のチロです☆
猫系女子のみぃです♪
できてる、できてるー！あ～感動！
今日は自分の備忘録も兼ねて、同じようなところでつまづいてるかもしれない方のヒントになるように、私が吹き出しを作るまでを載せていきます。
参考にしたサイト
以下のお二方のサイトを参考に、作成させていただきました。
ありがとうございました！！
実践したカスタマイズ
基本のCSSは先ほどご紹介したお二方のブログからコピペするだけです。
どこに貼り付ければいいのかも書いてくださっているので超簡単です。
アイコン
私は枠はそのまま変更せず、影も残しつつ色を少し変えました。
吹き出し
うえの様の吹き出しを参考にさせていただいたところ、私としてはもう少し三角部分を大きくしたいなーと思いました。
ですので枠線や影は消さず、吹き出し内・枠・影の色をすべて統一しました。
最初のつまづき（CSSの位置）
まずCSSをメモにコピペして色などカスタマイズし、いざデザインCSSの今まで入れてたやつの下に貼り付け！
ドキドキしながら記事作成で適当な言葉をいれ、HTMLも確認し、プレビュー！！
・・・あれ？
何も反映されてない…。
吹き出しもアイコンも何もない。見たまま編集と全く同じ。まさに見たまま。
どこーー！？どこをミスったのー？？
なんの知識もない私には全く分からず、見当もつかない…。
教えて！グーグル先生～(´；ω；`)
先生は教えてくださいました。
「CSSの位置を一番上にしたら解決することもある。」
あ！なるほど！ということで、デザインCSSの元々入っていたCSS（テーマによって違うかも）のすぐ下に貼り付け。
よし、今度こそ！とドキドキしながらプレビュー！
今度は吹き出しとアイコンの枠はあるのに、肝心のチロとみぃがいない。
またつまずきました。
２度目のつまづき（画像URLの貼り付け）
かわいいワンコとニャンコはどこに行ってしまったの？
ということでまたしても何が悪いのか考えました。
画像のサイズが関係あるのか？…アイコン画像のサイズについては何も言われてなさそう。
画像URLのコピーの仕方が違ったのか？…どこ見ても何度コピーしても恐らく合ってるし、変わらず。
若干諦めつつ、CSSとにらめっこ。
・・・・・！！見つけたー！！この瞬間の難しい間違い探しを解けたような達成感は半端なかったです！
何が違ったのか？
.クラス名::after {background-image:url(画像のURL);}
↑この赤字の部分だけを画像のURLに変えなきゃいけなかったのに
.クラス名::after {background-image:url(画像のURL);}
↑この青字の部分を全て変えてしまってました。
なんてバカなんだ私！初歩的ミスでこんな悩んでたのか！
ということでurl()を足して、再度プレビュー！
できましたー！！
まとめ
吹き出しが反映されなくて悩んでいるそこのあなた。
まずは
・CSSを入れてる位置
・書き換え時に消しちゃいけないところまで消してないか
これらを確認してみてください。
もう一度うえの様のサイトを見てみると、なんと言っておりました。
画像を引っ張る時によく注意して、消しちゃいけないもの消してないか注意しながら貼り付けを行うべきですね。
まさに！消しちゃいけないものを消してました。
確認不足ですね。反省。
でもやっぱり、やりたいカスタマイズができた時の達成感は良いですね！
みぃとチロが話してるような記事いっぱい書きたいな～(๑•∀•๑)
おわり♪
