（この記事は約6分でお読みいただけます。）
新しい靴を買えば他人がどんな靴を履いているか気になるように、ブログを始めたら他人のブログが気になります。
ヘッダーも然り。気になり始めたら皆様がどんなデザインにしているのか気になるものです。
かつての私のヘッダーはインストールテーマ「Brooklyn」の基本設定のまま。
横2000×縦300pxの真っ白い背景に黒文字で「あるあぷ」とだけ。
シンプルを越えて寂しいです。
ブログトップを開くたびに早く作らなければ、と思っておりました。
せっかく作るなら満足のいくデザインまで凝りたい。
こだわり始めると止まらない私の凝り性が騒ぎ出します。
ヘッダーを美しく設定する
皆様ご存知の通り、はてなブログはヘッダーの推奨サイズが1000×200pxとなっておりますが、そのまま設定しても画質が悪いやら上下左右の余白がガラガラやらで美しくありません。
綺麗な画質で余白も残さず設定するには以下の手順が必要になります。
- ヘッダー画像をオリジナルサイズのまま保存する
- ヘッダー画像をHTMLで読み込んで幅いっぱいに表示する
ヘッダーを美しく設定された先人達の知恵をお借りしましょう。
【項目１】ヘッダー画像をオリジナルサイズのまま保存する
オリジナルサイズの保存にあたり、参考にさせて頂いた記事はこちらです。
はてなブログに画像をアップロードすると同サービスの「はてなフォトライフ」に保存されますが、ここではサイズ超過した画像は自動的にリサイズされるように初期設定されています。
「はてなブログ PRO」でない限り一ヶ月に100MBしかアップロードできないのでありがたい機能です。
当然リサイズされれば画質も落ちますので、ヘッダーの画像くらいはオリジナルサイズで保存する必要があります。
はてなフォトライフの画面右上「設定」から画像サイズを「0」、「オリジナルサイズの画像を保存」にチェック。
これで画像をアップロードすればそのままのサイズで保存されます。
【項目２】ヘッダー画像をHTMLで読み込んで幅いっぱいに表示する
HTMLの記述にあたり、参考にさせて頂いた記事はこちらです。
<style type="text/css">
.header-image-wrapper {display:none;}
#blog-title{display:none;}
.headernew img{
max-width:1120px;
margin: auto;
display: block;
}
.headernew a{
display:block;
background-color:#fde6ff;
}
.headernew{
margin:0px!important;
}
</style>
<h1 class="headernew">
<a href="ブログのトップページURL">
<img src="ヘッダー画像のURL" alt="ブログタイトル" width="100%">
</a>
</h1>（一部文字色変更して引用。）
月無ことのはさんのブログ「月無ことのはの日記」では、横幅1120pxの画像を読み込み、カラーコードでイラストの背景と同じ色味で拡張してヘッダー幅いっぱいまで表示されているようです。
ヘッダー幅が記事とサイドバー幅にカッチリ合っており、ツライチで大変美しい。
私は画像のみでヘッダー幅いっぱいに表示したかったので、横幅2000pxの画像を作製しました。HTMLでもmax-widthは2000pxに設定してあります。
ヘッダー完成
試行錯誤の末、出来上がったヘッダーがこちら。
サイズはBrooklynの背景pxを踏襲して2000×300pxです。
製作にあたり「CLIP STUDIO PAINT PRO」を使用しました。
近未来感あってとても良い！（自画自賛）
「あるあぷ」の下の英文字。
途中から更なるこだわりが出てきて、オリジナルフォントまで作っちゃいました笑
こんな感じの六角形モチーフのカクカクしたフォントです。
表現したかった近未来感もあってお気に入り。
装飾無しverもあります。
六角形モチーフのフォントだからHexafontなんて語呂良くてバッチリじゃん！なんて思ったら、
あ り ま し た 。
www.dafont.comモチーフどころか六角形まんま。君こそがHexafontだ...。
Future ＋ Hexagon ＋ Font、読みにくいですが仮名で「Fexafont」と名付けます。
一文字だけしか違わないけど許して...
フォントの方は、私の気力が持てば全文字作製して期間限定で配布したいと思っております。
高画質ヘッダーゆえの不満点
こだわりを詰め込んだヘッダーゆえに大変気に入っておりますが、少し気になる点が...。
ここまで高画質で大きい画像を使用しているのでファイルサイズが大きいのです。
読み込むのが大変。
PCやスマホのスペックに依存するかと思いますが、ほんの少しラグってからヘッダーが表示されるのが気になります。気のせいかな...？
画質を少し落とすなり横幅を変えるなり何か対策をしなければ...と考えております。
おわりに
ブログを始めてみなければ気が付かなかったようなアイデアやデザインがあって、見ているだけでも弄っているだけでも楽しいものです。
また気になった部分はちょこちょこアップデートしていく予定ですので、よろしくお願いします。
こちらが現在のブログトップ。
いかがでしょうか。
私のブログ、美しかろう！
最後までお読みいただきありがとうございました。
