【はてなブログ】ヘッダーを非表示、カスタマイズする方法！スクロールして非表示にもできます。

はてなブログの記事を読むときにヘッダー（サイト上部）に黒いバーが表示されています。

こちらを非表示、カスタマイズする方法になります。

ヘッダーを非表示にする

管理画面で次の画面に進みます。

デザイン → カスタマイズ → デザインCSS

こちらのコードをデザインCSSにコピペ。

#globalheader-container{
    display: none;
}

貼り付けたら [ 変更を保存する ] ボタンをクリックして完了です。

ヘッダーをカスタマイズする

カスタマイズすることであなたのブログにあった雰囲気が出せます。

今回は文字色、背景色、非表示のカスタマイズ方法です。

※非表示は画面スクロールすることで非表示になります。私のブログが同じ設定になっています。

まずはこちらのサイトを参考に好きな色を選びます。

www.colordic.org

管理画面で次の画面に進みます。

デザイン → カスタマイズ → デザインCSS

＃部分に文字と背景色を変更し、下のコードをデザインCSSに貼り付けます。

#globalheader-container {
    color: #ff0000;   /* 文字を好きな色に変更 */
    background: #fff;   /* 背景を好きな色に変更 */
    position: relative;  /* スクロールで非表示になる */
}

貼り付けたら [ 変更を保存する ] ボタンをクリックして完了です。

以上がはてなブログのヘッダーを非表示、カスタマイズする方法でした。

最後まで読んでいただき、ありがとうございます！