ZELOの吹き出し機能を使う方法


ZELOには、標準でフキダシ機能がついています。

テーマファイルの特定の部分に少し付け加えるだけで、記事を書くときにいつでも呼び出せるようになります。

この記事では、その準備、使い方について説明していきます。

フキダシ機能を使うための準備

まず、フキダシにしたい画像を用意して、Bloggerにアップロードしましょう。

Boggerでの写真アップロードについては、こちらの記事を参考にしてください。

ZELOデフォルトのサムネ画像を変更する方法 - Movelog

アップロードした画像のアドレスをコピーしたら、「テーマ」→「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 me">ここに文字が表示されるよ!</div>

ぼくは「あとで使う文字」を「me」として設定しました。

そして、「f-l」つまりフキダシを左表示にしています。

このように、htmlで準備しておけば簡単に使うことができます。

ちなみに「後で使う文字」や画像アドレスを変えて、htmlに記入した部分を増やすことで、フキダシにいくつか種類を作ることもできます。

コメント