俺の独断と偏見を聞いてほしい

仕事と育児の狭間でカキカキしているブログです。「働き方に対する思い」や「生活に役立つ情報」を中心に発信しています。

【ブログ初心者でも簡単】吹き出しを表示させる方法【はてなブログ】

f:id:tanakayuuki0104:20190502053334j:plain
どうも、ユーキです!

 

よくブログで「吹き出し」を見かけませんか?

いいなーと思いつつ、設定が大変なんだろうなと思って敬遠していました。

 

ですが、そこはGoogle様。

検索をすれば、作り方がズラズラを表示されました。

 

その中でも、下記のサイトを参考にさせていただきました。

(勝手ながら、掲載させていただいております)

 

実際、あっという間に表示できるようになったので、

手順を含めて紹介させていただきます。

吹き出しの作成方法とその手順

①アイコンの準備

まずは、吹き出しで使用するアイコンの準備です。

私は2種類のアイコンを用意しました。

f:id:tanakayuuki0104:20190423052842p:plain 私

f:id:tanakayuuki0104:20190429055243p:plain 嫁

 

(このアイコンはここから作れますよ!)

Iconpon - 高品質な無料(フリー)の顔アイコン素材

 

次に、アイコンを「はてなフォト」へアップロードします。 

まずは右上のメニューバーから「はてはフォトライフ」へ移動。

f:id:tanakayuuki0104:20190429061730p:plain

 

右側にフォルダの項目があるので、そこへ画像を保存します。

どこへ保存してもいいですが、今回は「新規➡︎吹き出し用」フォルダを作成しました。

f:id:tanakayuuki0104:20190429061917p:plain

 

「吹き出し用フォルダ」へ移動し、下記リンクをクリックします。

f:id:tanakayuuki0104:20190429062104p:plain

 

アップロードする画像を選択しましょう。

画像が複数ある場合は、その下の欄に登録していきます。

選択し終えたら、下にあるアップロードをクリックします。

f:id:tanakayuuki0104:20190429062222p:plain

はい、出来上がり!

こんな感じで画像がアップロードされるはずです。

f:id:tanakayuuki0104:20190429062350p:plain

 

②CSSの準備

必要なCSSコードは先ほど紹介したページに記載がありますので、

そちらをご用意ください。

https://www.notitle-weblog.com/entry/fukidashi

 

画像のURLは、先ほどのページで画像を右クリックし、アドレスをコピーしてCSSコードに貼り付けましょう。

f:id:tanakayuuki0104:20190429063618p:plain

 

CSSコードはデザインにある「デザインCSS」に貼り付けます。

f:id:tanakayuuki0104:20190429063753p:plain

 

私が作成したCSSコードはこんな感じです。

f:id:tanakayuuki0104:20190429064515p:plain

  

表示させるとこんな感じ

すごい!こんな簡単にできたよ!!

 

へ〜、すごいね。

 

よーし、もっと色々試してみよっかな〜

 

・・・ブログばっかりやってないで、家事と育児もちゃんとしてよ!

 

ほわわわわ〜〜〜〜、は・・・はい!!

 

なんて、いつもの会話もこの通り。。。

 

まとめ

吹き出しがあると、文字だけの文章よりも格段に見やすくなりますよね?

堅苦しさもなくなり、非常にスッキリします。

 

作成方法もものすごいお手軽なので、ぜひ試してみることをオススメします!

(コードを作ってくれた人には感謝です!)