【はてなブログ】初心者でも簡単。自分の記事にも吹き出しをつける方法！
こんにちは('◇')ゞ
日々読者様が増えてとっても感激しております、ねまるです。
スター押して下さる方も、読者登録してくださる方も本当にありがとうございます！
ここらへんで私もそろそろblog講座なるものの記事を書き始めようかなと…、ちょっとばかし思い腰をふんがっと持ち上げてるところでございます。
という訳で、これが第一弾でいいのか悩みどころではありますが、これからいっぱいblog関連のアレコレを更新すると思うので。
まぁどれが第一弾でもいいでしょう！！ということで←
今日も早速いってみよー！(/・ω・)/
はい、いきなり本題ですが。
いいなーこの人のblog！！吹き出しついてて可愛いし見やすいっ！
と、思った事はありませんか？？
私はめちゃくちゃあります。いざ色々調べてやってみると、ものすっごい簡単。
機械オンチの私にもすぐできたので、皆さんも是非マネしてみてください★
こちらのブログを参考にさせていただきました
この方のとってもわかりやすい記事のお陰で、念願の吹き出しがすーぐできちゃいます。
ちなみに、この方の記事ではGoogle Chromeの拡張機能を使った方法がご紹介されていますが、私は使っておりません。拡張機能＝難しいと思っているので！（笑）
大きく分けて、３つのステップでできます
以下手順を順番にクリアしていきましょう！
- アイコンにしたい画像を準備
- CSSコードを編集・貼り付け
- HTMLに貼って適用されているか確認
1、アイコンにしたい画像を準備しましょう
自分の写真はちょっと恥ずかしいな～と思った私は、以下アイコン作成サイトを利用させていただきました。
無料で着ぐるみをきた可愛いキャラクターのアイコンを簡単に作れます★
事前に作りたいキャラクターの数を把握しておくと一気に作れて楽です。
私は３つ作りました！
・進行してくれるメインキャラクター
・疑問を不安に思っているキャラクター
・疑問が解決して表情が明るくなったキャラクター
★アイコンをアップロードしてみよう
アイコンが決まったら、次ははてなフォトライフにアップロードをします。
はてなフォトライフ！？ 初めて聞いたんだけど！！
大丈夫、手順を全て書いておきました♡
・まず、いつものように記事を書くページにいきます
・赤い四角で囲まれたところをクリック
・どちらかのアップロードをクリック
・①このページにいくので、ファイルを選択orドラッグで使いたい画像を挿入
挿入されると一旦下に表示されます。
・⓶マイフォトをクリック
・Hatena Blogをクリックすると画像一覧のページにいきます
・先ほどアップロードした画像をクリック
・後で必要になるので、右クリックして画像URLをコピーしておきます。
メモなどに張り付けておきましょう！
ここまで大丈夫ですか？？
はい、では続いて…！
２、CSSコードを編集・貼り付けしましょう
CSSコードと聞くだけで、苦手意識が芽生えちゃう人…逃げないで！私も同じだから！（笑）でも簡単だから大丈夫ですっ👍
・まずは以下ページからCSS部分のみをコピー
（SHIROMAさんありがとうございます！）
【はてなブログ】吹き出しで会話形式にするのをめっちゃ楽にしてみた | SHIROMAG
CSS長くて不安になるかもですが、大丈夫！
思い切ってコピーしちゃってください
・コピーしたらメモ帳に張り付けて、編集します
編集する箇所は２カ所
①クラス名➡自分がわかりやすい名前に変更（私は吹き出し①にしました）
②画像URL➡先ほどコピーしてメモに張り付けたURLを貼ります
・「デザイン」➡「カスタマイズ」➡「デザインCSS」
※他のCSSは消さないように注意
はいこれで設定はOK！
保存しないと意味ないからしっかり保存。
ここまで来たらもうひと踏ん張りだよー！！
３、HTMLに貼って適用されているか確認しましょう
「HTML編集」のページで以下タグを張り付けます
アイコンの右に吹き出し
<p class="r-fuki 吹き出し1">テキスト</p>
ちゃんとアイコンの右にきていますね
アイコンの左に吹き出し
<p class="l-fuki 吹き出し1">テキスト</p>
ちゃんとアイコンの左にきていますね
どうでしょうか！皆さんもできていましたか？
ここで少し注意事項！
- HTML編集で吹き出しをしても「見たまま」ページでは何も変わっていません。 プレビューで確認してみましょう！
- 「r-fuki」と「クラス名」の間は半角スペース空いています
- 吹き出し内で改行をしたい場合は文章の途中で<br/>を挿入して続きを書きましょう！
<br/>をいれない場合
<p class="r-fuki 吹き出し1">みなさーん！ここまでどうですか？</p>
みなさーん！ここまでどうですか？
<br/>をいれた場合
<p class="r-fuki 吹き出し1">みなさーん！<br/>ここまでどうですか？</p>
みなさーん！
ここまでどうですか？
<br/>を間にいれることで、しっかり改行できています！
スマホでも表示させたい場合
え～、まだ何かあるの～？
このままだと、せっかく作った吹き出しがスマホでは表示されないよ！
そんなぁ！！どうすればいいの？
大丈夫、簡単だからやってみよう★
CSSに張り付けたアドレスを再びコピー
さっき張り付けた長～い編集済みのコードををまるっとコピーしよう♪
コピーしたら以下手順に沿ってやってみてね！
「デザイン」➡「スマートフォン」➡「ヘッダ」➡「タイトル下」
<style>〜</style>で囲ってその間にCSSを記述
保存をお忘れなく★これでスマホでもばっちり表示されます。
最後に
いかがでしたでしょうか？
これで吹き出しは完璧です♪
やったーー！できたよー！✨
皆さんに少しでもわかりやすくと思い、頑張って書かせていただきました！
首と腰がやられていますっ（笑）
でも達成感はとってもあります！
どなたかのお役に立てますように！
それでは本日はこのへんで(/・ω・)/
最後までお読みいただきありがとうございました！
読者になっていただけると、喜びます！
