ゆとりのゆるやかな日常

ゆとりの日々の記録

 

【初心者向け】はてなブログカスタマイズ ヘッダー

f:id:harunoyaOBORO:20210807224534j:plain

 

前回の記事ではてなブログカスタマイズの基本をやりました。

 

今回の記事から私が実際に行ったカスタマイズをもとに実際にお世話になったサイトを紹介していきます。

 

 今回はヘッダーのカスタマイズです。

 

カスタマイズ① ヘッダー

はてなブログのヘッダーのサイズは1000px ×200pxが推奨されています。

 

が、私はもう少し縦幅があったほうが好みだったので比率を1000px ×300pxにしてヘッダーの画像を用意しました。

 

【注意】

ここで、「デザイン」➤「カスタマイズ」➤「ヘッダ」➤「画像をアップロード」からヘッダーを設定するやり方だと、画像がトリミングされてしまい、かつ余白が出来て画面いっぱいに表示されません。

 

画面いっぱいに表示させるには、ヘッダーの設定をコードで変更する必要があります。

 

f:id:harunoyaOBORO:20210825182542j:plain

 

⇓私はこちらのサイトのコードを使用させていただきました。

mulife.hatenablog.com

 

用意したヘッダーの画像は一度「はてなフォトライフ」にアップロードして画像のURLを取得してから、先ほどのコードに書き加えていきます。

 

 

f:id:harunoyaOBORO:20210817173805j:plain

 

図のように「フォルダの編集」から

 

①画像の左下のボックスにチェックを入れる

②「ブログに貼り付ける」をクリック

 

でURLを表示させます。

https://~.jpg」までが画像のURLです。

 コピー&ペーストしてコードに書き加えて完成です。