はてなブログにグローバルヘッダーもどきを設置した

hatenaロゴ

はてなブログのグローバルヘッダーは、はてなのログインや各サービスのアクセス、購読ブログの新着やお知らせなど、いろいろ便利なのですが、体感的に2~4秒くらい表示に時間がかかってしまうので、ヘッダを表示しないことにしました。

参考になるブログ・Webサイト
はてなブログ開発ブログ - ブログのヘッダとフッタを非表示にできるようにしました(有料プラン)

ただ、ヘッダを外すと、まるで帽子がなくなったみたいに頭がさびしくなってしまうので、グローバルヘッダーっぽいものをつくって設置してみました。

SVG画像でロゴを表示

まずは、はてなブログとはてなのロゴの画像を表示するため、グローバルヘッダーのソースを見たところ、PNG画像などではなく、SVG形式でコードが埋め込まれていました。

そこで、ページに含まれるSVG画像をまとめて抽出できるGoogle Chromeの拡張機能のsvg-grabberを使って、グローバルヘッダーのSVG画像を確認してみました。

参考になるブログ・Webサイト
窓の杜 - 【レビュー】閲覧ページのSVG画像をワンクリックで抽出するGoogle Chrome拡張機能「svg-grabber」

svg-grabber

あとは、はてなブログとはてなのロゴ画像のコードをコピーして、はてなブログのhead部分に埋め込んで完成です(グローバルヘッダーもどきのHTMLコード)。

PNG画像でロゴを表示

モバイル版のはてなブログのロゴ画像とはてなフォトライフのはてなのロゴ画像をヘッダーに表示しました。

(設定→詳細設定→検索エンジン最適化のheadに要素を追加にコードを入力)

HTML
<div id="global-header">
    <a href="https://hatenablog.com/"><img src="//blog.hatena.ne.jp/images/touch/logo-blog-full@2x.png" alt="はてなブログ"</a>
    <a href="http://www.hatena.ne.jp/"><img src="//cdn.www.st-hatena.com/images/header/global-logo-wh.png" alt="はてな"</a>
</div>

(デザイン→カスタマイズ→デザインCSSにコードを入力)

CSS
#global-header {
    height: 37px;
    background: #000;
}

#global-header a[href^="https://hatenablog.com/"] img {
    width: 141px;
    height: 37px;
    margin: 0 0 0 9px;
}

#global-header a[href^="http://www.hatena.ne.jp/"] img {
    float: right;
    margin: 12px 10px 0 0;
}

モバイル用のヘッダーを表示

もっと簡単にグローバルヘッダーを軽くするなら、モバイル用のヘッダーを表示するのがいいと思います。

参考になるブログ・Webサイト
IMUZA.com - はてなブログのグローバルヘッダー=PC のヘッダーをモバイル用に変更する

(設定→詳細設定→検索エンジン最適化のheadに要素を追加にコードを入力)

JavaScript
<script>
    document.documentElement.setAttribute('data-globalheader-type', 'touch');
</script>

まとめ

それなりにうまくできたのではないかと。ブログの表示も少し速くなって気持ちいいです。

- 追記 -
はてなブログでヘッダを消しても自分で見るときはヘッダを表示する方法を書きました。