進捗：Twitterプロフィール画像作成
先日のブログ更新で、何に時間がかかってるのかっていうと、ヘッダ画像のイラストだった…。
↑これね。 こんなしょぼい絵。顔だけ。
でも今の自分にはそのくらい時間かかるかなあ。うーん。しょうがない。
それに以前からTwitter用のプロフを作りたいと思ってたので、まあそれはよい。ことにする。
そのあとアイキャッチ画像からちょっと修正＆調整してTwitterのプロフはこうなったよ。
アイキャッチ画像からどこが変わっているかわかるだろうか（笑
今日のアイキャッチ画像について解説
で、今日のアイキャッチ画像↓が何かというと。
キャラっぽいアイコン画像をつくったので、台詞しゃべってるかのような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;
}
＜html＞
<div class="fukidashi">
<div class="eiri_photo">永理</div>
<div class="bubble">
<div class="eiri">台詞の内容</div>
</div>
</div>
