ブログに吹き出しを付ける方法
こんにちは。mokaです。
Twitter（@moka_room___）もやっているので良かったらフォローしてください！！
今日はブログの吹き出しの付け方についてお話します。
ブログ初心者必見です！！
ちゃんこめさんのブログを参考にさせていただきました↓↓
こちらのブログはコードの説明も書かれていてとても勉強になりました。
実際に私が吹き出しを付けた手順をお話します。
みなさんもこちらを読みながら挑戦してみてくださいね。
CSSコードのコピー
まずはちゃんこめさんのブログにあるCSSコードをコピーしてご自身のブログの下記に記入してください。
デザイン＞カスタマイズ＞{}デザインCSS
その際に、お好みで吹き出しの色や形などをカスタマイズしてください。
それらのコードについてもちゃんこめさんのブログにとても分かりやすく記載されています。
HTMLの編集
つづいて、記事内に貼り付けるHTMLの編集を行います。
私は下書き用の記事にちゃんこめさんのブログにあるHTMLを貼り付けて編集しました。
プレビューで実際の吹き出しをすぐに確認できるので作業しやすかったです。
画像のアップロード
アイコンにする画像のアップロードをします。
アップロードの仕方は2種類あります。
①記事内に画像をコピペ
②はてなフォトライフに画像をアップロード
どちらもやっていることは同じです。
普段、画像に記事を載せるときと同じ方法で出来ます。
アイコン画像の設定
HTML編集画面にします。
ーーーーーーーーーーーーーーーーー
<figure class="fuki-img-left">
<!-- ふきだし画像 --> ←←ここをドラック
ーーーーーーーーーーーーーーーーー
ドラッグした状態でアイコンにしたい画像を選択し、「写真を投稿」します。
名前の設定
HTML中の以下の部分に名前を記入します。
ーーーーーーーーーーーーーーーーー
<figcaption class="fuki-img-name">
<!-- ふきだし画像の名前 --> ←←ここに記入
ーーーーーーーーーーーーーーーーー
私はここを「moka」にしています。
吹き出し内の文章を記入
HTML中の以下の部分に文章を記入します。
ーーーーーーーーーーーーーーーーー
</figcaption></figure>
<div class="chat-text-left">
<p class="chat-text">
<!-- ふきだし内テキスト --> ←←ここに記入
</p></div></div>
ーーーーーーーーーーーーーーーーー
これで吹き出しのHTMLは完成です！！
あとはコピーしやすいところに保存します。
HTMLをコピーしやすいところとは
メモ帳などを使う方もいらっしゃると思いますが、私はブログ編集画面の「定型文貼り付け」に保存しています。
編集サイドバー＞＋＞一番下にスクロール＞定型文貼り付け
ここをクリックすると「定型文を作成する」というのがあるので、ここにHTMLをコピペしておくと、プログを書く際に使いやすいです。
