WordPressには会話風の吹き出しを入れるプラグインがあるのですが、bloggerには残念ながら会話風吹き出しの機能は備わっていませんでした（汗）


でも、流石はカスタムが自由なbloggerは先輩ユーザーがコピペで使える会話吹き出しのcssとhtmlで作ってくれていました。この記事では、bloggerブログに会話風の吹き出しをいれる方法について解説します。是非、最後まで読んでくださいね。



会話吹き出しとは


会話吹き出しとはこんな感じです。


やぁ、チャコちゃん♪

 

こっちにも来ちゃったね☆

こんな感じでブログが書ける機能になります。会話吹き出しを入れて何か特別な効果はありません。ですが、ブログを読みに来てくれる人の目を休めることができるので、所々に入れておきたいパーツですね。



会話吹き出しの使い方


会話吹き出しの使い方はとっても簡単です。コピペで使えるので、ブログ初心者でも簡単に使えるので安心してくださいね。では早速、準備に入りましょう。


準備で必要いなるのは会話吹き出しの「css」と、キャラクターの画像です。キャラクターの画像はあなた自身で準備してくださいね。ここでは、会話吹き出しのcssを載せておきます。


下記のcssをコピーします。（そのままコピーしても大丈夫です。）

  • /*--------------------------------------*/
  • /*****会話のCSSここから*****/
  • .talk-wrap{
  •  display: block;
  •  clear: both;
  •  margin:0 auto 3px auto;
  •  }
  • .talk-wrap p{
  •  margin:0;
  •  }
  •  .left-icon{
  •  width: 100px;
  •  height: 100px;
  •  border-radius: 50%;
  •  -webkit-border-radius: 50%;
  •  background: no-repeat;
  •  background-size: 180%;
  •  background-position: center;
  •  float:left;
  •  display:inline-block;
  •  box-shadow: 1px 1px 5px #aaa;
  •  border: 3px solid #fff;
  •  margin-bottom: 10px;
  •  }
  •  .talk-left{
  •  float:right;
  •  position: relative;
  •  background: #fff;
  •  border: 2px solid #666;
  •  padding: 3%;
  •  border-radius: 10px;
  •  width: 70%;
  •  margin-top:10px;
  •  box-shadow: 1px 1px 5px #aaa;
  •  margin-bottom: 10px;
  •  }
  • .talk-left:before {
  •  content: "";
  •  display: inline-block;
  •  border: 10px solid transparent;
  •  border-right-color: #666;
  •  position: absolute;
  •  left: -20px;
  •  top: 25%;
  •  margin-top: -9px;
  • }
  • .talk-left:after {
  •  content: "";
  •  display: inline-block;
  •  border: 9px solid transparent;
  •  border-right-color: #fff;
  •  position: absolute;
  •  left: -16px;
  •  top: 25%;
  •  margin-top: -8px;
  • }
  •  .right-icon{
  •  width: 100px;
  •  height: 100px;
  •  border-radius: 50%;
  •  -webkit-border-radius:50%;
  •  background: no-repeat;
  •  background-size: 180%;
  •  background-position: center;
  •  float:right;
  •  display:inline-block;
  •  box-shadow: 1px 1px 5px #aaa;
  •  border: 3px solid #FFF;
  •  margin-bottom: 10px;
  •  }
  •  .talk-right{
  •  float:left;
  •  position: relative;
  •  background: #fff;
  •  border: 2px solid #666;
  •  padding: 3%;
  •  border-radius: 10px;
  •  width: 70%;
  •  margin-top:10px;
  •  box-shadow: 1px 1px 5px #aaa;
  •  margin-bottom:10px;
  •  }
  •  .talk-right:before {
  •  content: "";
  •  display: inline-block;
  •  border: 10px solid transparent;
  •  border-left-color: #666;
  •  position: absolute;
  •  right: -20px;
  •  top: 25%;
  •  margin-top: -9px;
  • }
  • .talk-right:after {
  •  content: "";
  •  display: inline-block;
  •  border: 9px solid transparent;
  •  border-left-color: #fff;
  •  position: absolute;
  •  right: -16px;
  •  top: 25%;
  •  margin-top: -8px;
  • }
  • .talk-end{
  •  clear:both;
  • }
  • /*****レスポンシブ設定*****/
  • @media screen and (max-width: 480px){
  •  .left-icon{
  •  width: 80px;
  •  height: 80px;
  •  }
  •  .talk-left{
  •  width: 65%;
  •  }
  •  .right-icon{
  •  width: 80px;
  •  height: 80px;
  •  }
  •  .talk-right{
  •  width: 65%;
  •  }
  •  }
  •  @media screen and (max-width: 380px){
  •  .left-icon{
  •  width: 60px;
  •  height: 60px;
  •  }
  •  .talk-left{
  •  width: 65%;
  •  }
  •  .right-icon{
  •  width: 60px;
  •  height: 60px;
  •  }
  •  .talk-right{
  •  width: 65%;
  •  }
  •  }
  • /*****会話のCSSここまで*****/
  • /*--------------------------------------*/


    • 上記のコードをコピーして、テーマのcssに貼り付けます。因みに、このテーマ（SMART）は管理ページの「テーマ」⇒「カスタマイズ」⇒「詳細設定」⇒「cssを追加」で辿りつけます。cssを貼りつけたら忘れずに「保存」してくださいね。




    会話吹き出しを使ってみる





    会話吹き出しはhtmlを使う事で簡単に入れることができます。htmlも左用・右用があるので、あなたの使い勝手に合わせて準備しておいてください。では早速、コピペ用のhtmlを載せておきます。


    左吹き出しhtml

    1. <!--左の会話-->
    2. <div class="talk-wrap">
    3. <div class="left-icon" style="background-image: url('画像のURL');">
    4. </div>
    5. <div class="talk-left">
    6. ここに左の会話を書く
    7. </div>
    8. </div>
    9. <div class="talk-end">
    10. </div>


    この画面で画像を指定します。上記htmlの中にある画像のURLの部分に、ブログで使いたい画像のURLをいれてください。


    続いて上記のhtmlの中にある「ここに左側のかいわを書く」の部分に好きな文章を入れます。ここまでの作業で会話吹き出しは完成です。


    このブログで使っているテーマです。



    作ったhtmlは下書きに残そう


    吹き出しのhtmlは簡単に作れるのですが、毎回作るのは意外と面倒くさいです。なので、僕は「下書き」に残しています。今の所、登場人物は２人だけなので、キャラクター毎に右・左のバージョンを保存しています（笑）


    使う時にコピーしてhtml画面に貼り付けて文章を書いています。最初の作業は面倒ですが、使うのはスムーズに使えるのでお勧めしておきますね。




    この記事のまとめ


    この記事では「bloggerブログに会話風の吹き出しを入れる方法」をテーマに解説しました。コピペ用のcssとhtmlも載せてみました。いかがでしたか？


    ブログ記事の中に吹き出しを入れることで、ブログが賑やかになります。普段は、文字と画像・酢阿新だけなので、吹き出しを入れるといいアクセントになるので是非、使ってみてくださいね。



    編集後記


    ここまでのカスタムで、僕が欲しかった機能は殆ど揃いました。WordPress以上のブログが作れそうです。


    操作はまだ怪しいのですが(笑) 結構慣れてきました。最終難関は「吹き出し」でｓたが、音階の作業でキャラクター毎で左右バージョンを作ったので、もう吹き出しで迷う事はなさそうですｗこれからは記事をコツコツ積み上げますね。



    では、今日も最後まで読んで頂きありがとうございました。
    本日も素敵な情報発信頑張りましょう♪




    このブログ・記事へのご意見・感想・質問など、随時受け付けています。
    サイドバーのお問い合わせからお気軽に連絡してくださいね。