トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

インタビュー記事の丸いアイコン作りたい!& 吹き出し

 インタビュー記事や会話記事といえば人を表す丸いアイコンが特徴的ですよね。

あれをこのブログでもやってみたいと、突然思いました。

作った

f:id:bibinbaleo:20181110153020p:plain「ぽいかな?」

 

f:id:bibinbaleo:20181110153017p:plain「いいんじゃない?」

 

f:id:bibinbaleo:20181110153020p:plainイラレで作りました」

 

f:id:bibinbaleo:20181110161350p:plain

吹き出しとか  

f:id:bibinbaleo:20181110153020p:plainはてな記法吹き出しを出す方法ってありますか?先生」

 

             「この記事とかが参考になりそうだよ!」f:id:bibinbaleo:20181110153017p:plain

 

www.notitle-weblog.com

 f:id:bibinbaleo:20181110153020p:plain

「なるほど!CSSを使うんですね。画像もあらかじめ設定できるとはすごい!左右指定もできる!」

 

f:id:bibinbaleo:20181110153017p:plain 

「記事のCSSをコピペ&一部書き換えて、デザインCSSに貼り付け。

<p class="l-fuki toma">テキスト</p> こんな感じのをHTML編集のところに貼って、プレビューで確認する」

 

やってみたよ!!!

あ・・・

丸の中に文字まで入っちゃった

画像変えよう!

 

 

やってみたよ!!!

いい感じ!

 

www.uenoyou.net

 

最後に

プレビューで見たら、画像に影が入ってた。

全ての画像には影が入る設定にしてたんだった。

楽しかったです。

f:id:bibinbaleo:20181110155452p:plain

300円のハンドパペット。しば犬?

 

f:id:bibinbaleo:20181110155521j:plain

 

事例研究

インタビューだと左右に分かれます

f:id:bibinbaleo:20181110133240p:plain

【確定申告ガイド】税理士さんに聞いた!同人作家、イラストレーターの税金、経費、確定申告について

こちらは四角いですね。

f:id:bibinbaleo:20181110133230p:plain

「パイの実を食べてるときみたいに、突然お金がゼロになった」家入一真とお金の歴史|新R25 - 20代ビジネスパーソンのバイブル

 

 

複数人の会話だと左一列

f:id:bibinbaleo:20181110133244p:plain

【4p漫画】一番ヌケるシチュエーションはどれだ!? 第1回エロ漫画導入選手権 | オモコロ

f:id:bibinbaleo:20181110133237p:plain

『The Phantom Knowlege』キャラクター画像公開!そして・・・ | UNITY-CHAN! OFFICIAL WEBSITE

名前は画像埋め込みのものと、html?のものがあります。

セリフも顔画像と下揃え上揃えなどいろいろありますね。