他のサイトを参考にさせてもらいながら少し独自のカスタマイズをしました。
ただ、レスポンシブ対応を強化してスマホ対応させたので小さい画面でも見やすくなったと思います。
という感じでいつもと違う感じでお送りしています。
今回はWordPressにチャット風の会話レイアウトを導入したので書いていきますよ。
レスポンシブ＋スマホ最適化のチャット風の会話をCSSで導入したよ。
今回は上記のようなチャット風の会話ができるデザインのレイアウトを導入しました。
会話形式でコンテンツを作るメリットとしては、「誰にでもわかりやすい」コンテンツが作りやすいかなと思ったからです。
また、現在はLINEが多くの人に馴染みが深いものになってきているのでスマホからの閲覧の際もあまり違和感なく見てもらえるかなと思ったからです。
チャット風の会話デザインの導入について
今回のチャット風のデザインの導入にあたっては下記のサイトをかなり参考にさせていただきました。
非常に参考になりました。ありがとうございます。
・[レスポンシブ対応] CSSでチャット風デザインを実装する | vdeep
ベース部分にはこちらで紹介されているコードをそのまま使い、少しカスタマイズを加えて実装しています。
カスタマイズをおこなった部分は下記の部分です。
・画像が左側のバージョンの追加
・吹き出し口の部分の位置の変更
・スマホでの表示の場合の画像のサイズ変更
・p要素のマージンを調整
まずは、本文で使うHTMLから確認してみましょう。
<div class="chat-box"> <div class="chat-face"><img src="/*好きな画像のURL*/" alt="" /></div> <div class="chat-area"> <div class="chat-hukidashi">/*吹き出しに入れたい内容を書きましょう。*/</div> </div> </div> <div class="chat-box2"> <div class="chat-face2"><img src="/*好きな画像のURL*/" alt="" /></div> <div class="chat-area2"> <div class="chat-hukidashi2">/*吹き出しに入れたい内容を書きましょう。*/</div> </div> </div>
このような形です。そのまんまコピペさせてもらいました。
LINEの用に相手との対話を意識したレイアウトにしたかったので
画像サイズに関しては、HTML側で制御をする形からCSSで制御するように変更です。
また元々のテーマでpの要素にマージンが設定されているのでそれを向こうにするために記述を加えています。
after要素で書き出される吹き出しの三角の位置が真ん中固定になっていましたが、文字を多く書くときに違和感があるので画像付近になるように調整もやっています。
ということで完成したCSSは下記のようになります。
/***********************************
チャット風レイアウト
************************************/
/*画像左側のチャット*/
.chat-box {
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 20px;
}
.chat-face {
float: left;
margin-right: -120px;
}
.chat-face img{
width: 90px;
height: 90px;
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-area {
width: 100%;
float: right;
}
.chat-hukidashi {
display: inline-block;
padding: 15px 20px;
margin-left: 120px;
margin-top: 8px;
border-radius: 10px;
position: relative;
background-color: #D9F0FF;
}
.chat-hukidashi p{
margin-bottom: 0px;
}
.chat-hukidashi:after {
content: "";
position: absolute;
top: 35px; left: -10px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #D9F0FF transparent transparent;
}
/*画像右側のチャット*/
.chat-box2{
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 20px;
}
.chat-face2 {
float: right;
margin-left: -120px;
}
.chat-face2 img{
width: 90px;
height: 90px;
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-area2 {
width: 100%;
float: left;
}
.chat-hukidashi2 {
display: inline-block;
padding: 15px 20px;
margin-right: 120px;
margin-top: 8px;
border-radius: 10px;
position: relative;
background-color: #BCF5A9;
float: right;
}
.chat-hukidashi2 p{
margin-bottom: 0px;
}
.chat-hukidashi2:after {
content: "";
position: absolute;
top: 35px; right: -20px;
margin-top: -10px;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #BCF5A9;
}画像を右のレイアウトを作る際にあまりにも知識がないのでちょっと苦労しました（笑）まぁ最終的にはなんとかなったしセーフです。
ちゃんとチャット風のレイアウトになりましたね
スマホだと画像が大きすぎて文字が読みにくいので調整
PCで表示しているときは画像の大きさは気にならなりませんでした。
ただ、スマホで閲覧した際に画面が小さいスマホだと画像がかなり大きく感じました。
iPhone5で見たからかもしれませんが、90pxの画像だと大きくて文字エリアが小さくなり読みにくくなってしまうようです。
せっかくレスポンシブ対応なのにそれはもったいないということで、CSSにメディアクエリを追加して440px以下の時には画像のサイズを60pxになるように調整しています。
CSSに追加したコードはこんな感じ。
/*スマホの時は画像を小さく*/
@media screen and (max-width: 440px){
/*画像左側のチャット*/
.chat-face {
float: left;
margin-right: -80px;
}
.chat-face img{
width: 60px;
height: 60px;
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-hukidashi {
display: inline-block;
padding: 10px 10px;
margin-left: 80px;
margin-top: 0px;
border-radius: 10px;
position: relative;
background-color: #D9F0FF;
}
/*画像右側のチャット*/
.chat-face2 {
float: right;
margin-left: -80px;
}
.chat-face2 img{
width: 60px;
height: 60px;
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}
.chat-hukidashi2 {
display: inline-block;
padding: 10px 10px;
margin-right: 80px;
margin-top: 0px;
border-radius: 10px;
position: relative;
background-color: #BCF5A9;
float: right;
}
}これでOK。
ちなみにiPhone5は横幅320pxで、iPhone6は375px、Plusは414pxということでほとんどのスマホでメディアクエリが働く感じですね。
どんなふうになるかはスマホで試すか、ウィンドウのサイズを変更して確認してください。
まとめ
会話風のデザインは結構色々な機会で使えるんではないでしょうか？
実は実装しようと思った理由は、格安スマホのサイトで出来るだけ分かりやすく説明するのに最適化かな。と思って調べてやってみました。
実際のページへのリンクを貼っておきます。
Link
・格安スマホはじめの一歩
てな感じで。
