キウイパン工房~やんごとなきブログ

読者です 読者をやめる 読者になる 読者になる

きういぱん工房

やんごとなきブログ

【スポンサーリンク】

記事の中で吹き出しを使っての会話を導入しました

 

すぐにカスタマイズしたくなる病気のパンです

記事に集中するといいつつ

デザインとか凝ったことに手を出したくなる

 

まともな記事書けって怒られそう

自称プログラマーの性ですわ

 

ということで今回はこれにチャレンジ!!

 

 

吹き出しで会話をしてみたいんだけど・・・

 

 

どうだい?満足かい?

 

 

 

思ったより簡単でした。

つか、なにもできなかった。

会話形式で書く意味

まず、会話形式で書く意味は何でしょう?

これに関してはポジ熊さんが述べていました。

 

感情移入しやすかったり

見やすかったりしますね。

www.pojihiguma.com

 

今はLINEなどのチャットアプリが流行りまくっているので

こうゆう形式で表示されても違和感なく読み取れるし

語り役と質問役とかにしたらすごく読みやすいですね。

 

会話形式にする方法

会話形式にする方法ですが

はてなブログではこういったカスタマイズがしやすいのが魅力

先人たちが試行錯誤して記事にしてくださってます。

 

今回参考にさせていただいたのはこちら

georges.hatenablog.jp

この方が参考にしたという記事もしっかり見させて頂きました。

akiueo.hatenablog.com

 

技術の世界は日々進んでいますが

一気に変化するのではなく

改良に改良で少しずつ進んでいくのです。

2014年の記事をみて2016年に新しくする

こんな風により良いコードが生まれていくんですね。

 

その他にも、もっと簡単に!と

画期的な方法で形成した方もいて感激しました。

shiromatakumi.hatenablog.com

 

すごくわかりやすく勉強になりました。

私の場合、複数の端末・ブラウザで管理していることや

画像を直接CSSに記述するのは

しゃべる人を頻繁に変えたい私にとっては向いていないと判断し

今回はじょーじさんの記事を参考にさせていただきました。

 

CSS変更点

全くそのまま使うっていうのはプログラマーとして許せなかったので

少しデザインをアレンジしてみました。

といってもCSSを少しいじっただけです。

 

LINEをイメージして相手となる右の人の吹き出しを

緑系の色にしました。

それに合わせて吹き出しの枠の線の色と太さを変更

枠の線は2pxから1pxに変えました。

アイコンの周りの線と影はいらないと思ったので廃止しました。

画像は200×200の正方形を使ったのですが

丸の枠におさまらなかったので

拡大を180%から100%(拡大なし)に変更しました

色についてですが

#6桁が色のコードです。

こちらのカラーチャートで選んでいます。

www.colordic.org

 

 

カスタマイズしたんだけど・・・どうかな?

 

 

カスタマイズって枠線と色だけかい?

 

 

仕方ないじゃん。先人たちのに加えるところなかったんだから

 

 

今回はゆるすけど!もっと勉強してあっと言わせてくれよ!

 

 

チッ

 

 

 

使ったコード

コピペしていただければ

上記の会話のと同じデザインになります。

/*****ここから会話のCSS*****/
.talk-wrap{
display: block;
clear: both;
margin:0 auto 3px auto; }
.talk-wrap p{
margin:0; }
/*左のアイコン設定*/
.left-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius: 50%;
background: no-repeat;
background-size: 100%;
background-position: center;
float:left;
display:inline-block;
margin-bottom: 10px; }
/*左の会話設定*/
.talk-left{
float:right;
position: relative;
background: #fff; /*左の会話の背景色*/
border: 1px solid #663300; /*左の会話の線の太さと色*/
padding: 3%;
border-radius: 10px;
width: 70%;
margin-top:10px;
margin-bottom: 10px; }
.talk-left:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-right-color: #663300; /*左の会話のとんがり部分の線の色*/
position: absolute;
left: -20px;
top: 25%;
margin-top: -9px; }
.talk-left:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-right-color: #fff; /*左の会話のとんがり部分の背景色*/
position: absolute;
left: -16px;
top: 25%;
margin-top: -8px; }
/*右のアイコン設定*/
.right-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius:50%;
background: no-repeat;
background-size: 100%;
background-position: center;
float:right;
display:inline-block;
margin-bottom: 10px; }
/*右の会話設定*/
.talk-right{
float:left;
position: relative;
background: #66ff66; /*右の会話の背景色*/
border: 1px solid #000000; /*右の会話の線の太さと色*/
padding: 3%;
border-radius: 10px;
width: 70%;
margin-top:10px;
margin-bottom:10px; }
.talk-right:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-left-color: #000000; /*右の会話のとんがり部分の線の色*/
position: absolute;
right: -20px;
top: 25%;
margin-top: -9px; }
.talk-right:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-left-color: #66ff66; /*右の会話のとんがり部分の背景色*/
position: absolute;
right: -16px;
top: 25%;
margin-top: -8px; }
.talk-end{
clear:both; }
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
.left-icon{
width: 80px;
height: 80px; }
.talk-left{
width: 65%;  }
.right-icon{
width: 80px;
height: 80px; }
.talk-right{
width: 65%;  } }
@media screen and (max-width: 380px){
.left-icon{
width: 60px;
height: 60px; }
.talk-left{
width: 65%; }
.right-icon{
width: 60px;
height: 60px; }
.talk-right{
width: 65%;  } } 

 

これをCSSに記述し

あとは記事ごとにHTMLを記述するだけ!

 HTMLでの記述は参考にした急がば回れの記事と

同じように使わせていただいてます

georges.hatenablog.jp

チャットっぽくなったでしょうか?

 

どうもコードを書く時にコメントを書きすぎてる気がする

(CSSでは/*から*/で囲まれたものがコメントです。)

しかも端的に欠けないのでしっかり書きたがる

いいコードはコメントも明確に書かなきゃいけないので

こればっかりは本業なので本気出して頑張らないと・・・

コメントは重要だよ?

感想

 勢いにまかせてやってみましたが

うん。特に思うことなし!!

難しいわけでもないし

というかコピペで済むし

 

果たして効果はあるのだろうか?

 

とりわけ、このブログでは

コラムが多いので使い道はあるかも!!

 

以上!別れ!!

 

 

参考にさせて頂きました皆様、この場を借りてお礼申し上げます

 

 

【スポンサーリンク】