かるみに

趣味とともに生きる

【はてなブログ】スマホページのヘッダー画像の作り方

Arby's OG

こんにちは。すーく(@sytry7)です

今回、はてなのスマホページのヘッダー画像を制作しました。

 

今やネットアクセスの主役はモバイルと言われています*1

スマートフォン向けのサイトのデザインにこだわりたい」「ブログの顔であるヘッダーを作成したい」と思う人は少なくないと思います。

 

そんな方に、僕なりのスマホページ作成法を紹介します。

はてなスマホページのヘッダーサイズを知る 

chipspd.hatenadiary.jp

 で、最終的に350×200で落ち着きました。(後々よく考えてみたら、スマホページ用のソース見れば早かったんじゃないかと思ったり…)

 ちなみにPCページのヘッダーサイズは940×200みたいです。

 

上記のサイトによると、「350(横幅)× 200(縦幅)」であれば良いと判明!横幅を固定し、縦幅は好みに合わせて短く変更できますね。僕は縦幅100で作成しました。

続いて、画像の加工にオススメなWebサービスを使います。

 

Pixlr Editorで文字入れを行う

文字入力や画像加工には、Web上にてこれらを行えるサービス「Pixlr Editor」用います。

 

Online Photo Editor | Pixlr Editor | Autodesk Pixlr

 

 ↓使い方はこちらを参考にしました

rindouwebdesign.com

 

そして、こんな感じで文字を入れます。

f:id:trrun:20161213224527p:plain

画像を入れたい方は、フリー素材を配布しているサイト等を活用してください。

僕は画像配置のセンスがなく断念…。

 無料のイラストサイトを紹介しているサイト集

blog.nest-online.jp

liginc.co.jp

で、完成画像がこちら!

f:id:trrun:20161213224848p:image

変更後。どうかな?

文字だけなのでちょっと寂しいような気もしますが、ヘッダーを変更できました!。

前回と比べてちょっとポップな雰囲気になったので、個人的には満足です^^*

↓変更前

f:id:trrun:20161213225016p:image

やっぱり変えてよかった!