Shonan Boy

Shonan Boy

湘南の情報や時には熱く、これからの働き方や健康、栄養、経済のことまで。たまにゆるく思ったことも書いています。

吹き出し(会話)形式をブログに導入!設定までに参考にしたサイトなど

シェアする

やってみよう

更新日:2017/03/28

Shonan Boyブロガーことぺぺ(id:akabaneyama150)でございます。

ブログでよくLINEみたいなやりとり見かけませんか?

他のブロガーさんとか見てて、いつかやってみたいと思っていました!!

 

お~、いつの間にそんな高度なこと出来るようになったんだ。笑

超弱小ブロガーなのに、よくできたなと。

 

はい、それも色々な方のブログ情報やアドバイスでなんとか使えるようになりました。

ありがとうございます。

ということで、今日は吹き出し(会話)形式をブログに設定・導入するまでを書きます。

まだ、やったことがない人はすこしでも参考になれば、幸いです。

 

 

吹き出し(会話)導入のキッカケ

前からやりたかったんですよ!!

でも、これはどうやってやるんだ?、と思ってました。

はてなブログでも他のブログでもこの吹き出し(会話)を上手く使って、いかにも会話しているように見せているブログ多いですよね。

 

いいな~、いいな~。オシャレだな~と指をくわえてみていました。

でも、毎日の記事を書くので手いっぱいでなかなか導入する機会がありませんでした・・・

 

そんな時です、またしてもこの方がボクのもとに降りてきてくれました!!

ボクのお師匠さん、ポジ熊(id:pojihiguma)さんがこんな記事を書いてくれました。

www.pojihiguma.com

 

お~、なんと!!!!

これこれこれ!!!!!

これをまさしく探していたんですよ!!!!!!

 

なんというタイムリーな、記事。

本当にいつもありがとうございます。

 

なにはともあれ、実際にやってみた 

まずポジ熊さんの記事にリンクが張ってあった方の記事。

shiromatakumi.hatenablog.com

この記事でベースのやり方はほぼ分かると思います。

手順は

  1. まずはCSSにコードをコピペする
  2. ブログHTML編集に切り替えて、吹き出し(会話)を挿入したい場所にコードを入れる 

 

ボクが実際使ったコードなどはこちらの記事を参考にさせてもらいました。ありがとうございます。

georges.hatenablog.jp

とても分かりやすいので、これでほとんどできちゃいました。

ただボクの場合、吹き出しに使う人物の写真(イラスト)がどうしても設定できませんでした。

自分のファイルにある画像を右クリックしても「画像アドレスをコピー」が出てこなかったのです・・・

なんでだろう?

 

調べてみると、どうやら一回ブログなどWEB上に画像を上げないとURLが取得できないみたいです。

なるほど、原因はこれですね。

 

ということで、自分のブログの記事に吹き出しで使いたい画像(イラスト)を投稿して、URLを取得しました。

※そのあとに画像を削除しても問題ありませんので安心してください。

 

あとはジョージさん(id:george-gogo)の記事の通りに設定すればOKです。

いや~、無事出来ました。

良かった良かった。

 

吹き出し(会話)はスマホサイトもチェックしよう

ぴょのさんがスマホサイトの問題点を指摘してくれました。

ありがたや~!!

全然スマホサイトの方を忘れていました。

 

こちらのブログ記事を参考にさせてもらいました。ありがとうございました。

www.mayoinu.com

 

そして、修正しました。

 

いや~、こういうのってすごくいいですよね~!!

間違ってるよ~とか、ここをこうした方がいいよ~とか、気付いたら指摘してくれたり、アドバイスくれたり。

だから、はてなブログはやめられませんね。

こういう環境に感謝感謝です。

おわり

いや~、吹き出し(会話)形式なんとか形になりましたね~。

まだ、少し修正する部分もありますけど、とりあえずは良しとしましょう。笑

 

そして、初めての吹き出し(会話)形式を使った記事がこちらです。

www.shonanboy.net

 

なんか、オリジナルキャラのイラストとか作りたくなりました。笑

これで少しはブログらしくなってきましたかね~。

参考にさせてもらいましたみなさん、 ありがとうございました!!

 

まだ、吹き出し(会話)形式やったことない人は、ぜひトライしてみてくださいね。

やる前にはバックアップでCSSとか導入する前にすぐに戻れるように準備もしっかりしましょう!!