それ、面白いアイテムですね!

パソコンやIT、ガジェットなどについて綴るよ!

それおも

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

はじめに

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


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

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

ヘッダーとは

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

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

ヘッダーはブログのトップに表示される
ヘッダーはブログのトップに表示される看板

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

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

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



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

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

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

まず、はてなブログでのヘッダーの推奨サイズは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やブログのヘッダーはオリジナルがいいなぁ、なんて思っている方は、ぜひ一度ブログを覗いてみてくださいね♪

ヘッダーの依頼

今回の依頼内容は、ブログのヘッダーを作成して欲しいとだけ伝えて、デザインは完全にお任せでお願いしました。

うぇいくがおまかせで頼む理由として、イラストレーターさんが持っているセンスのパフォーマンスが最大になると思っているからです。

そして、おまかせとした以上、出来上がったイラストについては軽微な修正以外の注文はいれません。

もし好みがある場合は見積もりをお願いする時に、しっかりと好みやデザインを伝えておくと、修正が減ってやりとりがスムーズになります♪


・・・ちなみに、
オートミールを愛する女性オートミールレシピブロガー「よるもあ」さんご本人イラストも、まるこめっとさん♪

よるもあブログ|20分で出来る簡単オートミールレシピ!低糖質と節約も叶えよう。

うぇいくがオートミールを食べるようになったのはよるもあさんの影響!

ヘッダーの完成

さて、ドキドキの完成品はこちら♪

f:id:weik:20220107173059j:plain

(今は白バージョンをヘッダーにしています)

シンプルだけど、シンプルだからこそ、それおもの可愛いフォントとひらめきの電球が際立ってとっても素敵ですよね✨
電球のフィラメント部分が、肉球になっているのも細かい遊び心があってとても気に入りました♪

こういう小物が大好きなうぇいく

うぇいくのブログは雑多な記事が多いのでヘッダーはシンプルなものがいいのかな、って勝手に思っていたところに、このような素敵なイラストが完成してとてもしっくりときました。

出来上がりまでのわくわく感はおまかせの醍醐味ですね✨

Twitterのヘッダーも♪

Twitterのヘッダーもお願いしていて、すでに使用しています。

お暇な方は見てね♪

うぇいくが犬小屋から出てくるのをイメージして作ってくれました✨
ブログと同じフォントで、お揃いなところが素敵です。


うぇいく (@WeikDog) | Twitter

おわりに

今回はブログのヘッダー変更のお話でした。
このように少しずつ良くしていくのも、ブログの楽しみのひとつですよね。
ブログを書くとき、ヘッダーを見るだけでわくわくしてモチベーションアップ♪

みんなも作ってみてね!


ヘッダーの完成度星5つ♪

キャラクターも作成していただきました♪
soreomo.com