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

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

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

ぱる
ぱる
ここに文字だよ
名前がココ
名前がココ
シンプルな会話形式

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

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

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

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

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

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

HTMLで使う方法

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

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

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

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

phpファイルは編集をミスると真っ白になります。元に戻せる自信がある人のみ、自己責任でお願いします。
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');

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

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

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

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

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;
}

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

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

※IE9以下は非対応です。

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

ぱる
ぱる
デフォルトだよ
ぱるぶるー
ぱるぶるー
青色にしてみたよ

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

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

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

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

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

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

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

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

色を変えるための追加CSS

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;
}

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

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

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

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

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

スポンサーリンク

為になったらぽちっとシェア!

コメントを残す

メールアドレスが公開されることはありません。