アイコンと吹き出しをCSSで作ってみた

こんばんは！　永理だよ。

最近タスク管理がうまく行くようになってきてて（当人比）ノリノリだよ！　そして今日は先日作ったアイコン画像を利用して吹き出しっぽいUIをCSSで作ってみた！

ところで、先日久しぶりにブログを書いたんだけど、所要時間が二時間もかかっていたことが判明！　

ブログはできれば毎日更新したいけど、毎日二時間もとれないなあと思って、今試行錯誤中。しばらくフリーダムに更新するよ！

進捗：Twitterプロフィール画像作成

先日のブログ更新で、何に時間がかかってるのかっていうと、ヘッダ画像のイラストだった…。

↑これね。　こんなしょぼい絵。顔だけ。

でも今の自分にはそのくらい時間かかるかなあ。うーん。しょうがない。

それに以前からTwitter用のプロフを作りたいと思ってたので、まあそれはよい。ことにする。

そのあとアイキャッチ画像からちょっと修正＆調整してTwitterのプロフはこうなったよ。

アイキャッチ画像からどこが変わっているかわかるだろうか（笑

今日のアイキャッチ画像について解説

で、今日のアイキャッチ画像↓が何かというと。

キャラっぽいアイコン画像をつくったので、台詞しゃべってるかのようなCSSを作ってみた。

永理

こんなやつね。ブログの途中にはさんだりすると、ちょっとアクセントになっていいんじゃない？

以前も吹き出しっぽいのつくったことあったんだけど、スマホでみたらデザインが崩れたりとかしてしまってたので、今回はレスポンシブに対応。

↑こちらのサイトで、いろんなブラウザサイズで表示が確認できます。

台詞のCSSは、まず「幅固定+リキッドレイアウトにする方法」で、画像領域と、可変の台詞領域を作成し、台詞divの中に「吹き出しやリストマーカーに使える三角形を CSS で作る」を参考に、吹き出しのしっぽを作りました。

で、枠の角丸は下記のジェネレータで作成。

インターネット便利すぎて死にそう。

でもまたこんなのごちゃごちゃ作ってたら、文章の投稿も含め、トータルで二時間かかってるのかも。あうあう…。

もし知りたい人いたら、上の台詞のとこのソースコードだよ

＜CSS＞
[css]/* fukidashi */
.fukidashi {
overflow: hidden;
margin-bottom: 10px;
}
.eiri_photo {
width: 80px;
margin: 0;
height: 80px;
float:left;
background: url(“images/icon_80.png”) no-repeat;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
text-align: center;
font-weight: 400;
color: white;
font-size: 12px;
line-height: 16px;
}
.bubble{
float:right;
width:100%;
margin: 0;
margin-left:-88px;
padding: 0;
}

.bubble .eiri{
display:block;
position:relative;
margin: 0;
padding: 10px;
padding-top: -10px;
margin-left:88px;
min-height:60px;
background-color: orange;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

.bubble .eiri::before {
position:absolute;
content: “”;
display: inline-block;
border: 8px solid transparent;
border-right-color: orange;
margin-top: 20px;
margin-left: -26px;
}
[/css]

＜html＞
[html] <div class=”fukidashi”>
<div class=”eiri_photo”>永理</div>
<div class=”bubble”>
<div class=”eiri”>台詞の内容</div>
</div>
</div>
[/html]