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

こんばんは! 永理だよ。

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

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

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

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

先日のブログ更新で、何に時間がかかってるのかっていうと、ヘッダ画像のイラストだった…。
140807 アイキャッチ
↑これね。 こんなしょぼい絵。顔だけ。

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

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

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

Twitter画像

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

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

で、今日のアイキャッチ画像↓が何かというと。
スクリーンショット 2014-08-09 22.39.21

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

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

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

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

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

で、枠の角丸は下記のジェネレータで作成。
http://border-radius.com/

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

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

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

<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>

最近の野望

最近やりたいことは、カラオケ! カラオケに行きたい。一人でもりもり死ぬほど歌い尽くしたい!

そして今いちばん歌ってみたい歌はこちらです。これをこの動画のキーの一オクターブ下の男性キーで歌いたい!

とか思いながら日々過ごしています。