とり子の楽観主義

オプティミストを目指すとり子の雑記ブログ。

【初心者OK】はてなブログのヘッダー(タイトル)画像を無料編集ソフトだけで作る方法【カスタマイズ】

ブログカスタマイズ

先日、ブログのテーマを「Minimalism」に変更しました。

かなりシンプルなデザインのテーマなので少し個性を出したいと思い、いろいろとカスタマイズしてみました。

今回は備忘録もかねて、初心者にもできたヘッダー(タイトル)画像の作り方をまとめたいと思います

 

 

ヘッダー画像を作る

ヘッダー画像完成形

f:id:torikooptimism:20180514185514p:plain

この記事を書いている時点の当ブログのヘッダーはこんな感じです。

すごくシンプルですが、ここに至るまで結構苦労しました(笑)

今回はこの画像を無料編集ソフトを使って作っていきます。

 

無料のweb上編集ソフト『Canva』を使って、ジャストサイズのヘッダー画像を作る

Canvaとは?

Amazingly Simple Graphic Design Software – Canva

Canvaは無料で、しかもweb(ブラウザ)上で使用できる画像編集ソフトです。

Photoshop等、使いやすく高機能な編集ソフトはライセンス料が高額だったりするのですが、Canvaは会員登録さえすれば無料で利用できます。

より多くの便利な機能を使い方には、有料版も用意されています。

 

Canvaはスマホ用のアプリもあるのですが、そちらでは画像サイズを任意で設定できないため、今回はPC版を使用します。

 

①画像サイズを設定する

Canva公式サイトのこちらのページにサイズ設定の詳しい方法が書かれています。

「Canvaスタンダードでカスタムサイズを使用」の部分を参考にしてください。

はてなブログのヘッダー画像の推奨サイズは1000×200pxなので、手順に従って数値を入力します。

support.canva.com

 

②文字を入力する

f:id:torikooptimism:20180514223731j:plain

画像サイズを設定できたら、[テキスト]→[本文を追加]を選択し、文字を入力します。

 

③タイトル文字のフォント、サイズ、色等を設定する

f:id:torikooptimism:20180514224005j:plain

文字を入力したら、フォント等の設定をします。

ちなみに今回の画像では、フォントは「Rounded M+ Heavy」を使用しています。

タイトルの他にブログ説明文等入れたければ、必要に応じて②~③の手順を繰り返してください。

 

④画像を挿入する

f:id:torikooptimism:20180514224043j:plain

画像を挿入したい場合は、[アップロード]→[画像をアップロード]から、PC上に保存している画像を選択します。

アップロードされた画像を選択し、クリックしながら移動させて作成中のヘッダー画像に重ねます。

挿入した画像は、角の●を引っ張れば好きなサイズに変えられます。

 

ちなみに今回は手書きでロゴっぽいものを作りたかったので、こちらで紹介されている方法を参考にさせていただき、画像を作成しました。

当ブログでたまに使用している手書き画像は、いつもこの方法で作成しています。

bluelog-note.com

 

⑤画像を保存する

f:id:torikooptimism:20180514224248j:plain

背景色はブログ側で設定するので、ヘッダー画像はこれで一旦完成です。

[ダウンロード]からPC上に画像を保存します。

 

ブログ側の背景色設定を使うため、この画像の背景を透過したい(白地を透明にしたい)のですが、Canva無料版では背景を透過できないようなので別のものを利用します。

※有料版Canva for Workでできることに、「背景を透過してデザインをダウンロード」と書かれています。

support.canva.com

 

⑥画像背景を透過する

www.peko-step.com

こちらのサイトでは、画像の任意の色を簡単に透過できます。

手順はページ下部に分かりやすく説明されています。

透過できたら[画像を保存]を選択してください。

 

はてなブログ側の設定を行う

①ヘッダー画像を挿入する

f:id:torikooptimism:20180514224449j:plain

はてなブログに移り、ブログ設定画面左から[デザイン]を選択。

[カスタマイズ(スパナの絵)]の[ヘッダ]の部分を選択するとこのような画面になります。

[ファイルを選択]から先ほど作成したヘッダー画像を選択します。

※表示設定は[画像だけ表示]を選択してください。

 

このままではヘッダー部分が妙に大きく、また背景色が無い状態なので、それをCSSで設定していきます。

 

②背景色をつける

hitsuzi.hatenablog.com

テーマ「minimalism」作成者の方が上記のページに公開している「ヘッダーを好きな色に設定する」から、ヘッダー背景色を変えるコードをコピーし、デザインCSSに貼り付けます。

貼り付けるのはココ↓

f:id:torikooptimism:20180514225139j:plain

「#カラーコード」の部分をこちらのサイト(CSS/HTML色見本)等を参考にして、お好みの色に変更してください。

 

ちなみに当ブログでは背景色にグラデーションを使用しているので、こんな感じでグラデーションのコードと、グラデーションにしたい2色を選んで入れています。

--------------------------------------------------------------------------------------

/* ### ヘッダーの背景色 ### */

#blog-title{

  background: linear-gradient(#FFFACD, #FFFFFF) !important;}

--------------------------------------------------------------------------------------

 

③ヘッダー画像の余白を無くす

このままではヘッダー部分の余白が大きく少し不格好なので、こちらのサイトの「タイトル画像の上下の余白を取る」の部分で紹介されているコードをコピーして、デザインCSSに貼り付けます。

blog.minimal-green.com

貼り付けるのはココ↓ 

f:id:torikooptimism:20180514225019j:plain

コードの後ろに !important;を足すと上手くいきました。

--------------------------------------------------------------------------------------

/* タイトル画像上下の余白を取る */
#blog-title {
margin: 0 auto !important;
padding: 0 !important;
}

--------------------------------------------------------------------------------------

これで余白が無くなります。

 

ようやく完成しました!

f:id:torikooptimism:20180514225240p:plain

 

④スマホでの表示を調整する ※追記 2018/5/16

使用しているテーマによるかと思いますが、私の場合(「Minimalism」を使用)スマホでのヘッダー画像が上手く表示されず、両端が切れていました。

この問題については、こちらのサイトで紹介されているコードをCSSに追加することで解決しました。

※後半に追記として書かれているコードを使うと上手くいきました。

blog.z0i.net

 

終わりに

参考にさせていただいたサイトの運営者さま、ありがとうございました。

※もし掲載に問題がありましたら、削除等対応致しますのでお手数ですがご一報ください。

 

私はブログやカスタマイズの初心者なので、もしかしたらここに紹介した手順よりもっと効率が良い方法があるかもしれません(汗)

それでもなんとかイメージ通りできましたので、参考になれば幸いです。

ヘッダー画像ができるとぐっと自分のブログに愛着が湧きますよ!