友だちの主催するグループのブログを作って管理している。

親子向けサービスなので、いかがわしい広告の出るレンタルブログを避け、Google Bloggerでつくった。

「レイアウト」でcrosscolに「ページ」ガジェットを追加した。

固定ページへのテキストリンクが横に並ぶグローバルメニュー？的なもの。これはiPhoneで見ると、セレクトボックスに変わる。

友だちからはこれが不評で、タップしてもメニューが表示されない、と言われていた。

自分のiPhoneからは普通に操作できるし、そもそも改造できる気がしなかったので、操作方法だけ説明して、カスタマイズはしなかった。

しかし、問い合わせメッセージを数件受信したが、その内容から、どうも固定ページが見えていない気がしてきた。

仕方ないので重い腰をあげ、改造に挑戦してみた。セレクトボックスをやめ、パソコン版のようなグローバルメニューにするのだ。いくつも改行されてしまうが、これも操作性・視認性のためだ。

検索しまくって自分でも理解できるような情報の載ったページを探すが、まあBloggerの記事が少ない。

検索はあきらめて、以前お世話になったフォーラムで質問しようとしたが、なんとGoogleがBloggerフォーラムの日本語版を閉鎖してしまっていた。

途方に暮れたまま仕事に没頭していたが、仕事が終わってからふと思いついて、やってみたらうまくいった。

１．
「テンプレート」のページで「HTMLの編集」を選ぶ。

２．
「ウィジェットへ移動」のセレクトボックスから「PageList1」を選ぶ。

３．
こんなふうになっているのを

        <b:widget id='PageList1' locked='false' title='ページ' type='PageList'>
          <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>

こう変えた。

        <b:widget id='PageList1' locked='false' title='ページ' type='PageList'>
          <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
        </ul>
      

    <b:else/>

４．
「テンプレートを保存」を選ぶと「テンプレート」のページに戻る。
今度は「カスタマイズ」をクリックする。

５．
左側メニューから「上級者向け」を選び、次に右に出てきたメニューから「CSSを追加」を選ぶ。

６．
さらに右側に出てきた「カスタムCSSを追加」のテキストボックスに以下のように追加する。
追加したら右上「ブログに適用」をクリックしておしまい。

.mobile .tabs-inner .PageList .widget-content {
    font-family: Arial;
    font-size: 14px;
    padding: 0;
    height: auto;
}

※バックアップをとってから行ってください。

間違ってたらごめんなさい。