はてなブログのヘッダー、何もいじっていない状態は至ってシンプル。↓
今回はこれをカスタマイズしていきます。
はてなブログ標準のヘッダーメニューを非表示にする
一番上のはてなブログ標準のヘッダーメニューは、はてなPRO から非表示にできます。
「設定」→「詳細設定」で「ヘッダとフッタ」にチェックを入れます。
こういう感じで一番上にあったメニューが表示されなくなります。↓
ヘッダーに画像を挿入する
まずは挿入する画像を準備します。
画像のサイズは「幅 1000px × 高さ 200px」が Best です。
ただ、これより大きくても、自動でこのサイズに変換されるようです。
画像をヘッダーに表示させる
ダッシュボードから「デザイン」→「カスタマイズ」→「ヘッダ」へ移動。
「タイトル画像」からファイルをアップロードします。
画像にタイトルがある場合は「画像だけを表示」にチェックを入れます。
ファイルを読み込ませたら完了です。
こんな感じになります。↓
無事にヘッダーに画像が挿入されました。
ただ、赤矢印の隙間が気になりますよね。
ヘッダーの余白をなくす
ここを消すためには以下のコードを「デザインCSS」に貼り付けます。
/* タイトル画像上下の余白を取る */
#blog-title {
margin: 0 auto;
padding: 0;
}
ヘッダー画像を横幅一杯にするには、さらに以下のコードも貼っておきます。
/* ヘッダー画像を横幅一杯にする */
#blog-title-inner{background-size:cover;
}
これらコードを貼るだけで、こんな感じになります。↓
これでちょっとだけ見栄えがよくなりました。
ただ、左右の余白は残ってますが、これはのちのち直したいと思います。
タイトルと説明文の文字サイズと色を変更する
ブログタイトルと説明文の文字が小さいので、変更します。
以下のコードを「デザインCSS」に貼り付けます。
/* ヘッダータイトル文字の変更 */
#blog-title {
font-size:130%;
}
#title a{
color: #ffffff !important;
}
/*ブログ説明文の変更*/
#blog-description{font-size:120%;}
#blog-description {color: #ffffff !important;
}
赤字にしてある 130%、120%、#ffffff で好みに変更できます。
こんな感じで文字サイズ、色が変更できました。↓
これでかなり見栄えは良くなったのですが、両サイドの白が気になります。
今後、ヘッダー画像を横幅一杯に表示する方法を模索したいと思います。
↓ ランキングに参加しています。よろしければポチッとして下さい。
