ワードプレスだと簡単に使える吹き出し。
bloggerでも吹き出しが使いたーーーい！！
みなさん『簡単に出来ました』って書いてるけど・・・私も色んなサイトを見ながらチャレンジするも全く上手くいかず。
数ヶ月試行錯誤している私にとって吹き出しは全く簡単じゃなーーーい！！
吹き出しの設定に挫折し、力技で（ワードプレス ルクセリタスで使っている吹き出しのコードをコピペ）旦那さんが運用しているbloggerのサイトで使っていました。
でも・・・完全な吹き出しになってない。
サルワカさんの『CSSで作る！吹き出しデザインのサンプル19選』を見ながらチャレンジしました。
ようやく吹き出しが出来た！！
初心者blogger 吹き出し設定で2点つまづいたところ
①サルワカさんのHPからCSSをコピーして、bloggerのhtmlに貼りつける時の貼り場所が良くなかったようで吹き出しが反映されなかった。
→個別記事エリアの一番最後の部分にCSSを貼りつけると反映された。
②【imgタグ】の意味が分からなかった。
画像のURLを貼り付けただけじゃ吹き出しになりませんでした。
→<img src="画像のアドレス">として保存すれば吹き出しが完成
このimgタグにめっちゃ苦労しました。（泣）
【blogger QOOQ】吹き出しを設定してみた
①バックアップをとる
テーマ → 3つの点のところをクリックしバックアップをクリック
②サルワカさんのHPよりCSSをコピーする
サルワカさんの会話風（チャット風）からCSSをコピーします。（※お好みの吹き出しのCSSをコピーする）
③bloggerのhtmlに貼りつける
bloggerテーマ → 3つの点のところをクリック →htmlを編集をクリック
個別記事エリアの一番最後の部分にコピーしたCSSを貼りつけ保存。
④サルワカさんのhtml部分をコピー
<!--吹き出しはじまり-->
<div class="balloon5">
<div class="faceicon">
★ここに画像を入れる <img~>★
</div>
<div class="chatting">
<div class="says">
<p>★文章を入れる★</p>
</div>
</div>
</div>
<!--吹き出し終わり-->
⑤bloggerの新規作成ビューに吹き出しを作る
blogger新規作成で吹き出しだけのページを下書き保存します。
htmlビュー → ④でコピーした部分を貼りつけ保存
★ここに画像を入れる <img~>★
↑この部分にアイコン画像imgタグを追加し保存しておく
普通に画像のアドレスを貼るだけでは反映されません！！
<img src="画像のアドレス">を入れます。
img → 画像を表示する
src → 画像のファイル名
吹き出しを使いたいときはここからコピーして使う。
⑥自分が吹き出しを使いたいところに貼りつける
bloggerのHTMLビューにし、⑤で保存しているところから自分が吹き出しを使いたいところに貼りつける
★文章を入れる★
↑この部分に吹き出しに使う言葉を入れる
HTMLビューから作成ビューに戻すと吹き出しになってない！！
安心してください！！
プレビューで確認するとちゃんと吹き出しになっていましたよ！！
かわいい囲み線を設定する方法はこちら↓↓↓
今回もお疲れさまでした！！
にほんブログ村
