こわいものみたさ

映画や旅行、グルメにマニアックな記事等「こわいものみたさ」で経験した事を、ブログに綴っています。

MENU
おすすめ記事(週次更新)

【はてなブログカスタマイズ 】ヘッダー(タイトル)に画像設定して個性的なブログに!

はてなブログ開始して1ヵ月半ですが、ブログカスタマイズも結構進んできました。せっかくなので、どうカスタマイズしてきたかを自分の覚書も含めてブログに残していこうと思います。今回は、ヘッダー(タイトル)画像挿入を紹介してみたいと思います。

なお当ブログのテーマは「Minimalism」を使用し、レスポンシブデザイン設定にしていますので、他のテーマでは同様のカスタマイズができないこともありますので、ご了承ください。

カスタマイズ方法

簡単そうで、意外とヘッダー画像はてこづったニャ!

ヘッダー画像用意

まずは、画像を用意しましょう。はてなブログの画像は、横幅1000px×縦幅200pxが推奨とのことです。画像編集ツールを使って作成が一番なのですが、お金に余裕があって納得する本格的な画像を用意したいのであれば、「ココナラ」がお勧めです。

サイトに行き「Webサイト制作・Webデザイン」→「バナー・ヘッダー作成」で有料ですが素敵なヘッダーを作ってくれます。(とりあえず会員登録するだけでも楽しいサイト)

ココナラでヘッダー画像作成

ココナラでヘッダー画像作成

ヘッダー画像の登録

作成した画像をさっそく登録するニャ!

ヘッダー画像の登録方法は、「デザイン設定」→「カスタマイズ」→「ヘッダ」→「ファイルを選択」で設定したい画像を選択します。

はてなブログでヘッダ画像設定

はてなブログでヘッダ画像設定

選択すると、位置を調整する画面が出ます。横幅1000px×縦幅200pxで画像を作っているとぴったしで位置調整するところがないですが、推奨サイズと違う場合は、表示したい位置を調整してください。また、画像のみ表示したい場合は、表示設定にて「画像だけ表示」にすれば、タイトル名が消えます。

画像調整

さて、確認してみましょう!ん?なんだか、画像の周りに空白が…???なんだか余白はカッコ悪いですよね。ブログの背景と画像の色が同じだと空白が目立たないので、当ブログのヘッダ画像真っ黒にして実験してみるとこんな感じです↓

画像周辺に空白

画像の周辺に空白

これを、いい感じにカスタマイズするためには、「デザイン設定」→「カスタマイズ」→「 デザインCSS」にて、CSSに以下のコードを記入します。

/* ヘッダー画像調整 */
#blog-title {
margin-top:0px;
margin-bottom:0px;
padding-top: 0px; 
padding-bottom: 0px;
}

これで、空白がなくなりました。逆に空白が必要という方は、0pxのところを数字変更して微調整してください。ヘッダーにメニュー入れたりする方は逆に空白必要になると思いますので。

画像周りに空白がなくなった

画像周りに空白がなくなった

レスポンシブデザインでの修正

スマホでの設定も必要だニャ!

もし、レスポンシブデザインを採用している場合は、これまでの設定のままでスマホで画面を見てみると、画像がドデカサイズになってはみ出しており恥ずかしー状態に!!!

スマホでヘッダー画面はみ出し

スマホでヘッダー画面はみ出し

スマホで画像がはみ出さないようにするためには、さらにCSSに以下のコードの追加が必要ですので、先ほど書いたCSSに以下のコードを追加しました。

/* レスポンシブヘッダー対応 */
@media (max-width: 480px){#blog-title-inner,#title a{
height:80px!important;
width:auto;
}
#blog-title-inner {background-size: contain!important; }
}

どうなったかな!?っということで、スマホでみてみると、画像のはみだしが解消されていると思います。

スマホヘッダ画像最適に

スマホヘッダ画像最適に

以上が、当ブログで行った、はてなブログのヘッダ画像の設定の仕方になります!今回紹介していない、ヘッダー画像を画面横一杯に広げる方法もありますので、検索で調べてみると紹介しているブログが沢山みつかりました。

今回参考にしたブログ様

画像の空白を無くす設定で参考にさせてただきました!ありがとうございました。

レスポンシブルの設定を参考にさせていただきました。ありがとうございました。

以上になります。

当ブログのカスタマイズ紹介は、ヘッダーから順番に書くネタがなくなったら(笑)やっていきたいと思います。次は、ナビゲーションメニューですかね!?

 

【追記】2019年6月28日

ナビゲーションメニューカスタマイズ記事にしました。