【はてなブログ】スマホページのヘッダー画像の作り方
今回、はてなのスマホページのヘッダー画像を制作しました。
今やネットアクセスの主役はモバイルと言われています*1
「スマートフォン向けのサイトのデザインにこだわりたい」「ブログの顔であるヘッダーを作成したい」と思う人は少なくないと思います。
そんな方に、僕なりのスマホページ作成法を紹介します。
はてなスマホページのヘッダーサイズを知る
で、最終的に350×200で落ち着きました。（後々よく考えてみたら、スマホページ用のソース見れば早かったんじゃないかと思ったり…）
ちなみにPCページのヘッダーサイズは940×200みたいです。
上記のサイトによると、「350(横幅）× 200(縦幅）」であれば良いと判明！横幅を固定し、縦幅は好みに合わせて短く変更できますね。僕は縦幅100で作成しました。
続いて、画像の加工にオススメなWebサービスを使います。
Pixlr Editorで文字入れを行う
文字入力や画像加工には、Web上にてこれらを行えるサービス「Pixlr Editor」用います。
Online Photo Editor | Pixlr Editor | Autodesk Pixlr
↓使い方はこちらを参考にしました
そして、こんな感じで文字を入れます。
画像を入れたい方は、フリー素材を配布しているサイト等を活用してください。
僕は画像配置のセンスがなく断念…。
無料のイラストサイトを紹介しているサイト集
で、完成画像がこちら！
変更後。どうかな？
文字だけなのでちょっと寂しいような気もしますが、ヘッダーを変更できました！。
前回と比べてちょっとポップな雰囲気になったので、個人的には満足です^^*
↓変更前
やっぱり変えてよかった！
