読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

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

はてなブログ

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

f:id:ausnichts:20160615121150p:plain

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



グローバルヘッダーの 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>


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

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

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

で、やりたいことは、すでに当サイトではそうなっていますが、あまり主張しない感じで小さく表示できればということですので、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 です。