iPhoneアプリのみではてなブログのヘッダー画像を作ってみた①

 関連記事

②で実際にブログ名の変更まで終えたのですが、どうせならこの機会にヘッダー画像も設定してみたい！

ということで作業してみました。

このセンスのかけらもないヘッダー部分を画像に差し替えるんですが、今まで”画像の容量大＝読み込み速度低下"によって読む気が失せるサイトにしないようにと最適化を重ねてきたこともあり、ヘッダー画像も極力軽くしたい！

ということで、黒背景に白文字のみで作ることにしました。

「CSSでフォント指定すりゃいいじゃん！」

PCを立ち上げるのも面倒だったので、今回はiPhoneのアプリのみで作ってみます。

使用アプリは文字入れド定番アプリ"Phonto"です。

Phonto 写真文字入れ

開発元:youthhr

無料

posted with アプリーチ

 

ヘッダー画像の基本的な作り方

まずはアプリを立ち上げ、カメラマークをタップ。

すると↓が出てくるので、好きな方法を選びます。

今回は前述の通りベタ塗りの背景で進めるため、"プレーンな画像を使用する"を選択。

デフォルトの画像がいくつか出てくるので好きなものを選択。

選択した画像のサイズが2048×2048だったので変更します。

いくつか選べるのですが、

こちらのサイトを参考に作成してみます。

ということで、一番数値が近い1500×500を選択。

*のちのちリサイズする過程を省きたい場合は、カスタムを選んで推奨サイズである1000×200に設定すると作業の簡略化が出来ます。

これをもとに文字を置いてみると…

できました！

ということでそれっぽいのができたのですが、デフォルトのフォントだけでは「俺にくれ！」感がイマイチ出てない気がするので、その辺をどうにかしていきます。

文字数もキリが良いので次回に続きます。

いちばんよくわかるWebデザインの基本きちんと入門 レイアウト/配色/写真/タイポグラフィ/最新テクニック (Design&IDEA)