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

関連記事はコチラ↓

前回作ったロゴのフォントを替え、リサイズして設定していくのが今回の作業です。

フォントを変える

まずは前回使ったPhontoですが、

Phonto 写真文字入れ

開発元:youthhr

無料

posted with アプリーチ

 

このアプリ、インターネット上で配布されているフォントを取り込んで使うことができます。

なので、それっぽいフォントを探して調整します。 

今回使用したフォントはこちら↓

これを"Phonto"に取り込みます。

まずは配布サイトへ飛びます。

iPhoneでの作業ですが、win用のリンクからダウンロード。

(Mac用だと下記のアプリ一覧に"Phonto"が表示されません）

zipファイルの解答先を聞かれるので、"その他"をタップ。

"Phontoで読み込む"を選択します。 

するとアプリが立ち上がり、取り込みたいフォントが落とせるようになります。

"インストール済み"と表示されれば作業は終わりです。

落としたフォントで設定し直すと…

できました！

くぅ〜疲れ(ry　Phontoでの作業は終了です！

*実際のヘッダー画像とは文言が変わってます

推奨サイズにリサイズする

続いては作った画像のリサイズ。

デフォルトの推奨サイズは1000×200らしいのですが、いろんなサイトの情報を拝見しつつ、1500×500を1200×200を目安に作っていきます。

はてなブログのヘッダー画像を横幅いっぱいに、美しく設定するコツ - たわしの帖

*①で説明しましたが、"Phonto"でのサイズを1000×200にしていた場合、以下の作業は行いません。

なお、僕自身この後の設定でつまづいたためリサイズどころか1000×200で画像を作り直すはめになりました(^^;;

しかし、ここまで書きながら作業していたので後日リライトして別記事に分けます。

リサイズに使用するアプリはPicsArtです。

PicsArt Photo Studio: 画像加工 コラージュメーカー

開発元:PicsArt, Inc.

無料

posted with アプリーチ

 

アプリを立ち上げたら"+"をタップします。

メニューが立ち上がるので"編集"をタップし、カメラロールから画像を読み込みます。

編集画面になったら"ツール"から"切り抜き"を選択。

で、目標の数値までサイズを調整していきます。

あとは保存してリサイズは終了！

ヘッダーに設定する

ここまで来たら、あとはデザイン→スパナマーク→ヘッダと進んでいき、ヘッダ画像をアップロードするだけです。

で、当ブログは"DUDE"というデザインを使用させていただいてるんですが、もともとレスポンシブデザインでないものをCSSで弄ってレスポンシブ対応しています。

なのでヘッダー画像もレスポンシブ対応するためにCSSを追記してきます。

散々注記してますが、僕が作業していたら当初のサイズでは何故かうまくいきませんでした(´;ω;｀)

ということで、1000×200のサイズを作り直して作業し直すハメに。。

以下は1000×200での画像をレスポンシブ対応したやり方です。

 参考にさせて頂いたのはこちら↓

コチラの記事に

このうち「padding-top: ~%;」というところだけ改変してほしい。

とあります。

1000×200の場合はここを20%とすればok！

で、さらに下記リンクを参考に余白を消すCSSを追加。

これでPC版の設定は終了です！

スマホ版は推奨サイズが350×200ということですが、僕は350×150で新たに作成し設定しました。

こんな感じです！

〆

2記事にわたって長くなりましたが、以上の様にiPhoneアプリのみではてなブログのヘッダー画像は作れます！

画像サイズさえわかればそんなに難しくないので、是非挑戦してみてはいかが？

ろごたいぷっ! マンガ・アニメ・ラノベのロゴを徹底研究する本