不器用な面倒くさがり屋のBlogger改造計画⑬QooQでフキダシ設定

こちらのHTMLとCSSでQooQでもフキダシ設定できました！

フキダシ設定の手順

０．「テーマ」→「カスタマイズ」の右の三角▽→「バックアップ」

１．ページにアイコン画像を貼り付け

「ページ」→「新しいページ」でアイコン画像を貼り付けたページを「公開」

「公開」状態でも「ページ」は表示されません。

「ページ」→画像を貼り付けたページにカーソルを合わせる→目玉マークをクリック（カーソルを合わせると表示されます）

２．アイコン画像を右クリック→「画像アドレスをコピー」

３．アイコン画像を貼り付けたページに画像アドレスも貼り付けて保存（後で何度も使うので同じページに貼り付けておくと便利です）

４．「テーマ」→「カスタマイズ」の右の三角▽→「HTMLを編集」

５．CTRL+Fで検索窓を開いて個別記事エリアを探す

６．個別記事エリアの一番下の部分にSTAND4Uで公開されているCSSを貼り付け→保存

７．フキダシを使いたい記事作成画面の左上ペンマークをクリックして「作成ビュー」から「HTMLビュー」に

８．フキダシ用のHTMLを貼り付けて画像アドレスを指定

　　

左側アイコンのフキダシ

右側のアイコンのフキダシ

ここは右のフキダシに入れるセリフの１行目が入る

ここはセリフの２行目が入る

９．フキダシを表示させるHTMLのどこに何を入れるのか詳しく書いてみました。

<div class="balloon_l">
  <div class="faceicon">
　　<img src="ここに左側に表示されるアイコンの画像アドレスを入れる" alt="" >
</div>
  <p class="says">ここに左のフキダシに入れるセリフを入れる</p>
</div>

９－２．右側アイコンのフキダシ設定

<div class="balloon_r">
  <div class="faceicon">
    <img src="ここに右側に表示される画像アドレスを入れる" alt="" >
  </div>
    <p class="says">ここに左のフキダシに入れるセリフを入れる</p>
</div>

９－３．セリフを改行したい場合（左側アイコン）

<div class="balloon_l">
  <div class="faceicon">
    <img src="ここに右側に表示される画像アドレスを入れる" alt="" >
  </div>
    <div class="says"><p>ここに右のフキダシに入れる
    セリフ１を入れる</p><p>ここにセリフ２を入れる</p></div>
</div>

９－４．セリフを改行したい場合（右側アイコン）

<div class="balloon_r">
  <div class="faceicon">
    <img src="ここに右側に表示される画像アドレスを入れる" alt="" >
  </div>
    <div class="says"><p>ここに右のフキダシに入れる
    セリフ１を入れる</p><p>ここにセリフ２を入れる</p></div>
</div>