今日は時間を作ってブログのカスタマイズとお勉強をしていました！
ちょびっとリニューアルしたの分かります？
そしてー、やっとこ出来ましたー✨吹き出しが(#^.^#)
お父ちゃん！
おや！？マサオ？？イラストで可愛くなっちゃって！
私もいるよ！
おれもいるよー！
前回pikaさんが分かりやすく紹介してくれたにも拘らず、ボンクラな私は今になるまであきらめていました。www
でも、オリジナルのウサギちゃん吹き出しが可愛くて💦どうしても吹き出しにチャレンジしたくなった訳です。
何が上手くいかなかったのか
自分自身に理解力が足りない… と言えばそれまでですが、最初の問題は写真のuploadからでした。
先ずははてなフォトに入り、uploadしたい写真を入れるんでしょ？と思い何度もやってみるんですが、うまくいかない。
これが最初の落とし穴でした。
pikaさんは自分で作成したものを保存していた訳で、私はPCに保存出来ないものを直接uploadフォームに貼り付けようとしていました…
通りで上手くいかない訳だ！
そして昨日までに時間を作り、調べてみるとー！
やっぱりPC保存⇒はてなフォトライフ⇒upload⇒が出来ないといけなかったわけです。
だから面倒でしたが、スマホからアイコン作成アプリで三人分を作り、マサオは無料のワンコイラストをスクショして保存（アイコンもスクショしました)しました。
👆こんなん出ました。
もうね、自分の為の手順書ですわwww
お父さんは説明書もちゃんと読まないからね～
これでやっと入口に立った感じでした。
写真はどう送ったかというと、スマホに添付して（画像はスマホサイズに変更を選択）PCに送りました。後はメールに添付された写真をピクチャに保存する訳です。
※フリー素材集などの無料サイトからPCでSnipping Toolで切り取ったものは保存できませんでした。
デザインCSSの落とし穴
次に困ったのは吹き出しのコードをデザインCSSに入れる時でした。
でもね、分かりやすい説明している方のを発見したんですよ！
この方もpikaさんと同じくSIROMAGさんという方の作ったものを使っていて、事細かく説明してくれていました。
CSSはブログ右上のレンチマーク（カスタマイズ）をクリックするとこの画面が出てきます⇩
しかし！ここでも躓くんです。
お父さん負けないで！
・素直にコピーしていなかった
ええ、素直にすればよかったんですよ。
でもね、私変なところ警戒心強いんですよ。もし間違っていたら、「どうしよう！？」
また夜しか眠れなくなる！！！
話が反れてごめんなさい。
「ストレスフリーさん」の所に貼ってあったコードを最初からそのまま貼り付けました！
後は画像のURLとフォトライフに保存したコードを埋め込めばいいんです。
やったー！出来たー❕
と思っていたらまた落とし穴(´;ω;｀)
⇑ちゃんとここから入れたんですけどね。
自分のだけ出てこなくなっちゃった💦
よくよく見てみるとURLの一部は消している！
⇑この赤字の部分です、ここがいらないとです。
それらを削除して出来上がったのがこちら。
⇑添付画像はデザインCSSコードの一部を切り取ったものです！
吹き出しの失敗
ここでも失敗です。でもあと少しのところまで来ていたので先が見えていました。
面倒ですが、最初にHTML編集の状態にして、吹き出しのコードを入れてみたんです。
<p class="r-fuki フォト名">文章</p>
これを定型文に入れて、使うってのはpikaさん流石だわ～と思いましたね。
だってですよ！イチイチHTMLに入れていたら面倒くさくて、使わなくなっちゃいそうだしー
・ちなみに吹き出しの文字の色を変えるのは通常の編集見たままで色を変えるだけです。
まとめ
順番的にストレスフリー生活研究ラボさんの説明見ながら吹き出しをデザインCSSに入れるまでを行い、pikaさんの定型文に入れるまでを行ってみて下さい。
※それでうまくいかなかった場合は、二位ガンの失敗例を元にしていただければ幸いです。
注意事項
・フォトライフにuploadした画像URLは、必要な部分だけをデザインCSSに入れているか。
・デザインCSS、定型文に入れたコード共に削除してしまった記号はないか（. / <>他）
・元々あった行間が無くなっていないか。
これらを注意していただければ面白く、楽しいブログが作れると思います(#^.^#)
これで出来なければ吹き出しは諦めた方がいいですって書いてあったの見て「言わんくてもいいんじゃね？」と思いました。
費やす時間が勿体無いので、他の手を考えようという事です！
今回は中々作りこみましたが、お役に立てればいいなぁ✨
ではまたね～((((ｏﾉ´3｀)ﾉ 最後までお読みいただきありがとうござました。
バナークリックお願いしますだぁ～✨
にほんブログ村
