ガジェニュー

~iPhone・格安スマホとか~

レスポンシブ+スマホ最適化のチャット風の会話を導入したよ。【WordPressカスタマイズ】

       後で読む

今回はCSSを利用してチャット風の会話レイアウトを導入したので備忘録として書いています。

他のサイトを参考にさせてもらいながら少し独自のカスタマイズをしました。

ちょっとコードだらけで長くなってしまいました。

ただ、レスポンシブ対応を強化してスマホ対応させたので小さい画面でも見やすくなったと思います。

という感じでいつもと違う感じでお送りしています。

今回はWordPressにチャット風の会話レイアウトを導入したので書いていきますよ。

SPONSORED LINKS

レスポンシブ+スマホ最適化のチャット風の会話を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の用に相手との対話を意識したレイアウトにしたかったので

CSSをコピーして、一部変更を加えてこのように画像を右、吹き出しを左のレイアウトを作りました。

画像サイズに関しては、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
格安スマホはじめの一歩

このような形なら、色々と使いやすいのではないかと思うので暇な人は実装してみたらいいんじゃないかな。

てな感じで。

 - WEBサイト運営, WordPress , ,

  関連記事

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

simages_120314_110122_AM
【STINGER5カスタマイズ】スマホでの拡大操作に対応させる方法

今回はSTINGER5でちょっと気になっていたスマホ表示でのピンチイン・アウトに …

accessreport201604-tb
【アクセス数報告】2016年4月のPVとアフィリエイトの収益とか

GW真っ最中ですね。 とりあえず前半に軽く旅行に行ったので後はのんびり「Hulu …

images_110914_024007_AM
【STINGER5カスタマイズ】サイドバーの見出しタイトルの前にアイコンフォントを設置

なんとなく、STINGER5のデフォルトのサイドバーの見出しの部分が目立たない気 …

sHIRO93_machinokurasi500
エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件

ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …

accessreport201607-tb
【アクセス数報告】2016年7月のPVとアフィリエイトの収益とか

 8月です。7月は久々に週5でフルタイム勤務をしたということでかなり疲れましたが …

icon_1r_192
【アクセス数報告】2015年7月のPVとアフィリエイトの収益とか

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

icon_1r_192
【アクセス数報告】2015年6月のPVとアフィリエイトの収益とか

あっと言う間に6月が通過していきました!もはや2015年の半分を超えているという …

sum
【STINGER5カスタマイズ】メディアサイズが変更できない問題

こちらのブログですが、【STINGER5カスタマイズ】AdSenseセンスの表示 …

sum2
Gush2カスタマイズ~h2タグをカスタマイズします~

今回は「Gush2」のカスタマイズ第2弾です。 自由度が高いサービスだけに結構苦 …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です