Blogger:モバイルサイト(4)Chromeでモバイルサイトのナビボタンをカスタマイズ

前の関連記事：Blogger:モバイルサイト(3)ページ番号付ページナビの導入

iOS SafariではソースはみれてもCSSなどはチェックするツールが揃っていません。そこでPCのChromeのUser Agentを上書きする機能を使ってカスタマイズしました。

Chromeでモバイルサイトの「要素を検証」する

(2015.9.11追記。ChromeのUser Agentの偽装方法が変更になっていました。linuxBean14.04(61)Yahoo!ニュースの映像ニュースの動画をChromeで見る方法へ。)

PCのChromeでPCバージョンのページをまず開きます。

そして右クリック→「要素を検証」

右下のをクリックするとSettings画面が現れます。

左側でOverridesをクリックするとUser Agentを選択できる画面がでてきます。


User Agentをチェックし「iPhone-iOS 5」を選択して、右側のDevice metricsにもチェックが入っていると画面がスマホのように縦長になります。


モバイル端末でウェブバージョンをみた状態と同じになります。

さらにそのままページをそのままリロードするとモバイル端末と判断されてURLの最後に「?m=1」が自動的に付加されます。


iOS Safariとほぼ同じのページが表示されました。

PCのサイトと同じように「要素を検証」もできます。

この機能を使ってモバイルサイトのナビボタンをカスタマイズします。

ChromeのCSS変更機能を利用して試行錯誤で狙ったデザインのCSSを決定する

ページ番号付ページナビを導入したままだと各投稿ページの下に現れるナビ部分はこんなふうに間が抜けた感じになっています。

左の「<」ボタンの要素を検証してそのあたりにあるdivを選択してあれこれチェックをいじってみると#blog-pager-older-link, #blog-pager-newer-link のfloat: none;のチェックをはずすとボタンが一行に並ぶことがわかりました。


これはBlogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法で設定したCSSです。

これがid='blog-pager-newer-link'と id='blog-pager-older-link'のdivのデフォルトのそれぞれfloat: left;とfloat: right;を上書きしています。

さらに.mobile-link-buttonのbackground-color: #336699;のチェックをはずすと背景色が２重になっているのも解消されました。

#blog-pager aのpadding: 2px 10px 3px;のチェックをはずすとボタンが右寄りになっていたのも解消されました。

これはhtml .blog-pager-newer-linkのpadding: 0を上書きしていました。


こんな感じになりました。これを設定したいと思います。

Chromeの「要素を検証」を使うとこのようにチェックをつけたりはずして瞬時にCSSの変更後の状態をチェックして、どのCSSを無効にしてどのCSSを有効にすればよいのか確認できるので、カスタマイズには非常に便利です。

自分の思いどおりにカスタマイズするためには根気よく試行錯誤してチェックをはずしたりつけたりしないといけませんけど。

結局変更しないといけないCSSをまとめると以下になります。

変更部分①　id='blog-pager-newer-link'と id='blog-pager-older-link'のdivにそれぞれfloat: left;とfloat: right;を設定する。

変更部分②　.mobile-link-buttonを無効にする。

変更部分③　#blog-pager aのpaddingを0にする。

CSSは最後に設定したものが上書きされるのでHTMLのタグに直接カスタマイズしたいCSSを上書きさせます。

インデックスページのナビボタンをカスタマイズ

インデックスページもかっこ悪いことになっていたのでついでに修正することにしました。


「Page 4 of 6」の部分と下のページ番号の部分に空間をあけたいと思います。

Chromeでこれを再現しようと思うとperPAGEを12にしないといけませんでした。

Device metricsで画面解像度もシミュレートされているのかと思いましたがそうでもないようです。

「要素を検証」では右のパネルに出てくるCSSプロパティをダブルクリックすれば数値も変更できて、すぐに画面に反映されるのであちこちいじってみました。

.pagenavi spanのmargin-bottom:0pxをいじればよいと思ったのですがなんとかならず、結局
.widget {line-height: 1.4;}を2に変更したところ、「Page 4 of 6」の部分と下のページ番号の部分に空間ができました。

.widgetを変更すると影響が及びすぎるので「要素を検証」の上の方のパネルにある.pagenavi span, .pagenavi aに設定することにしました。

変更部分④ .pagenavi span, .pagenavi aにline-height: 2を設定する。

テンプレートのHTMLを編集する

ページナビ部分がテンプレートのHTMLのどこに相当するかは自分で探さないといけません。

今回カスタマイズする部分は<b:includable id='mobile-nextprev'>です。

以下にインクルードを全て抜き出してみました。

<b:includable id='mobile-nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div class='mobile-link-button' id='blog-pager-newer-link'>
        <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;lsaquo;</a>
      </div>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
        <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;rsaquo;</a>
      </div>
    </b:if>
    <div class='mobile-link-button' id='blog-pager-home-link'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>
    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
    </div>
  </div>
  <div class='clear'/>
</b:includable>

変更部分①のために以下のCSSを追加します。

.mobile-blog-pager #blog-pager-newer-link  {
   float: left;
}
.mobile-blog-pager #blog-pager-older-link  {
   float: right;
}

変更部分②のために以下のCSSを追加します。

.mobile-blog-pager a {
  padding: 0 !important;
}

classのCSSはidのCSSに負けるので!importantをつけています。

変更部分④の部分は<b:includable id='mobile-page-navi'>のなかでJavaScriptで描かれる部分ですので、その下の<div class='pagenavi'>に<div class='pagenavi mobile-pagenavi'>というようにmobile-pagenaviクラスを追加します。

これで.pagenaviの代わりに.mobile-pagenaviを指定することによりモバイルサイトのページナビのみにCSSを限定できます。

ということでCSSは以下を追加すればよいことになります。

.mobile-pagenavi span, .mobile-pagenavi a {
  line-height: 2;
}

モバイルサイトのページナビボタンをカスタマイズのまとめ

まず]]></b:skin>の上行に以下を入力。

/* モバイルのページナビのカスタマイズ開始---------------- */
.mobile-blog-pager #blog-pager-newer-link  {
   float: left;
}
.mobile-blog-pager #blog-pager-older-link  {
   float: right;
}
.mobile-blog-pager a {
  padding: 0 !important;
}
.mobile-pagenavi span, .mobile-pagenavi a {
  line-height: 2;
}
/* モバイルのページナビのカスタマイズ終了---------------- */

<b:includable id='mobile-nextprev'>を以下に置き換え。

 <b:includable id='mobile-nextprev'>
  <div class='blog-pager mobile-blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div  id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;lsaquo;</a>
      </div>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <div  id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;rsaquo;</a>
      </div>
    </b:if>
    <div  id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>
    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
    </div>
  </div>
  <div class='clear'/>
</b:includable>

ハイライトされた行が変更部分です。

 あとは<b:includable id='mobile-page-navi'>の中の<div class='pagenavi'>を<div class='pagenavi mobile-pagenavi'>に書き換えます。

これでiPod touchの画面をキャプチャーすると以下のようになります。


アイテムページのページナビ。


インデックスページのページナビ。

参考にしたサイト

【技あり】 Chromeでモバイルサイトを見る事が出来る設定 「要素を検証」機能 | PCあれこれ探索
この機能はモバイルサイトのカスタマイズにはとても便利です。