CSSで作る！吹き出しなしのシンプルな会話形式（ショートコードあり）

「会話形式をブログに取り入れたいけど、吹き出しを入れるにはスペースが大きすぎる……」

私は吹き出しも使いますが、スペースに関する問題はずっと悩んでいました。吹き出し機能がもともとついているテーマもありますが、私が最近作ったブログには吹き出し機能がありません。そこで良い機会なので、シンプルな会話形式を作ってみました。

[conversation img="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる"]ここに文字だよ[/conversation]
[conversation img="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="名前がココ" color="色を変えたい場合のみ(デフォルトで良い人は何も記入しないかごっそり削除してください)"]シンプルな会話形式[/conversation]

今回はこちらをご紹介します。ショートコードで使う方法も書いていますので、全部読んでいただけたらなと思います。

吹き出しなしの会話形式を作る

サンプルはこちらの記事をご覧ください。

[aside type="boader"]

• HTLMで使う方法
• ショートコードで使う方法

[/aside]

２パターンをご用意いたしました。自分の知識に合った方をお使いください！

[aside type="warning"]この後に紹介するCSSのコードも追加しないと使えませんので、最後まで読んでいただければと思います。[/aside]

HTMLで使う方法

[box class="blue_box"]HTML
<div class="conversation"><figure class="icon"><img src="画像URL" alt="名前"><figcaption class="name">名前</figcaption></figure><div>ここに文字だよ</div></div>[/box]

ビジュアルエディタの場合は「テキストとしてペースト」、テキストエディタの場合はこのまま上記のコートをコピペしてお使いください。

ショートコードで使う方法

Qiitaとストークのショートコードを参考にしながら作成しました。

[aside type="warning"]phpファイルは編集をミスると真っ白になります。元に戻せる自信がある人のみ、自己責任でお願いします。[/aside]

[box class="blue_box"]function.phpに追加
//吹き出し
function make_conversation( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'img' => '', 'name' => '', 'color' => '',
   ), $atts ) );

   return '<div class="conversation"><figure class="icon"><img src="' . $img . '" alt="' . $name . '" class="' . $color . '"><figcaption class="name ' . $color . '">' . $name . '</figcaption></figure><div>' . do_shortcode($content) . '</div></div>';
}
add_shortcode('conversation', 'make_conversation');[/box]

上記のコードをお使いのテーマのfunction.phpに追加すれば、下記のショートコードが使えるようになります！

[box class="blue_box"]ショートコード
[conversation img="画像URL" name="名前"]ここに文字だよ[/conversation][/box]

デザインを表示させるためのCSSコード

こちらのコードを追加しないとHTML・ショートコードどちらもデザインが反映されないので、必ずスタイルシートに追加してくださいね。

[box class="blue_box"]CSS
.conversation {
   display: table;
   width: 100%;
   margin: 10px 10px 10px 0px;
}
.conversation figure.icon {
   position: relative;
   float: left;
   margin: 0px 10px;
}
.conversation figure.icon img {
   width: 50px;
   margin: 0;
   border: 1px solid お好きなカラーコード（アイコンまわり）;
   border-radius: 100px;
}
.conversation figcaption.name {
   position: absolute;
   left: -10px;
   bottom: -5px;
   width: 70px;
   color: #fff;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   text-shadow: お好きなカラーコード（名前のまわり） 0px 0px 1px, お好きなカラーコード（名前のまわり） 0px 0px 1px, お好きなカラーコード（名前のまわり） 0px 0px 1px, お好きなカラーコード（名前のまわり） 0px 0px 1px, お好きなカラーコード（名前のまわり） 0px 0px 1px, お好きなカラーコード（名前のまわり） 0px 0px 1px;
}
.conversation div {
   margin-left: 70px;
   font-size: 15px;
}[/box]

お好きなカラーコード（名前のまわり）が何度も登場しますが、同じカラーコードを入れてあげてください。

[aside type="normal"]「お好きなカラーコード（名前のまわり） 0px 0px 1px」が6回も出てきている理由は、1つだけだと名前の縁取りが薄くなってしまうからです。シャドウを使用しているのですが、なんども重ねて読める濃さにしました。[/aside]

※IE9以下は非対応です。

何パターンも色を変えたい場合

[conversation img="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる"]デフォルトだよ[/conversation]
[conversation img="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱるぶるー" color="blue"]青色にしてみたよ[/conversation]

これは「ぱる」がデフォルトのもので、「ぱるぶるー」はclassを指定して色を変更しました。

同様にHTMLかショートコードを選び、CSSを追加してください。

(どちらか選択)色を変えるためのHTMLコード

[box class="blue_box"]HTML
<div class="conversation"><figure class="icon"><img src="画像URL" alt="名前" class="色を変えたい場合のみここにclass指定"><figcaption class="name 色を変えたい場合のみここにclass指定">名前</figcaption></figure><div>ここに文字だよ</div></div>[/box]

色を変えたい場合のみここにclass指定ここにお好きなclass名をつけてください。サンプルでは「blue」と指定しました。

(どちらか選択)色を変えるためのショートコード

[box class="blue_box"]ショートコード
[conversation img="画像URL" name="名前" color="色を変えたい場合のみここにclass指定"]ここに文字だよ[/conversation][/box]

色を変えたい場合のみここにclass指定ここにお好きなclass名をつけてください。サンプルでは「blue」と指定しました。

色を変えるための追加CSS

[box class="blue_box"]CSS
.conversation figure.icon img.指定したclass名{
   border-color: お好きなカラーコード（アイコンまわり）;
}
.conversation figcaption.name.指定したclass名{
   text-shadow: お好きなカラーコード（名前のまわり） 0px 0px 1px, お好きなカラーコード（名前のまわり） 0px 0px 1px, お好きなカラーコード（名前のまわり） 0px 0px 1px, お好きなカラーコード（名前のまわり） 0px 0px 1px, お好きなカラーコード（名前のまわり） 0px 0px 1px, お好きなカラーコード（名前のまわり） 0px 0px 1px;
}[/box]

サンプルでは指定したclass名に「blue」と入れました。

これで好きな色のパターンが何個もできます。

おわりに：シンプルな会話形式を取り入れた

「吹き出しはちょっと……だけどシンプルな会話形式を取り入れたい！」そんな人にはぴったりなものになったのではないかなと思います。

シンプルなデザインを目指しているかたは、ぜひ参考にしてみてくださいね♪