はてなブログのグローバルヘッダーは、はてなのログインや各サービスのアクセス、購読ブログの新着やお知らせなど、いろいろ便利なのですが、体感的に2～4秒くらい表示に時間がかかってしまうので、ヘッダを表示しないことにしました。
参考になるブログ・Webサイト
はてなブログ開発ブログ - ブログのヘッダとフッタを非表示にできるようにしました（有料プラン）
ただ、ヘッダをはずすと、まるで帽子がなくなったみたいに頭がさびしくなってしまうので、グローバルヘッダーっぽいものを作って設置してみました。
SVG画像でロゴを表示
まずは、はてなブログとはてなのロゴの画像を表示するため、グローバルヘッダーのソースを見たところ、PNG画像などではなく、SVG形式でコードが埋め込まれていました。
そこで、ページに含まれるSVG画像をまとめて抽出できるGoogle Chromeの拡張機能のsvg-grabberを使って、グローバルヘッダーのSVG画像を確認してみました。
参考になるブログ・Webサイト
窓の杜 - 【レビュー】閲覧ページのSVG画像をワンクリックで抽出するGoogle Chrome拡張機能「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>
まとめ
それなりにうまくできたのではないかと。ブログの表示も少し速くなって気持ちいいです。
