広告

2014年11月30日日曜日

【モバイルサイト改造】 ラベルメニューをプルダウンメニューにする方法

Bloggerのラベルメニューを、モバイルサイトだけプルダウンメニューにする方法。

方法

  <b:widget id='Label1' locked='false' title='ラベルの名前' type='Label'>
※ Label1の数字(1)の部分や、ラベルの名前は環境によって変わります。

このコードを以下のコードで上書きします。
※Label1の数字(1)の部分や、ラベルの名前は上書き前と同じにしてください。

 <b:widget id='Label1' locked='false' mobile='yes' title='ラベルの名前' type='Label'>
    <b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
<b:if cond='data:blog.isMobile'>
 <div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;'>
   <option> Select a Label </option>
   <b:loop values='data:labels' var='label'>
      <option expr:value='data:label.url'><data:label.name/>
         (<data:label.count/>)
      </option>
   </b:loop>
</select>
   <b:include name='quickedit'/>
 </div>

<b:else/>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>

</b:if>
</b:includable>
  </b:widget>

貼り付け終わりましたらデンプレートを保存します。
これでモバイルサイトのラベルメニューがプルダウンメニューになりました。
<option> Select a Label </option>の部分。ここはメニューの常に見えている部分の
文字を指定出来ます。「Select a Label」の部分は自由に変えて見て下さい。

ラベルをプルダウンメニューにする方法(PC版専用)。
http://friendofmine-woh.blogspot.jp/2013/05/blogger.html

0 件のコメント:

コメントを投稿