Bloggerで記事内に吹き出しを作り会話形式で書く方法


こんにちは。

最近よくブログでこんなの見かけませんか？
どーも、こんにちは！
そう、会話形式で表示される、フキダシのやつです。

これ文章のいいアクセントになるし面白いんですが、「どうせはてなブログやワードプレスだけの機能なんだろうなー。」なんて思っていました。

しかし、試しに調べてみると。。。
Bloggerでもできたよ！
なんと、Bloggerでもあこがれのフキダシを実装することができました。

なので、今回はフキダシのやつをBloggerでも実装する方法について書いていきたいと思います。

Bloggerで記事内にフキダシを作ろう！

今回はこちらのページを参考にしましたが、Bloggerだといくつか異なる部分があるのでそこらへんも説明していきます。


まず、こちらのページにあるCSSのコード（長いやつ）をコピーします。

このコードを貼り付けるために、Bloggerの編集画面から「テーマ」→「HTMLの編集」を開きます。

そうしたら、ブログのhtmlコード内を検索して、</b:skin>というところを探しましょう。

コード内検索の方法はこちらの記事へ。

Bloggerでテーマをいじるならhtml上でコード部分を検索しよう

</b:skin>の直前にコピーしたコードを貼り付けましょう。

貼り付けたら、フキダシの名前と画像を設定していきます。

.クラス名::after {background-image:url(画像のURL);} http://www.notitle-weblog.com/entry/fukidashi

コード一番下、この部分がフキダシのキャラクターごとの設定です。クラス名はあとでわかりやすい名前にしておきましょう。

画像のURLはBloggerの場合、適当な記事の編集画面から「画像を挿入（写真のアイコンのところ）」を選択し、「このブログから」を選択します。


そしたらあとは「画像のURLをコピー」して、さっきテーマのhtmlにコピペしたコードの（画像のURL）部分に貼り付ければOKです。

もし使いたい写真をアップロードしていない場合は、Bloggerの編集画面から「ページ」で新しくページを作り、写真を貼り付けましょう。

ページ名はわかりやすく「フキダシ素材」とかで大丈夫です。

ここで作ったページは写真をアップロードする用なので、写真を貼り付けて保存したら公開しなくてもOKです。

クラス名と画像が設定できたら、あとは上のリンクの記事通りに使うだけ。

一応ここでも使い方の例を上げておきます。

<p class="r-fuki クラス名">ここの文章がフキダシに表示されるよ！</p>

これを記事編集画面のhtmlに直接貼り付けるとこんな感じになります。 （クラス名は各自で設定したもの）
ここの文章がフキダシに表示されるよ！
「r-fuki」のところを「l-fuki」にすると、フキダシの画像が左に表示されるので、これを組み合わせれば会話形式でかけます。

まとめ。

このフキダシのやつ、ふつうに面白い。

ブログ書いてても面白いし、ブログの流れやデザイン的にもいい感じですね。

これからどんどん使って行きたいと思います。
楽しいよこれ！
では！

 B! LINE