Maximal Life

渋谷で働く営業本部長のブログ

はてなブログ:ヘッダー部分に画像を挿入し自分好みにカスタマイズする方法

f:id:ss17935:20190202115755j:plain

 

 

はてなブログのヘッダー、何もいじっていない状態は至ってシンプル。↓

 

f:id:ss17935:20190202120724p:plain

 

今回はこれをカスタマイズしていきます。

 

 

はてなブログ標準のヘッダーメニューを非表示にする

一番上のはてなブログ標準のヘッダーメニューは、はてなPRO から非表示にできます。

「設定」→「詳細設定」で「ヘッダとフッタ」にチェックを入れます。

こういう感じで一番上にあったメニューが表示されなくなります。↓

 

f:id:ss17935:20190202183103p:plain

 

ヘッダーに画像を挿入する

まずは挿入する画像を準備します。

画像のサイズは「幅 1000px  ×  高さ 200px」が Best です。

ただ、これより大きくても、自動でこのサイズに変換されるようです。

 

画像をヘッダーに表示させる

ダッシュボードから「デザイン」→「カスタマイズ」→「ヘッダ」へ移動。

「タイトル画像」からファイルをアップロードします。

画像にタイトルがある場合は「画像だけを表示」にチェックを入れます。

 

f:id:ss17935:20190202183550p:plain

 

ファイルを読み込ませたら完了です。

こんな感じになります。↓

 

f:id:ss17935:20190202183922p:plain



 

無事にヘッダーに画像が挿入されました。

ただ、赤矢印の隙間が気になりますよね。

 

 ヘッダーの余白をなくす

ここを消すためには以下のコードを「デザインCSS」に貼り付けます。

 

/* タイトル画像上下の余白を取る */
#blog-title {
margin: 0 auto;
padding: 0;
}

 

ヘッダー画像を横幅一杯にするには、さらに以下のコードも貼っておきます。

 

/* ヘッダー画像を横幅一杯にする */
#blog-title-inner{background-size:cover;
}

 

これらコードを貼るだけで、こんな感じになります。↓

 

f:id:ss17935:20190202184240p:plain

 

これでちょっとだけ見栄えがよくなりました。

ただ、左右の余白は残ってますが、これはのとのち直したいと思います。

 

タイトルと説明文の文字サイズと色を変更する

ブログタイトルと説明文の文字が小さいので、変更します。

以下のコードを「デザインCSS」に貼り付けます。

 

/* ヘッダータイトル文字の変更 */
#blog-title {
font-size:130%;
}
#title a{
color: #ffffff !important;
}

/*ブログ説明文の変更*/
#blog-description{font-size:120%;}
#blog-description {color: #ffffff !important;
}

 

赤字にしてある 130%120%#ffffff で好みに変更できます。

こんな感じで文字サイズ、色が変更できました。↓

 

f:id:ss17935:20190202192604p:plain

 

これでかなり見栄えは良くなったのですが、両サイドの白が気になります。

今後、ヘッダー画像を横幅一杯に表示する方法を模索したいと思います。

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