あえて吹き出しなし!画像とCSSでブログに会話形式表示を取り入れてみた!

このたび、当ブログでも会話形式に表現できるCSSを取り入れてみました。タイトルにもある通り、フキダシなしのものではありますが、当ブログで使っているコードの紹介をしたいと思います。

きっかけ

会話風なデザインを導入しようと思ったのは、当ブログではそこそこアクセスのあるヤマトの「不用品買取サービス」は買い取り不可だと処分料が思いの外かかるので注意!という記事がきっかけです。

カスタマーセンターの方とのやり取りを紹介しているのですが、今までは次の画像のように載せていました。

会話部分を本文と区別できるように、枠線で囲み、文字を周りより小さくして表現していたんですね。これでも分からないことはないのですが、先日ブログ全体のリニューアルをしたこともあり、より見やすく分かりやすいように変えたいなと思ったのです。

なぜ「吹き出しなし」なのか

会話形式のCSSカスタマイズが紹介されている場合、その多くが「吹き出しあり」のデザインな印象です。もちろん、吹き出しありの方がハッキリと会話だと認識することができますし、僕もはじめは同じように吹き出しを付けようと思いました。

しかし、スマホで見た場合を考えると、吹き出し(内側の余白含む)のスペースがもったいなく感じたのです。画面幅が狭い分、ただでさえ1行の文字数が少ないのに、吹き出しによってさらに改行が多くなってしまうのが個人的に好みではなかったのです。

元々の目的は、会話部分を分かりやすくすること。それが実現できればOKなのです。

ウェブメディアをいろいろと見てみると、対談形式の記事でも吹き出しを利用していないケースは数多く目にすることができました。特に参考になったのは「株式会社LIG」さんのサイトです。画像の横にテキストを載せるのを繰り返す、それで十分だと気付かされました。

完成図とコード紹介

先ほどカスタマーセンターの方とのやり取りの例を載せましたが、会話形式の表現方法を変えた結果、次の画像のような感じになりました。

会話風デザインカスタマイズ後

使用している画像は次の2つ。当ブログでは144ピクセル四方にしています。retinaディスプレイで見た時でもぼやけないよう、表示サイズより大きい画像を用意しています。

さて、肝心のコードですが、まずHTMLは次のように記述しています。

<!-- 自分の発言 -->
<p class="talk jibun">ここにセリフ</p>
<!-- 相手(女性)の発言 -->
<p class="talk female">ここにセリフ</p>

続いて、CSSです。当ブログではブラウザ幅によって画像の表示サイズを変えています。

.talk {
   box-sizing: border-box;
   position: relative;
   margin-left: 74px;
   padding-top: 20px;
   min-height: 64px;
}
.talk::before {
   content: "";
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   position: absolute;
   top:0;
   left: -74px;
}
/* 画像の設定。class名を変えていけばいくらでも増やせます。 */
.jibun::before {
   background-image: url('自分として表示させる画像のURL');
}
.female::before {
   background-image: url('相手として表示させる画像のURL');
   background-color: #87cebe;
   background-size: 80%;
}
@media screen and (min-width:581px) {
.talk {
   margin-left: 92px;
   padding-top: 22px;
   min-height: 72px;
}
.talk::before {
   width: 72px;
   height: 72px;
   left: -92px;
}
}

いくつか補足します。

まず.code内にpadding-top:20px;とありますが、これはセリフ1行目を画像真ん中の高さに表示させるためのものです。

当ブログではブラウザ幅が狭いとき、font-size:15px;line-height:1.66666667;としているため、1行の高さが25pxとなります。画像の高さは64pxにしているため、(64-25)/2の約20pxをpadding-topに指定しました。

同じようにブラウザ幅が広くなったとき、font-size:16px;line-height:1.75;としているため、1行の高さが28pxとなります。画像の高さは72pxにしているため、(72-28)/2の22pxをpadding-topに指定しています。

また.female::beforeにおいて、background-color:#87cebe;background-size:80%;としていますが、好みで設定しているだけです。なくても画像は表示されます。

ちなみにbackground-colorは、用意した女性画像が透過画像だったので自分の画像と統一感をだすために背景色を指定しました。background-sizeについては、用意した画像の顔の大きさと自分の画像とのバランスを取るために少し小さく指定しました。

このあたりは用意する画像によってお好みで調整すると良いかと思います。

なお、会話におけるセリフのフォントサイズは特に指定しておらず、周りの本文と同じになっています。そのため、会話部分と本文部分との区別が気になる方もいるかもしれません。

