【QooQカスタマイズ】吹き出し(会話形式)のデザインを追加する

本ページはプロモーションが含まれています

 


今回もBloggerの人気テンプレート「QooQ」のカスタマイズをやってきましょう。今回は様々なブログでよく見る会話形式(吹き出し)のデザインを追加したいと思います。いつもブログカスタマイズで参考にさせていただいているサルワカさんのコードを参照させていただきました。

この記事の内容
  • Bloggerテンプレート「QooQ」に吹き出し(会話形式)デザインを追加する方法を紹介します
  • 吹き出し(会話形式)の実際に導入したサンプルを紹介します


参考にした記事

こちらのサルワカさんの記事の「会話(チャット)風」のコードを利用させていただきました。QooQに実装するにあたり特に修正は不要でしたのでそのまま実装させていただきました。HTML・CSSはサルワカさんのサイトより確認をお願いします。

注意事項
  • HTML・CSSの編集をする前にはバックアップを取ることをおすすめします。
  • 自分は対象のCSSを「個別記事」エリアの末尾に追記しました


QooQで吹き出しを実装した例

自分の写真

吹き出し(会話形式)テストです。このように吹き出しを表示できました

このような感じで表示することができました。自分のブログのテーマカラーが青だったので、特にカラーコードなども変更せず、このまま利用させていただこうと思います。画像については一度Bloggerにアップし、画像のURLを調べて貼り付けすればOKです。

まとめ

吹き出しについても簡単に実装することができました。BloggerでもWordPressのようにおしゃれなデザインを使って記事をかけるので楽しいですね。最初、Bloggerの利用を始める際に、公式テンプレートがダサくてかなりモチベーションが下がりましたが、QooQを使うようになってから自分の好きなデザインにカスタマイズできるようになったので非常に嬉しいです。もし皆様も吹き出しを追加してみたくなりましたらぜひサルワカさんのサイトを参考にトライしてみてください。