ZELOの吹き出し機能を使う方法
ZELOには、標準でフキダシ機能がついています。
テーマファイルの特定の部分に少し付け加えるだけで、記事を書くときにいつでも呼び出せるようになります。
この記事では、その準備、使い方について説明していきます。
フキダシ機能を使うための準備
まず、フキダシにしたい画像を用意して、Bloggerにアップロードしましょう。
Boggerでの写真アップロードについては、こちらの記事を参考にしてください。
ZELOデフォルトのサムネ画像を変更する方法 - Movelog
アップロードした画像のアドレスをコピーしたら、「テーマ」→「html」の編集へいきます。
ここから実際にhtmlを編集していきますが、htmlの中からかんたんに調べる・探す方法を別にまとめました。
Bloggerテーマのhtmlをいじるときに気をつけること - Movelog
さて、テーマのhtmlの中から、以下の部分を探してください。
先ほどコピーした、フキダシにしたい画像のアドレスを（画像URL）の文字を消して、かっこ内に貼り付けてください。
もう一つ「あとで使う文字」のところは、フキダシを呼び出すときに必要な文字なので、覚えやすい文字を設定しましょう。
この文字は普通、半角英数字が使われるのでその方が良いです。
これで準備は完了です。
例えば、上のようなフキダシを表示したい場合。
この場合、記事のhtmlにはこう記入します。
ぼくは「あとで使う文字」を「me」として設定しました。
そして、「f-l」つまりフキダシを左表示にしています。
このように、htmlで準備しておけば簡単に使うことができます。
ちなみに「後で使う文字」や画像アドレスを変えて、htmlに記入した部分を増やすことで、フキダシにいくつか種類を作ることもできます。
アップロードした画像のアドレスをコピーしたら、「テーマ」→「html」の編集へいきます。
ここから実際にhtmlを編集していきますが、htmlの中からかんたんに調べる・探す方法を別にまとめました。
Bloggerテーマのhtmlをいじるときに気をつけること - Movelog
さて、テーマのhtmlの中から、以下の部分を探してください。
.後で使う文字::after {background-image:url(画像URL);}
先ほどコピーした、フキダシにしたい画像のアドレスを（画像URL）の文字を消して、かっこ内に貼り付けてください。
もう一つ「あとで使う文字」のところは、フキダシを呼び出すときに必要な文字なので、覚えやすい文字を設定しましょう。
この文字は普通、半角英数字が使われるのでその方が良いです。
これで準備は完了です。
フキダシの使用方法
フキダシを使用するには、まず記事作成ページをhtmlに切り替えてください。記事を書く画面左上の 「作成・html」ボタンで切り替えられます。
そしたら、記事のhtmlにこう記入します。
<div class="f-l あとで使う文字">フキダシの中身</div>
基本はこの形です。
f-lのところをf-rにすると、フキダシの表示される向きが右側に変わります。
そしたら、記事のhtmlにこう記入します。
<div class="f-l あとで使う文字">フキダシの中身</div>
基本はこの形です。
f-lのところをf-rにすると、フキダシの表示される向きが右側に変わります。
少しわかりにくいと思うので、例を紹介します。
ここに文字が表示されるよ！
例えば、上のようなフキダシを表示したい場合。
この場合、記事のhtmlにはこう記入します。
<div class="f-l me">ここに文字が表示されるよ！</div>
ぼくは「あとで使う文字」を「me」として設定しました。
そして、「f-l」つまりフキダシを左表示にしています。
このように、htmlで準備しておけば簡単に使うことができます。
ちなみに「後で使う文字」や画像アドレスを変えて、htmlに記入した部分を増やすことで、フキダシにいくつか種類を作ることもできます。
