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/05/25

WordPress:リビジョン削除、回数制限

2023/05/10

WordPress:裏技的サイトリニューアル

2023/04/28

XserverへのSSH接続がエラーになってしまった

2023/04/16

正規表現の最短一致でミスる

2023/04/4

WordPress:公開中サイトをサブディレクトリでリニューアルし公開する

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

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

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com