タグ別アーカイブ: テンプレート

Blogger メニュー カスタマイズ モバイル

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

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

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

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

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

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

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

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

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

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

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

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

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

3.
こんなふうになっているのを

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

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

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

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

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

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

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

iPhone Safari WordPress文字化け

iPhone 文字化け

WordPressで書いたこのブログのQVCのアフィリエイトリンク、変なふうに文字化けする。

書いたばかりだと特に文字化けしないが、ページを再読み込みすると文字化けするようだ。

ソースを見て比較すると、記事中に貼ったリンクと、テンプレートにいろいろ書いてカスタムフィールドに入れた商品コードから作ったリンクと、微妙な差が出ている。

本文中にペーストしたリンクには、&の次に「#038;」というのが勝手に挿入されるようだ。

#038;は&の数値文字参照(&#10進コード;)ということらしい。

「#038;」でなくて、「&038;」が「&」を表現していたものらしい。

テンプレートを修正してiPhoneで見てみたが、まったく直ってない。

結局テキストリンクを<P>タグで囲ってやったら直ったり、直らなかったり。

どうしたらいいのか・・・?

Amazonの情報取得に失敗しました(この商品はECSを通してアクセスすることはできません。)【Code:AWS.ECommerceService.ItemNotAccessible】