【備忘録】超PC音痴の私がはてなブログでふきだしの会話の設定が出来た!
こんばんわ！
Google機能が頭の中に全部入ったらいいのになと思うまるこです。
今日はこんなことやってたよ、うさ美ちゃん！
わー！見やすいね！！
そやろー？？
いい感じじゃーん！
cssとか全然意味わかってないまるこでも出来たよ♡
僕うさ男よろしく！
お！うさ男君！これからよろしくね♡
どうしても文字ばっかりで見にくいなぁと思って吹き出しの設定をしていました。
ちなみにPCは簡単なデータ入力と検索しかできないほどの超初心者。
まるこちゃんがんばれー！！
色んな方のブログを参考にしつつ、この方の説明が丁寧で一番わかりやすかったです。
ありがとうございます。
効率よくするために私がやった事教えますね！
はじめに吹き出しで使うアイコンを準備
①吹き出しで使うアイコンとなる画像なりイラストを決める
②イラストをフリー素材からいただいてきたのですが、イラストの背景が真っ黒になる。（これは私のように背景が黒くなって困っている人がやって下さい）
こんな感じに・・・↓
困った。
参考にさせて頂きました。
とってもわかりやすかったです。
こんな感じに背景が白くなりました。
難しいかとおもいきやめっちゃ簡単だった！
③②の画像をはてなフォトライフに投稿する
④cssのコピーをメモ帳などのアプリに貼りつけ
⑤画像のアドレスのコピー
はてなフォトライフの画面で、使いたい画像の上で右クリック→「画像アドレスをコピー」をする
⑥cssのコード下から2行目、3行目を編集
画像アドレスのコピーを④でメモ帳に貼りつけていたcssの下から3行目ののURLの所に貼りつける。
クラス名を好きな名前に書き換える。
もう一つ登録したい方はもう一度、画像アドレスをコピー→cssの下から2行目のURLの所に貼り付け→クラス名を好きな名前に変更
下から2行めのhtmlをコピペしてcssの二段目に貼りつけ→クラス名、URLを変更、この手順で何個でも設定できるみたいです。
⑦ここまで出来たらメモ帳全体をコピーする。
はてなブログの管理画面→デザイン→カスタマイズ→デザインcssに貼りつけ→変更を保存
⑧試しにブログで使ってみる（みたままモードではなくHTML編集から）
記事中にhtmlを直接記述。
クラス名は、⑥のcssで自分が設定した画像の名前を。
テキストの所は、吹き出しの中に入れたい文字を入れる。
プレビュー画面でしか吹き出しの確認ができないのでプレビューを見ながら。
何かを失敗していて吹き出しの横の画像が反映されないのでもう一度cssのコードを入れなおしてみたり地道にやりました。
ちゃんと反映されてるのを確認出来たら、あとは使いたいときに記事中に⑧でやった事をするだけ！
できたー！やったぁ♡
馬鹿なりに頑張ったなｗ
ちなみに吹き出しの中での改行はenterキーのみでダメなんだよ! 「SHIFT」キー+「ENTER」キーで改行するんだって！
そうなんだー！ どうなるんだろう？
やってみたけど、大丈夫だよ？ でも、ダメと言っている人がいるからあかん何かがあるんやろうね？気を付けるー！
ちょっとだけ上の吹き出しの下のほうおかしくない？
言われてみたら下が一行あいてる感じになってるかも？雑過ぎて気付かなかったよ笑
こんな感じで2時間弱。
一度設定したら特に難しい事もないのでこれからいっぱい使っていこうと思います！
何回か間違えてもう覚えた！うさ美とうさ男以外増やそうかな♫
