【はてなブログ】ブログの上にあるグローバルヘッダーを変更する方法
この記事でははてなブログで、ページの一番上にあるグローバルヘッダーを変更する方法を紹介します。
紹介しているコードは自分のブログで使用してもらって構いません。
なお、このバーは
globalheader-container
という名前（id）で存在していますので、これをカスタマイズすればよいです。
- メニューバーの文字色、背景色を変更する
- 見出しで使用しているhタグのようなカスタマイズが可能
- 見出しを非表示にする方法
- スクロールしてもバーが動かないように固定する
- グローバルヘッダー自体の中身を変更することは無理
メニューバーの文字色、背景色を変更する
手始めに文字色と背景色を変更する方法です。以下のコードを「デザイン→カスタマイズ→デザインCSS」に貼り付けてください。
CSS
#globalheader-container {
/* 文字色 */
color: #000099;
/* 背景色 */
background-color: #ccddff;
}
結果はこのような感じで、文字色と背景色が変わっていることが分かるかと思います。
見出しで使用しているhタグのようなカスタマイズが可能
見た目のカスタマイズだけでいくと、hタグに近いカスタマイズが可能です。背景色以外にも枠線などを定義することができます。
CSS
#globalheader-container {
/* 文字色 */
color: #ffeeee;
/* ボーダー-色 */
border-color: #117711;
/* ボーダー-スタイル：立体的に隆起した線 */
border-style: outset;
/* ボーダー-太さ */
border-width: 4px;
/* 背景-色*/
background-color: #228822;
/* 上下左右のの余白 */
padding: 4px;
/* 上下左右のマージン */
margin: 4px;
}
見た目はこんな感じになります。
見出し用ですが、CSSのデザイン集を紹介しています。こちらをhタグではなく、#globalheader-containerに設定することで、デザインを変更することが可能ですのでご参照ください。
見出しを非表示にする方法
display部分を変更することで、非表示にすることができます。また、余った部分に余白を入れることも可能です。
こんな感じです。非表示となりました。
スクロールしてもバーが動かないように固定する
グローバルヘッダーの位置を固定して、スクロールしていってもバーが常に表示されているようにする方法です。
CSS
#globalheader-container {
/* 位置：固定 */
position: fixed;
}
下の方にスクロールしていっても、バーが自動的に付いてきます。
グローバルヘッダー自体の中身を変更することは無理
このヘッダーの中身自体を変えたいという話が当然出てくると思うのですが、この部分はiframeとなっており、はてなブログ側で生成したものを読み込んでいるため、残念ながら変更することはできなさそうです。
iframeって何？という方のために
iframeとは、HTMLのタグの一つで、Webページ内に矩形の領域を設け別のページなどを読み込んで表示するもの。別のWebページや画像などをあたかもページの要素の一つのように埋め込んで一体的に表示することができる。表示する内容はsrc属性でURLの形で指定する。領域の大きさや、読み込んだ要素が指定領域からはみ出した場合の処理の方法などを指定することもできる。
引用元：IT用語辞典 e-Words
ということで、デフォルトで表示される項目が好まれない場合は、グローバルヘッダーは非表示にして、ヘッダのタイトル下に代わりのものを入れるなどして対処してください。
