2015年4月12日

ラベル一覧をプルダウンでスッキリ表示させるには。特にモバイル表示。

スポンサードリンク

 プルダウンだと、コンテンツの長さが短くスッキリします。
PCは通常の方が探しやすいかもしれません。

私はモバイル表示、スマホで見る時の為に、
ラベル一覧をプルダウンにしてみました。


ラベル一覧はプルダウン。コンテンツの長さを取り過ぎない


 まずは管理画面のレイアウトへいきましょう。
そして、ウィジェットの中から
ラベル一覧を見つけて、追加します。


ラベル一覧の内容をどうするかを指定します。

  • 全てのラベル
  • あいうえお順/頻度順
  • リスト表示
  • ラベルごとの投稿数を表示

で作ります。
各自好きなように変えて大丈夫です。

しかし、リスト表示にしておいて下さい。



 このままだと通常の表示のままなので、
テンプレート編集へ、コードを入力し、
プルダウンへ変更していきます。


今回参考にしたのはこちらのサイトです。

Bloggerへの道 「ラベルをプルダウンメニューにする/ガジェット間の距離を調整する」


この通りにすれば大丈夫です。



 まず、テンプレート編集へ。
該当ウィジェットのLabelを展開します。

ラベルのHTMLはこのようになっています。

  <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>
  <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 + &quot;?max-results=5&quot;'><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 + &quot;?max-results=5&quot;'><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:includable>
  </b:widget>


これを変更します。


モバイル表示させ、分岐させる



 ちなみに赤字のモバイル表示コードは、
必要な方のみで大丈夫。

モバイルでラベル一覧を非表示にするなら、
mobile='yes'
は削除してください。

デフォルトでは、
mobile='yes'
は載っていません。



 では、ここから
プルダウン式にするために変更します。


  <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> ラベルをお選びください </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/>
          <style>#Label1 { display:none !important; }</style>
          <style>#Label1 { &gt;display:none !important; }</style>
</b:if>
</b:includable>
  </b:widget>


このように変更します。


 どうなっているのかと言いますと、
まず、
mobile='yes' なので

モバイルでラベル一覧は表示されます。


 そして、通常のリスト表示から、
プルダウン表示に変更するコードへ変えました。


 さらに、

<b:if cond='data:blog.isMobile'>

プルダウン表示のコンテンツ

          <b:else/>
          <style>#Label1 { display:none !important; }</style>
          <style>#Label1 { &gt;display:none !important; }</style>
</b:if>


で、モバイルのみでこのラベル一覧を表示させています。
プルダウンにしたいのは、モバイル表示だけだったので
このように指定しました。

それ以外(PC)では、#Label1は非表示にしてね、という指示です。



 では、PCではどうするかと言うと、
管理画面→

レイアウト→

Label2を追加。

Label2は、テンプレートで何も触らなくてOKです。
こちらをPC用のラベル一覧にすれば良いんですね。

つまりPC用はそのままで。
モバイル要はコードを修正して、
プルダウン表示にしました。


 これで、モバイル表示でも
コンテンツの長さが長くなりすぎず、
見やすくなりました。



 当ブログ内の情報は、
全ての方に応用できるとは限りません。

必ずテンプレートはバックアップを取っておいて下さいね。


また、ご利用は自己責任でお願い致します。

ラビットしま子は美容ライターであり、
サイト制作のプロではありません。

個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。(わからんから)


スポンサードリンク