【Orange ZELO】吹き出し機能の使い方

まず、吹き出しに設定したい画像をアップロードしましょう。

Bloggerの管理画面から『ページ』へ移動し、使いたい画像を貼り付けていきます。

わかりやすくするため『ページ』にしていますが、普通の『投稿』から行っても大丈夫です。

画像を貼り付けたら、画像アドレスをコピーします。

画像アドレスはあとで使うので、一度メモなどに貼り付けるとわかりやすいでしょう。

次に、テーマファイルで少し設定を加えます。

Blogger管理画面の『テーマ』から『HTMLの編集』を選択します。


HTML内でポインタを選択した状態で、windowsなら『ctrl + f』、macなら『command + f』で、html内での検索ボックスを表示できます。
そしたら、検索ボックスに『フキダシの設定』と入力し検索してください。

/* ***** フキダシの設定 ***** */
.後で使う文字::after {background-image:url(画像URL);}
.後で使う文字::after {background-image:url(画像URL);}

このような部分が見つかるので、(画像URL)のカッコ内の文字を消して、先ほどコピーした画像アドレスを貼り付けます。

『後で使う文字』はそれぞれ吹き出しを呼び出す時に使用するので、わかりやすい文字を設定しましょう。

吹き出しのキャラクターはいくつでも設定できますが、呼び出すときに使用する文字が同じだとうまくいかないので気をつけましょう。

では、実際に呼び出してみます。

.touson::after {background-image:url(123456touson.png);}

のようにファイルで設定したとします。『123456touson.png』の部分はコピーしたアドレスで、『touson』は設定した文字です。

これを呼び出す時は、まず記事作成画面の左上からHTMLモードに切り替えます。


すると、このような英数字だらけの画面になります。今回は、以下のような文で呼び出してみます。

<div class="f-l touson">ここの文章が入るぞ！</div>

これをhtmlモードの本文に貼り付けて表示すると…
つまり、呼び出す時は次のコードのようにしてHTMLに貼り付けましょう。

<div class="f-l 後で使う文字">ここが吹き出しの内容</div>

『f-l』の部分を『f-r』にすると、吹き出しの位置を右側にすることができます。


吹き出しのデザインはテーマデザイナーから変えることもできるので、ぜひお試しください。

テーマデザイナーの使い方は、こちらの記事をご覧ください。

>>【Blogger】テーマデザイナーの機能・使い方を徹底解説！