Mokapple Blog

トロント留学中!英会話好きな薬剤師によるイラストブログ。

ヘッダのイラストを描いてみたよ!




f:id:kiitos-moi:20170319220027p:image

mokaです。

 

本日ヘッダを新調しました~!

 

イラストブログを名乗っている割に、ヘッダが文字だけだったので、イラストをつけたいな~と思っていたんです。

 

 

イラスト作成の際に苦労したこと

どんな大きさのイラストを描いたら、スマホにも、パソコンから見てもしっくりくる大きさになるのか、全くわかりませんでした。

 

とりあえず、スマホ表示にしたときに文字が切れなければいい!と思い、小さいサイズで描くことに。

 

そして出来上がったのがこちら。(背景透過)

f:id:kiitos-moi:20170319213513p:image

 

小さくて描きづらいうえ、線がガタガタに・・・・。

 

大きさを変更すると、ぼやけてしまうし、もうどうすればいいんだ・・・!!状態になりました。

 

CSSで調整!

 せっかく描いたイラストをヘッダに使えず、途方に暮れた私は、(よく調べなかったので自業自得ですが・・・)Google先生に助けを求めました。

 

すると、こんな素敵な記事を発見!!

 

mshitech.hatenablog.com

 

ちょくちょくお世話になっているブログなのですが、この記事を発見した瞬間、神が舞い降りてきた・・・・!!と思いました。

 

好きな大きさで描けて、切り抜きもせずにすみ、しかもスマホ表示の際にも画像が切れない!!!

 

CSSってすごい!!!

 

 f:id:kiitos-moi:20170319215416j:image

 

CSS導入前はこんな感じで切れてしまっていたのが、

 

f:id:kiitos-moi:20170319215418j:image

 

しっくりくるようになりました~!!!

 

これで一安心。

 

為になる記事を書いてくださっえむしてっくさん、ありがとうございました!!