その場合は、次のような対処が考えられます。

1. 会話の最初と最後のpタグにclassを追加してスタイルをあてる

<!-- ↓はHTMLの記述 -->
<p class="talk jibun saisyo">ここにセリフ</p>
<p class="talk female saigo">ここにセリフ</p>

/* ↓はCSSの記述 */
.saisyo { margin-top: 40px; }
.saigo { margin-bottom: 40px; }

こんなのもアリですかね。

2. 会話のpタグ群をdivで囲んでスタイルをあてる

<!-- ↓はHTMLの記述 -->
<div class="talk-area">
<p class="talk jibun">ここにセリフ</p>
<p class="talk female">ここにセリフ</p>
</div>

/* ↓はCSSの記述 */
.talk-area { margin: 40px 0; }

当ブログでは、前者のやり方にしています。余白の大きさは好みで良いかと思います。僕は見出しの上の余白と同じ値にしています。

そうそう、オマケと言いますか、::afterを使うと次の画像みたいに名前を付けることもできます。

追加するCSSはこんな感じです。

/* 名前を管理人の方の位置で統一するとき */
.任意のクラス名:after {
    content: "任意の名前"; /* 文字化け対策としてUnicodeに変換してもいいかも */
    position: absolute;
    top: 3px; /* なんとなくな数値 */
    font-size: 12px;
    left: 0;
}
/* 名前を女性の方の位置で統一するとき */
.任意のクラス名:after {
    content: "任意の名前"; /* 文字化け対策としてUnicodeに変換してもいいかも */
    position: absolute;
    font-size: 12px;
    width: 72px; /* 画像の横幅と合わせる */
    text-align: center;
    left: -92px; /* .talk::beforeのmargin-leftと合わせる */
    top: 74px; /* 画像の縦幅よりほんの少し大きめに */
}

管理人の方の位置に合わせる場合は.talkpadding-topの値を少し大きくするとバランスが良いのではないかと思います。そして女性の方の位置に合わせる場合は.talkmargin-bottomを追加で指定した方がいいかもしれません。

自分で使うことを想定していないのでアレですが、後者の位置に合わせるときは短い名前推奨です。文字数が多いと変な位置で改行されて不格好になるので、文字サイズを小さくしたり、line-heightを調整したり、改行位置を指定したりする必要がありそうです。

枠線を付けることにしました(追記)

余白部分が勿体ないと言っていたのですが、2017年5月23日から文字サイズを小さくし、セリフ部分に枠線を付けるようにしました。

当ブログでは引用部分や補足部分をborderで囲み、font-sizeを本文より2px小さく指定しているのですが、それらと上で紹介したコードによる会話形式の表示が同一ページに存在すると、チグハグ感というか違和感があったため、デザインを統一させることにしたのです。

画面幅が広い場合は次の画像のように表示されます。

CSSは一部修正・追加しています。

.talk {
   font-size: 13px;
   margin-left: 70px;
   margin-bottom: 28px; /* 当ブログの引用・補足部分と同じ値 */
   padding: 15px 10px 14px;
   border: 1px solid #ddd;
   min-height: 60px;
}
.talk::before {
   width: 60px;
   height: 60px;
   top: -8px; /* 枠線より少し上にはみ出した方がバランス良さげだったので */
   left: -70px;
}
@media screen and (min-width:360px) {
.talk {
   padding: 15px 15px 14px;
}
}
@media screen and (min-width:375px) {
.talk {
   margin-left: 79px;
   min-height: 64px;
}
.talk::before {
    width: 64px;
    height: 64px;
    left: -79px;
}
}
@media screen and (min-width:581px) {
.talk {
   font-size: 14px;
   padding: 21px 20px 19px;
   margin-bottom: 28px; /* 当ブログの引用・補足部分と同じ値 */
}
}

ボーダーとフォントサイズだけでなく、ついでに画像サイズや余白についても当ブログ仕様に微調整しました。ここまでしたなら吹き出しを付けたら?と言われそうですが、なくても十分に発言だと分かると思われるのでこれでいきます。

おわりに

さて、今回は画像とCSSで会話風な見た目にするカスタマイズを紹介してみました。

使用しているブログのテンプレートやテーマ独自のCSSによって微妙に表示が異なる(pタグのマージンなど)可能性もありますが、おそらくコピペでいけるんじゃないかと思います。

当記事が何らかの参考になれば幸いです。