ブログのヘッダーを作成したよ♪　「はてなブログ」でヘッダーを最大表示にする方法

はじめに
ヘッダーとは
はてなブログのヘッダーを最大に表示する方法
- はてなフォトライフの設定
- はてなブログの設定
イラストレーターさん紹介
おわりに

はじめに

今日はブログのヘッダーを作成して貰ったときのことをブログにするね♪

ずっとヘッダーを素敵なイラストにしたいなぁ！って思っていました。

そこで今回はイラストレーターさんにヘッダーを作成していただいたので、
はてなブログでのヘッダー変更方法とイラストレーターさんを紹介します。

ヘッダーとは

ヘッダーとはブログ上部の一番目に付く部分です。お店で言えば看板ですね！

ブログの雰囲気を読み取ってもらう大切なものであるため、疎かにはできません。

はてなブログのヘッダーを最大に表示する方法

最初にヘッダーの設置方法からご紹介。
使いたいヘッダーを準備します。

もしイラストは苦手という方がいましたら，ココナラなどでプロの方に相談するとクオリティの高いイラストができると思います♪

うぇいくもプロの方に作ってもらったよ♪

「はてなブログ」への実装となります。

はてなブログはヘッダーの設定がとても特殊ですので、誰かの参考となればと思い、備忘録的に残しておきますね。

まず、はてなブログでのヘッダーの推奨サイズは1000pixel×200pixelです。
もしイラストレーターさんへお願いする時は伝えておきましょう。

次にはてなブログのヘッダーを設定するのですが、
【デザイン】➡【ヘッダ】と名前そのままのところがあります。

この中にヘッダの「画像をアップロード」とあるので、当然ながらここからアップロード！
だけどここでの設定では、全体表示では無く、小さく表示されてしまいます。

サイズが合っていないのかと思ったのですが、どうやらこれは「はてなブログ」の仕様のようで、こだわりのある方はきちんと設定しましょう。

設定方法は「はてなブログ　ヘッダー」で検索したところ、下記のサイトがわかりやすかったので貼っておきますね。
（無断リンク失礼いたします）

gothlab.org

こちらのサイトを参考にすれば問題ないと思いますが、少し手順が違うところもあるのでうぇいくもやり方を簡単にまとめておきます。

はてなフォトライフの設定

はてなフォトライフの設定で「オリジナル画像を保存」にCheckを入れます。

次に、ヘッダーの画像をアップロードします。

アップロードした画像の「画像の編集」より、オリジナル画像へアクセスできます。

「オリジナルサイズを表示」をクリックします。

オリジナル画像が表示されたら、右クリックで画像のリンクをコピーします。

このコピーしたURLはメモ帳にでも貼っておいて下さい。後で使います。

はてなブログの設定

はてなブログでヘッダ画像にある「タイトル下」に以下で記載するソースコードを貼り付けます。

＊ソースコード

以下のソースを一部カスタマイズして「タイトル下」に貼り付けます。
<style type="text/css">
   .header-image-wrapper {display:none;}
   #blog-title{display:none;}
   .headernew img{
       max-width:1000px;
       margin: auto;
       display: block;
   }
   .headernew a{
       display:block;
       background-color:#262626;
   }
   .headernew{
       margin:0px!important;
   }
  
</style>
<h1 class="headernew">
<a href="ブログのトップページURL"> 
<img src="ヘッダー画像のURL" alt="ブログタイトル" width="100%">

＊うぇいくがカスタマイズした部分

max-width:1000px;
ヘッダーの幅のサイズを指定します。はてなブログは1000px

background-color:#ffffff
ヘッダーより左右外側となる（はみ出る）部分の背景色を指定します。
うぇいくのヘッダーに合わせて白色である#ffffffとします。

<a href="ブログのトップページURL"> の部分は
<a href="https://soreomo.com/”>のように自分のブログのURLを入れます。

<img src="ヘッダー画像のURL" alt="ブログタイトル" width="100%">

「ヘッダー画像URL」には、先程メモ帳に貼っておいたオリジナル画像のURLを入力します。
ブログタイトルは”それ、面白いアイテムですね！ ”をいれました。
（ご自身のブログタイトルを入れてね♪）

これで余白無く、最大サイズで表示されるヘッダーになると思います♪

イラストレーターさん紹介

ここからは個人的なお話し。
うぇいくはデザインセンスが皆無であるため、
ずっと欲しかったヘッダーの作成をプロのイラストレーターさんにお願いしました。

ヘッダーを作成してくださったのは、まるこめっとさん✨

marukomet.com

素敵なイラストがたくさんあるサイトですよね。うぇいくも一目ぼれ♪

まるこめっとさんのプロフィールにあるような「まるくてつるっとした」可愛らしいイラストが印象的ですが、写真から瞬間をキリトッテ作り出すイラストは、センス抜群です✨

【DMにて受付中】＃オモイデキリトッテ｜写真をイラストに。二次利用の楽しみかた。 | まるこめっとBLOG

その他にもゆるーいイラストや、今回作ってくださったようなシンプルなイラストなどを得意としています。

SNSやブログのヘッダーはオリジナルがいいなぁ、なんて思っている方は、ぜひ一度ブログを覗いてみてくださいね♪