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='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<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 + "?max-results=5"'><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='"label-size label-size-" + 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 + "?max-results=5"'><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 { >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 { >display:none !important; }</style>
</b:if>
で、モバイルのみでこのラベル一覧を表示させています。
プルダウンにしたいのは、モバイル表示だけだったので
このように指定しました。
それ以外（PC）では、#Label1は非表示にしてね、という指示です。
では、PCではどうするかと言うと、
管理画面→
レイアウト→
Label2を追加。
Label2は、テンプレートで何も触らなくてOKです。
こちらをPC用のラベル一覧にすれば良いんですね。
つまりPC用はそのままで。
モバイル要はコードを修正して、
プルダウン表示にしました。
これで、モバイル表示でも
コンテンツの長さが長くなりすぎず、
見やすくなりました。
当ブログ内の情報は、
全ての方に応用できるとは限りません。
必ずテンプレートはバックアップを取っておいて下さいね。
また、ご利用は自己責任でお願い致します。
ラビットしま子は美容ライターであり、
サイト制作のプロではありません。
個別のカスタマイズについてのご相談は、
乗ってあげたいけど、乗れません。（わからんから）
スポンサードリンク