IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

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

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

2016/06/15 はてなプラグイン, はてなブログ

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

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


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

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

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

Flexbox = IE9 を捨てさえすればレイアウトが圧倒的に楽になる
はてなブログテーマ Hyperspace Javascript 版 公開!
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com