/*****ここから会話の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; box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/ border: 3px solid #fff; /*左のアイコンの枠の設定*/ margin-bottom: 10px; } .talk-left{ float:right; position: relative; background: #fff; /*左の会話の背景色*/ border: 2px solid #666; padding: 3%; border-radius: 10px; width: 70%; margin-top:10px; box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/ margin-bottom: 10px; } .talk-left:before { content: ""; display: inline-block; border: 10px solid transparent; border-right-color: #666; 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: right; float:right; display:inline-block; box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/ border: 3px solid #FFF; /*右のアイコンの枠の設定*/ margin-bottom: 10px; } .talk-right{ float:left; position: relative; background: #fff; /*右の会話の背景色*/ border: 2px solid #666; padding: 3%; border-radius: 10px; width: 70%; margin-top:10px; box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/ margin-bottom:10px; } .talk-right:before { content: ""; display: inline-block; border: 10px solid transparent; border-left-color: #666; position: absolute; right: -20px; top: 25%; margin-top: -9px; } .talk-right:after { content: ""; display: inline-block; border: 9px solid transparent; border-left-color: #fff; 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%; } }

Bygones !

ライフログとまではいかない程度の日常を綴っていこうと思います。

【祝】むすぺろさんにアイコンを作成していただきました

こんばんは、本日3回目の記事です。

ひ、暇じゃないですよ ((((;゚Д゚))))

 

むすぺろさんに肖像画アイコンを作成してもらいました

以前に、むすぺろさんが「肖像画」を無料で作成しますというエントリーを書かれていたので、恥ずかしながら応募してみました。しかも、家族(夫、私、娘、息子)分のアイコンをお願いするという図々しさ |д゚)

「肖像画」無料で作成しませんか?第1号「若居きつね」 - ムスッコ成長レポートとママ雑記

そんな私の遠慮なしの依頼にも、快くオッケーを頂きまして o.+゚。(′▽`o人)≡(人o′▽`)。o.+゚。

 

TwitterのDMで写真を送り、我が家の各人の性格的特徴をお伝えし、サンプル画像をパターンで作成頂き、その中から色などの要望を伝えて、本格的に絵を描いていただき、、、完成イラストの背景色も希望の色にして頂き、ブログ用に2パターンのサイズを送ってもらうという工程を経て、私の元に届きましたー!!

無料でここまでやっていただけるなんて、本当に本当に感謝です☆

ありがとうございました。

 

さて、その肖像画イラストがこちらでーす!

 

 

f:id:Alstroemeria:20171207012520j:plain



 

左上:えこ(私です)

右上:夫

左下:娘(5歳)

右下:息子(7ヶ月)

 

これ、すんごく似てます。

特に娘。好奇心旺盛で、いたずら好きな感じが見て取れます 笑

私もこんな感じ。絵が描けるオヒトというのはすごいですね。

 

むすぺろ (id:mskprpr)さん、本当にありがとうございましたー☆

 

もし、アイコン作成してほしいわ!という方がいたら、むすぺろさんまで直談判してみてください 笑 そうそう、私は4コマテイストの絵でお願いしましたが、リアル絵でもオッケーみたいですよ。

「肖像画」無料で作成しませんか?第2号「新米双子ママのマメ太&マメ子」 - ムスッコ成長レポートとママ雑記

 

めっちゃ上手です ( ゚Д゚)スゲー

 

会話形式を吹き出しで表現できる

家族分のアイコンを作成していただいたので、念願の会話形式を吹き出しで書くことができます (ΦωΦ)ふふふ・・・・

 

以下、お試しです。

 

これで念願の吹き出しが!

 

 

 

 

遊んでないで、とりあえずウォールハンガーを探せよ

 

 

 

 

おかーさん、お腹空いた

 

 

 

 

きゃー(俺のことは放置か?)

 

 
難しい (-ω-;)ウーン
スマホはきれいに表示されてるのに、PC版だとなんかアイコンがずれまくってるんだけど。。
もうちょっと調べます。 
 
2017/12/07 10:00 追記
アイコンの位置と大きさの調整ができました。
 
アイコンの位置がずれる
⇒ アイコンの位置は改行が入っていなかったため
 
アイコンのイラストが見切れる

⇒ Twitterでアイコンの大きさが上手くいかないーって呟いたら、id:minimalgreenさんがご厚意でアドバイスしてくださいました!本当にありがとうございます♡
デザインからCSSをいじって、イラストのサイズを修正したら、きれいに収まりました!
 
 
 
そうそう、元のアイコンから、イラストへも変更してます。
 
元の画像(娘:2歳)

f:id:Alstroemeria:20171206231915p:plain

 
新規アイコン

f:id:Alstroemeria:20171207012541p:plain

 

 
皆様、今後とも宜しくお願い致します ( `・∀・´)ノヨロシク
 

参考

 
2017/12/0714:00/修正:
私が最初にリンク先としたページですが、孫引きとのご指摘を頂きましたので、修正しました。元制作者の方、申し訳ありません。
ご指摘もありがとうございました。
 
 
***
はー、眠い (ノД`)・゜・。
では!