読者です 読者をやめる 読者になる 読者になる

成勉ブログ

独学でどこまで頭がよくなれるか、成金ならぬ成勉(成り上がりで勉強できる奴)を目指します)

『初心者向け』はてなブログのヘッダー画像を無料で作成して画像変更する方法

【スポンサーリンク】

どうも!saka-moです!
今日は、ヘッダー画像を変えてみたので、ヘッダー画像の作り方と画像変更の仕方を書いていこうと思います!

 

[:内容]

 ヘッダー画像とは

ヘッダーとは英語のheadからきていて、記事とは別の一番頭の領域の事です。
今の僕のブログで言えばこの部分

F:ID:坂-MO:20170406213355j:平野

ブログをほかのブログと差別化し、覚えてもらうためにはオリジナルのヘッダー画像が必要です。
今回は入門としてフリー素材だけで作りました。

ヘッダー画像の作り方

こちらのサイトを参考にさせていただきました。

ブログのヘッダー画像の作り方!簡単リサイズから文字入れまで独自性を打ち出す

手順1.PhotoScapeをダウンロードする

まずは先に画像編集ソフトをダウンロードしていきましょう。
今回は「PhotoScape」を使います。
こちらからダウンロードできます。

http://www.photoscape.org/ps/main/index.php

F:ID:坂-MO:20170406214122j:平野

開いたら、無料ダウンロードをクリックして、赤井印で囲ってる方のボタンからダウンロードしてください。

手順2.画像を用意

フリー素材の画像を探しましょう。
僕が使った図書館のやつはここから使いました。

フリー写真素材・Pexels

海外のサイトですが、おしゃれな画像が豊富にあり、英単語1つ入力するだけでたくさんの候補が出るのでお勧めです。
他には

http://cupcake.nilssonlee.se/

ぱくたそ-フリー写真素材・無料ダウンロード

StockSnap.io - 美しいフリー写真素材(CC0)

こういうサイトもいいと思います。

手順3.実際に作っていく

f:id:saka-mo:20170406215351j:plain

左の赤で囲ったとこから画像を探してクリックするか、右の赤で囲った空間に画像をドロップしてください。

f:id:saka-mo:20170406215604j:plain

画像を用意したら
サイズを調整します。僕は上のサイトを参考に横幅980px縦幅250pxで調整しました。

まずリサイズで横幅を「980」にします。

f:id:saka-mo:20170407215607j:plain

そして「トリミング」で画像の位置を選択し、縦幅は250になるように調整します。

f:id:saka-mo:20170407215751j:plain

そしたらトリミングボタンを押して画像をトリミングしましょう。

それが終わったら次はブログ名を打っていきます。
オブジェクト」の「T」をクリックして、文字を打ってください。
するとこんな感じに

f:id:saka-mo:20170407220016j:plain

フォントはキルミーベイベーのロゴ風フォント「キルゴ」を使いました。

無料で使えるキルミーベイベーのロゴ風フォント「キルゴ」 - GIGAZINE

エフェクトを使用する場合は、下の画像のハートマークを押して、画像を挿入してください。

f:id:saka-mo:20170407220248j:plain

すべて終わったら保存しましょう。


はてなブログでヘッダー画像を変更する

ヘッダー画像ははてなブログ内の「デザイン」から「ヘッダー」→「画像をアップロード(参照)」を押し、画像を選んでください。

f:id:saka-mo:20170407213418j:plain

※画像ではすでに選択済みですが、気にしないでください。

そしてあとは画像の位置を調整したら完成です。


ヘッダーの下に空白ができるとき(スマホ)

これであっという間にヘッダー画像が変更できるわけですが、スマホで見たときにヘッダー画像の下に空白ができているのを発見しました。
そうした場合の解決策も書いておきます。

www.imuza.comこのサイトを参考にしました。
そこに書いてあったこのCSSを「デザイン」から入力し、

@media (max-width: 480px) {
  .header-image-only #blog-title #blog-title-inner {
    background-size: auto 120px;
    height: 120px;
  }
}

 120pxのところを90pxにすれば空白が消えました。

まとめ

案外簡単にヘッダー画像は変更できました。


もしかしたらまだまだ改善できるところがあるかもしれないので、試行錯誤して新たな発見があれば記事にしようと思います!

ではでは!