ブログ

吹き出し会話をブログに導入!設定までに参考にしたサイトを紹介

やってみようShonan Boyのぺぺです。

ブログでよくLINEみたいなやりとり見かけませんか?
他のブロガーさんとか見てて、いつかやってみたいと思っていました!!

ボクのブログではこちらの記事で初めて吹き出しを使いました。
>> 宮崎日向市のサーフィンPR動画が話題に。初心者は見るべし!!


「お~、いつの間に吹き出し会話なんて出来るようになったんだ。」

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

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

ということで、今日は吹き出し(会話)形式をブログに設定・導入するまでを書きます。
まだ、やったことがない人はすこしでも参考になれば、幸いです。

ブログに吹き出し会話を導入したキッカケ

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

でも、この吹き出し会話ってどうやってやるんだ?、と思ってました。

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


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

でも、毎日の記事を書くので手いっぱいでなかなか導入する機会がありませんでした・・・そんな時です、またしてもこの方がボクのもとに降りてきてくれました!!

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

www.pojihiguma.com


「お~、なんと!!!!これこれこれ!!!!!

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

なんというタイムリーな記事。
本当にいつもありがとうございます。

※ボクはこの時ははてなブログを使っていました。
現在はワードプレスなので自分で工夫して今の吹き出し会話の形になっています。

関連記事:>>【はてなブログからワードプレスへ移行】羽田空港サーバーさんのサービス

ブログに吹き出し会話を設定してみた

この記事でベースのやり方はほぼ分かると思います。
https://www.notitle-weblog.com/entry/fukidashi

手順は

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

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

とても分かりやすいので、これでほとんどできちゃいました。
ただボクの場合、吹き出しに使う人物の写真(イラスト)がどうしても設定できませんでした。

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

「なんでだろう?」

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

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

ということで、自分のブログの記事に吹き出しで使いたい画像(イラスト)を投稿して、URLを取得しました。
※そのあとに画像を削除しても問題ありませんので安心してください。

ブログで吹き出し会話を設定するなら、スマホでチェックしよう

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

「ありがたや~!!全然スマホサイトの方を忘れていました」

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

www.mayoinu.com

そして、修正しました。

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

間違ってるよ~とか、ここをこうした方がいいよ~とか、気付いたら指摘してくれたり、アドバイスくれたり。
だから、はてなブログはやめられませんね。

※現在、ワードプレスに移行しております。>>【はてなブログからワードプレスへ移行】羽田空港サーバーさんのサービス

現在使っている吹き出し会話

そして、今現在使っている吹き出し会話がこちら。

「先ほどからずっとこれですが」

このShonan Boyのキャラアイコンと、吹き出し会話をシンプルに使った設定にしています。

参考にしたのが、こちらの記事。
https://junichi-manga.com/blog-character-img/

ボクもはてなブログからワードプレスに移行した時に吹き出し会話が崩れてしまって、一つづつ修正するのが大変でした…

なので、シンプルにすべてに対応できるこの記事中に入れる吹き出し会話を設定しています。

おわり

いや~、吹き出しの会話形式はなんとか形になりましたね~。
まだ、少し修正する部分もありますけど、とりあえずは良しとしましょう。笑

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

なんか、オリジナルキャラのイラストとか作りたくなりました。笑
これで少しはブログらしくなってきましたかね~。

参考にさせてもらいましたみなさん、 ありがとうございました!!
まだ、吹き出し(会話)形式やったことない人は、ぜひトライしてみてくださいね。

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