はてなブログでヘッダを消しても自分で見るときはヘッダを表示する方法

hatenaロゴ

ブログの表示を高速化するため、ブログにヘッダを表示しない代わりにはてなブログにグローバルヘッダーもどきを設置したのですが、自分のブログからはてなにログインしたり、購読ブログの新着やお知らせなどを確認できなくなって少し不便な思いをしています。

そこで、Webサイトの見た目を変更するchrome拡張機能User JavaScript and CSSを使って、グローバルヘッダーもどきを消して、はてなブログ標準のグローバルヘッダーを表示するようにしました。

参考:はてなブログのデザインCSSの編集画面を大きくする

自分用ヘッダーCSS

設定→詳細設定→ヘッダとフッタ(PC版)の「ブログにヘッダを表示しない」(はてなブログ開発ブログ - ブログのヘッダとフッタを非表示にできるようにしました(有料プラン))をチェックしたときのHTMLソースは、次のようになっています。

HTML
<div id="globalheader-container" data-brand="hatenablog" style="display: none" >
<iframe id="globalheader" height="37" frameborder="0" allowTransparency="true"></iframe>
</div>

display:none」でヘッダを非表示にしているだけなので「display:block !important」で強制的に表示させます。

ついでに「position:fixed」でヘッダが画面上に固定される(スクロールしてもついてくる)のを「position:static !important」で強制的に解除します。

はてなブログでヘッダを消していても、自分で自分のブログを見るときだけは、ヘッダが表示されようになったので、今までどおり、ヘッダの便利な機能が使えるようになりました。