はてなブログのグローバルヘッダー＝PC のヘッダーをモバイル用に変更する

はてなブログでは、グローバルヘッダーという、はてなブログロゴやユーザー向けのナビゲーションメニューが、標準ですと黒いバーで一番上に表示されます。これですね。

このヘッダーは、はてなブログPro ですと非表示にもできるのですが、全くなくしてしまうというのは不便なこともあり、サイズを小さくすることはできないかといろいろ試してみました。

• グローバルヘッダーの HTML
• グローバルヘッダー内にはアクセス出来ない
• PC にモバイル用ヘッダーを表示する

01グローバルヘッダーの HTML

PC 用は下のようになっています。id と class 名だけ残してあります。

<ul class="globalheader-nav">
    <li class="service-logo">はてなブログロゴ</li>
    <li id="current-blog" class="current-blog">カレントブログメニュー</li>
    <li class="globalheader-nav-subscribe js-globalheader-subscribe">読者になる（✓読者です）</li>
</ul>
<ul class="service-menu">
    <li class="admin-blog" style="">ダッシュボード</li>
    <li class="edit">記事を書く</li>
    <li id="header-my" class="header-my">ユーザ名（ナビゲーションメニュー）</li>
    <li class="header-unread" id="header-unread">購読ブログ</li>
    <li class="header-services" id="header-services">利用中のサービス</li>
    <li class="header-notify" id="header-notify">お知らせ</li>
    <li id="global-logo" class="global-logo">はてなロゴ</li>
</ul>

モバイル用は次です。省略版ではなく別物ですね。

<div id="header-body-mobile">
    はてなブログロゴ
    <div class="globalheader-right">
        <ul class="globalheader-right-nav">
            <li class="js-subscribe-container touch-header-btn">読者になる（ユーザーアイコン）</li>
            <li class="touch-header-btn">ブログ開設</li>
        </ul>
    </div>
</div>

02グローバルヘッダー内にはアクセス出来ない

で、このヘッダーのスタイルを変更できないかということですが、これは、iframe ではてな本体から読み込まれていますので、クロスドメインとなり、iframe 内の要素にアクセスすることができず、スタイルも変更できません。javascript も使えません。postMessage という方法もあるようですが、はてな本体を操作できませんのでこれも無理です。

03PC にモバイル用ヘッダーを表示する

で、やりたいことは、すでに当サイトではそうなっていますが、あまり主張しない感じで小さく表示できればということですので、PC にモバイル用のヘッダーを表示すればいいのではと思いつきました。

html タグの属性にこんなものがあり、これを操作すれば変更できそうです。

// PC
data-globalheader-type="pc"


// モバイル
data-globalheader-type="touch"

ということで、ヘッダ > タイトル下 に下のスクリプトを入れれば、PC でもモバイル用ヘッダーに変わります。

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

背景を透明にするには、

#globalheader-container {
    background-color: transparent;
}

とすれば OK です。