CSSで作る吹き出しデザインとプラグインの吹き出し

こんにちは。ユキコです

最近よく見かける様になった対話型の吹き出しデザイン。

企業とお客様がコミュニケーションしているような質問文があり、担当者が回答していて、すごく読みやすいです。

企業のセールスレターから個人ブログまで用途は幅広いです。

WordPressならプラグイン一つで結構簡単に作成できますが、ふつうのWebサイトで使う事も多々あります。

 1からソースを書くという高度なスキルはない私みたいな方、レイアウトをコピペして好きなデザインに変えてみませんか?

この度も辞書のようなサイト:saruwakakun から拝借させて頂きます。

コピペで使ってもなかなかうまくいかなかったりするので、DEMOページも併せてご参照 / ご確認ください。

[toc]

デモページ

 

[toc]

HTML

(*上部は省略)

<div class="balloon5">
  <div class="faceicon">
    <img src="img/rabbit.png">
  </div>
    <div class="says">
      <p> 最近調子はどう?</p>
    </div>
  </div>
    <div class="balloon2-right">
      <p>バッチリだよ ♪</p>
  </div>

 

ご覧の通り、クラスを4つ使っています。

うさぎとお姉さんと吹き出し2種類です。

 

CSS

.balloon5 {
    width: 100%;
    margin: 1.5em 0;
    overflow: hidden;
}

.balloon5 .faceicon {
    float: left;
    margin-right: -90px;
    width: 180px;
}

.balloon5 .faceicon img{
    width: 100%;
    height: auto;
    border: solid 3px #d7ebfe;
    border-radius: 90%;
}

.balloon5 .chatting {
    width: 100%;
}

.balloon2-right {
 	position: relative;
    display: inline-block;
 	margin: 1.5em 15px 1.5em 0;
    padding: 7px 10px;
    min-width: 120px;
 	max-width: 100%;
 	color: #555;
    font-size: 16px;
    background: #FFF;
 	border: solid 3px #555;
 	box-sizing: border-box;
}

.balloon2-right:before{
    content: "";
    position: absolute;
    top: 50%;
    right: -24px;
 	margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #FFF;
 	z-index: 2;
}

.balloon2-right:after{
    content: "";
    position: absolute;
    top: 50%;
    right: -30px;
 	margin-top: -14px;
    border: 14px solid transparent;
    border-left: 14px solid #555;
 	z-index: 1;
}

.balloon2-right p {
    margin: 0;
    padding: 0;
}

.says {
    display: inline-block;
    position: relative;
    margin: 5px 0 0 105px;
    padding: 17px 13px;
    border-radius: 12px;
    background: #d7ebfe;
    width: 820px;
}

.says:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: -24px;
    border: 12px solid transparent;
    border-right: 12px solid #d7ebfe;
}

.says p {
    margin: 0;
    padding: 0;
}

.faceicon {
    float: right;
}
 

 

balloon2:人物などの画像(ウサギ)のデザインと配置

balloon5:お姉さんの画像のデザインと配置

says:吹き出しセリフのデザイン、背景色や大きさ

faceicon:画像(アイコン)を画面右に寄せるためのクラス

 

参考:https://saruwakakun.com/html-css/reference/speech-bubble

 

 

kuroneco
プラグインの方が便利だね

使ってみよう♭
kuroneco

WordPressプラグインの利用

CSSが苦手な私は、WordPressで使える 会話吹き出しプラグインを使っています。

こちらは有料ですが、安くて使い方も簡単なのでオススメです。

販売元さんは、STINGERというテーマのの商品です。ですが、STINGER以外でも使えます。

もちろんThemifyでも利用が可能です。

簡単に使い方をご紹介しておきますと、購入して、入金後インストールして有効にすると

サイドバーに「吹き出し」というメニューが表示されます。

そこから新規追加ボタン>タイトルを入力、画像を読み込みます。

あとは、CSSでデザインする作業:ボーダーの色と背景色を指定して一通りの設定が終わりです。

作成した吹き出し専用のコードが生成されるので、こんな感じ →[abc etc]

記事に貼り付けると、表示される仕組みになっています。

女性も副業
お姉さん
会話型吹き出しプラグインはとっても便利!

読みやすくなるね♭
Lucky Bird

Liked Liked
No Comments