吹き出しは、ワードプレスで作られているサイトではよく見るのですが、Bloggerにはついてなかった～。ワードプレスでもテーマによってはついてないのもあるけど、プラグインとかがあるので、私でもなんとかなった。
 |
| ワードプレスで作ったサイトでは私でも簡単に、吹き出し機能追加できました。 |
しかし、Bloggerでは、テーマにCSSを記述して～とか面倒くさい感じがします。
イラストとかでお茶を濁していたのですが、お茶を濁すことが面倒くさくなったので、頑張って吹き出し機能を追加してみることにしました。
いろいろ調べたのですが、こちらの方の記事を参考にしました。
PCスキルが高くない私なのですが、頑張ったら、なんとなくできたっぽいです。
イラストと吹き出しの微調整が難しかったです。もう記憶力が衰えてきている私なので、やり方を忘れないようにここに書いておきます。
どなたかの参考にもなれば幸いです。
やり方① テーマの中に吹き出しのＣＳＳを追加します
私のブログのテーマは「qooq」というのを使っています。
シンプルで速い日本語bloggerテンプレート「QooQ」の紹介！
qooqのテーマの中に吹き出しのCSSを追加記述する場所は、テーマ＞カスタマイズ＞HTMLの編集から入ります。
まあうさブラザーズさんが作られた、CSSをコピペさせてもらって、個別アイテムの一番下の部分に追加記述しました。
 |
この項目を探して、
「]]></b:skin>」から上へCSSを追加記述しました。
やり方② 吹き出しとイラストのバランス 微調整
CSSにちゃんと、吹き出しの微調整部分を書いてくださっていたので、そこの数値を変更していったのですが、なかなかうまくいかず、何度かやりなおしました。
基本値は、margin、5px、0、0、20px（左）、margin、5px、10px、0（右）だったのですが、私のイラストを読み込ませると、イラストに対して吹き出しのバランスがおかしい～。
 |
| これ、margin、20,5,0,0（右）です。 |
なんか違う～と、数値を変えてみました。
 |
| こちらは、10,5,0,0にしてみました。 |
もっと違うやんけ～😭
 |
|
| 15,20,0､0にしました。 |
ちょっと微妙だけど、もうこれでいいか😥
年を取ると、適当度合いがひどくなる、と思って、読んでいる方が諦めて～😂
やり方③ 吹き出しの色変更
吹き出しの色も変更してみました。
色の変更にもちゃんとCSSに「ここを変更」と、変更箇所が記述してありました。
吹き出しの囲み色の部分が、位置調整記述の下の部分で、吹き出しエンドの手前くらいに角の部分の色変更と、吹き出し囲みの色を変更するには2ヶ所変更しないといけないようです。
 |
| 青にしました。色変更も迷ってしまって、決めることが難しかったです。 |
やり方④ 画像サイズ、フォントサイズ
画像サイズ、吹き出し内のフォントなども少し変更しました。
画像サイズは60×60pxとしました。
吹き出し内のフォントサイズは多分、「says」という部分のfontｰsizeを変更するといいのだと思います。
このCSSを使うために、まあうさブラザーズさんが作ってくれた、HTML文と、画像のURLを入れたのですが、Bloggerの画像URLが長くてびっくり。
吹き出し機能を追加したけど、使うのも結構大変だなぁと気づいた私でした。
