無料ブログでも吹き出しトークなんて怖くない!

投稿日:2017-06-14 更新日:

以前WordPressで吹き出し可能なプラグインを紹介しましたが、無料ブログでも「吹き出し」やりたいですよね。見てたら楽しそうですもんね。

でもCSSとかHTMLとかよくわからない。
どうにかネット上で探してきたCSSを貼ってみたものの、吹き出しの色とか画像のサイズとか変えたくてもどこをどう変えればいいのかわからないということが多いかと思います。

じゃあ、できるだけ簡単に変更できちゃうようにしてみようということでFC2ブログをベースに考えてみました。
僕もCSSできるのかって聞かれると「いや~わかんないっすね」と即答してしまう程度なので、調べに調べまくってコーディングしてみました。
もし、ココ変だよってところがあったらコメントいただけると幸いです。

ちなみに、今回はいつもの二人はお休みです。
おなじ「吹き出し」ではあるんですけど、出処が違う吹き出しなので観てるあなたも僕も混乱しそうなので。
ここでもプラグインではなく、新しいオリジナル吹き出しで表示するようにしました。

新しいオリジナル吹き出しの記事も参考にしてみてくださいね。

吹き出しで会話
ブログで吹き出し会話第3弾!より使いやすくパワーアップ!

以前、無料ブログでも吹き出しが使えるようにと以下の記事を書いたことがあります。 今回、少しパワーアップして「考え中吹き出し」を追加しました!! さらにCSS内の変数を排してHTML上から吹き出しの文字 ...

FC2にこの方法で吹き出しを追加してみる

まずはこの方法でFC2に吹き出しを追加するとどんな感じになるのか気になるかと思いますので、画像とリンクを貼っておきますね。


実際のページを見るにはココ:FB-800とかりんの日記

CSSをFC2テンプレートに適用させる

上記のような吹き出しを適用させるためにFC2ブログの「テンプレートの設定」から行っていきます。
このとき、万が一間違ってしまっても大丈夫なようにテンプレートの複製をおすすめします。

編集したいテンプレートを選んだら、スタイルシート編集でコードを追加します。

スタイルシート編集で追加するコードは以下のコードです。
以下のコードをすべてコピーして貼り付けてください。
これでとりあえず吹き出しで会話をするための準備ができました。

会話形式の記事を書く

次に記事を書く際に以下のHTMLコードを使います。

左側に画像が表示される吹き出しの場合はこちらのコードをコピーして

  • 画像URL:表示したい画像のURL
  • ここは左吹き出し:会話の内容

に置き換えてください。

右側に画像が表示される吹き出しの場合はこちらのコードをコピーして

  • 画像URL:表示したい画像のURL
  • ここは右吹き出し:会話の内容

に置き換えてください。

どうでしょうか?あなたのブログに吹き出しはでましたか?

きっとあなたの感想はかりんも言ってますが、こうだと思います。
「吹き出しの色がきもちわるくない?」
はい、色変えちゃいましょう。

あなた好みの吹き出しにカスタマイズ

ブログのデザインやカラムのサイズによっては吹き出し本体サイズや色、アイコンサイズを少し変えたいなってときがあります。
ですが、CSS中のいろいろなところを変えないといけなかったり、変え忘れてしまって「アレ?」ってことがあったり。

なにより間違って変えてしまった日には戻せなくなって「もう、あ~きらめた!」なんてことも。
そんなことがないようにできるだけ簡単に変更できるようにしてみましたので、参考にしてください。

吹き出しの色を変える

まずは、あなたが一番気になっているであろう吹き出しの色を変えてみます。というか簡単なのでいろいろ変えてみてあなたのブログに合った色にしてみてくださいね。

先ほどスタイルシートに貼り付けたコードの一番最初の方に以下のような箇所があります。
ここの色を好きな色に変えてみてください。もちろんカラーコードでOKですよ。

アイコンサイズを変える

もう少しアイコン大きい方が良かったり、小さい方がいいなってときはここのサイズを変えてみてください。

レスポンシブに対応する

FC2ブログでレスポンシブに対応する場合は「スマートフォン用」のテンプレートの編集を行う必要があります。
一度もスマートフォン用のテンプレートを設定したことがないという場合はテンプレート自体が設定されていませんので、まず好きなテンプレートを追加しましょう。

テンプレートを設定したことがある場合は「テンプレート管理」
テンプレートの設定をしたことがない場合は「テンプレートの追加」から追加後にテンプレートの管理に進みましょう

スマートフォン用テンプレート管理に進んだら先ほどと同様にCSSの貼り付けを行います。
その際以下のようにアイコンサイズと吹き出しサイズをスマートフォンに合ったサイズに変更します。
ここもあなたのブログに合ったサイズに変更しましょう。

まとめ

実は、少しだけ変更を加えてはいますが、ここでも同じようにして吹き出しでの会話を表示させています。

吹き出しを使えば、その寂しさも吹っ飛ぶかもしれません!
基本的には吹き出し用CSSを貼り付けて、会話を入れたいところに吹き出し用HTMLを入れればよいので簡単にできると思います。
ぜひ、活用してみてください。

-ブログ運営

Copyright© FoB log , 2019 All Rights Reserved.