css WordPress

【WordPress】会話吹き出し例

2023年4月11日

概要

使用しているテーマでも吹き出しはできるのですが、数が多くなると有料のプラグインでないと拡張できなくて、使用していません。
調べてみますとCSSだけで実現できると知りました。キラリ☆彡さんのページを参照して気に入りました。
ただ、使ってみますと、左の吹き出しの文章が長くなると右端まで行ってしまうなどがありました。
そこで少々コードを追加してみました。

CodePen

【追加】の記述箇所がここでの変更点です。
サンプルでは左右同じ画像ですが、それぞれに画像のリンクがあり、別々のリンクを指定すればよいだけです。

  <!--左の吹き出し-->
<div class="talking">
   <figure class="talking-left_icon">
      <img src="https://meian-blog.net/main/tooltip/周潤發.webp" alt="代替テキスト">
      <figcaption>周潤發</figcaption>
   </figure>
   <div class="talking-left">
      <p>ここにセリフを入れる。</p>
   </div>
</div>
<!--左の吹き出し終わり-->

<!--右の吹き出し-->
<div class="talking">
   <figure class="talking-right_icon">
      <img src="https://meian-blog.net/main/tooltip/郭富城.webp" alt="代替テキスト">
      <figcaption>郭富城</figcaption>
   </figure>
   <div class="talking-right">
      <p>ここにセリフを入れる</p>
   </div>
</div>
<!--右の吹き出し終わり-->
/*------------------------------
  画像付き吹き出し(会話)
------------------------------*/
.talking {
      margin-bottom:2em;
      position:relative;
}

.talking:before , .talking:after {
      clear:both;
      content:"";
      display:block;
}

/*アイコン*/
.talking figure {
      width:60px;     /*アイコンの横幅*/
      height:60px;    /*アイコンの縦幅*/
}

.talking-left_icon {
      float:left;
      margin-right:20px;    /*アイコンの右の余白(左の吹き出し)*/
}

.talking-right_icon {
      float:right;
      margin-left:20px;    /*アイコンの左の余白(右の吹き出し)*/
}

.talking figure img {
      width:100%;
      height:100%;
      margin:0;
      border:2px solid #aaa;
      border-radius:50%;    /*アイコンの角丸*/
}

/*アイコンの下の名前*/
.talking-left_icon figcaption ,
.talking-right_icon figcaption {
      padding:2px 0 0;
      font-size:12px;
      text-align:center;
}

/*吹き出しのセリフ部分*/
.talking-left , .talking-right  {
      position:relative;
      padding:10px;
      border-style:solid;    /*枠線の線種*/
      border-radius:10px;    /*セリフを入れる部分の角丸*/
      max-width: 60%;        /* 【追加】吹き出しの最大幅を設定 */
      box-sizing: border-box; /* 【追加】ボックスのサイズ計算方法を変更 */
      word-break: break-word; /* 【追加】単語の途中で改行 */
}

.talking p {
      margin:0;
}

.talking p :last-child {
      margin:0;
}

/*---左の吹き出し---*/
.talking-left {
      float:left;
      border-width:2px;         /*枠線の太さ*/
      border-color:Lightblue;   /*枠線の色*/
      background:#E7F3F7;    /*背景色*/
}

/*左の吹き出し 三角*/
.talking-left:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid #E7F3F7;  /*三角の線になる部分*/
      top: 15px;
      left: -22px;
}

.talking-left:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-right: 10px solid Lightblue;
      top: 15px;
      left: -19px;
}

/*---右の吹き出し---*/
.talking-right {
      float:right;
      border-width:2px;      /*枠線の太さ*/
      border-color:khaki;    /*枠線の色*/
      background:#F6F0BB;    /*背景色*/
}

/*右の吹き出し 三角*/
.talking-right:before {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid #F6F0BB;  /*三角の線になる部分*/
      top: 15px;
      right: -22px;
}

.talking-right:after {
      position: absolute;
      content: '';
      border: 10px solid transparent;
      border-left: 10px solid #F6F0BB;
      top: 15px;
      right: -19px;
}

-css, WordPress
-, ,