無料ではてなブログのヘッダー画像を手軽に作る方法

今週のお題「いま学んでみたいこと」

 

ブログをやっていると手を出したくなるのが「カスタマイズ」ですよね。

はてなブログでは、ヘッダーに画像を設定することができます。

f:id:str3_m:20150906074657p:plain

 ↑これ、無料で作りました。

 

ヘッダー画像のサイズは、公式発表では以下のようになっています。

タイトル画像 ユーザーは「デザイン設定」の「カスタマイズ」タブの「ヘッダ」で、自由にタイトル画像をアップロードできます。 デフォルトで表示されるタイトル画像のサイズは、高さが200px、横幅は最大1000pxです。

はてなブログテーマ制作の手引き - はてなブログ ヘルプ

 高さ200px×横幅1000pxの画像を用意すればいいということになります。

それ以外の場合トリミングすることになります。

 

使ったもの

picky-pics.com

Picky-Picsという、オンラインデザインツールがあります。

Twitterアカウント・Facebookアカウント・メールアドレスのいずれかでログインして使用することができます。

オンライン上で背景・文字入れ・無料素材の使用・画像のアップロード機能を駆使してオリジナルデザインができるツールです。

有料素材もありますが、無料の素材も多数ありますし、別の無料素材をDLしてきてアップロードしてデザインに使用することができます。

完成したデザインはpng形式で書き出すことができます。(もちろん他にもPDFやweb形式で書き出し可能になっています。)

 

使い方

f:id:str3_m:20150906075531p:plain

ログインして、「Facebookカバー」というものを選択します。

サイズは851×315pxなので、はてなブログのヘッダーとして使用する場合真ん中寄りにデザインする必要があります…。

 

f:id:str3_m:20150906080504p:plain

あとは感覚でデザインしていけばOKです。

日本語フォント対応しているので、はるひ学園というかわいい脱力系フォントを選択してみました。

 

完成したら、できたデザインをpng形式で書き出してはてなブログのダッシュボードから設定すれば完了です。

ダッシュボード>デザイン>カスタマイズ>ヘッダと進みます。

f:id:str3_m:20150906080950p:plain

上の画像のように、上下をトリミングして位置を調整します。

 

その他のオンラインデザインツール

Facebookカバーデザインツールで検索すると豊富にサービスが出てきます。

その中でも私が実際に使ってみたサービスをご紹介します。

 

www.canva.com

この「Canva」でもFacebookカバーを作成することができます。

Facebookアカウント・Googleアカウント・メールアドレスのいずれかでログインして使用することができます。

ただ注意していただきたいのが日本語未対応でフォントも英字フォントしか設定することができないという点です。

ブログのタイトルが英語の方にはおすすめです。

 

Canvaではテンプレートとして用意されたキャンバス以外にも自分でサイズ設定してキャンバスを用意することができます。

f:id:str3_m:20150906081759p:plain

「Use custom dimensions」をクリック。サイズを設定します。

ここではてなブログヘッダーサイズの高さ200px×横幅1000pxを設定してあげます。

width(横幅)×height(高さ)の順に入力

f:id:str3_m:20150906082302p:plain

あとはPicky-Picsと同じように感覚でデザインしていけばOKです。

Canvaでは画像にinstagramのようなフィルターをかけたり、画像を透過したりすることも可能でデザインの幅が広がります。

 

 まとめ

1.はてなブログのヘッダー画像サイズは 高さ200px×横幅1000px

2.オンラインデザインツールFacebookカバーを作成する

3.はてなブログのダッシュボードでから設定しトリミングして完成

 

いかがでしたか?ブログカスタマイズは一度手を出すとキリがないので、ほどほどのところにしておいて記事の充実をがんばっていきたいです。