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

ジャンル分けを細かく設定すればする程、表示されるラベルの数は増えていきます。縦に並べる事によって、ブログデザインそのものが間延びしてしまうことも。
「そういった事を避けたい」という人には、ラベルをプルダウンメニューにして1つの項目としてまとめてしまいましょう。

ラベルをプルダウンメニューにしてみる

まずはラベルを設定しましょう。
その後、[テンプレート]→[HTMLの編集]をクリック。


ガジェット/ウィジェットは大体一番下の方にあります。HTMLエディタ内で[Ctrl]+[F]で検索バーを出し、「id='label」と検索すれば、下記のようなコードが出てくると思います。

<b:widget id='Label1' locked='false' title='Label' type='Label'>…</b:widget>

ここの部分に、

<b:widget id='Label1' locked='false' title='Label' type='Label'>
<b:includable id='main'>
 <b:if cond='data:title'>
   <h2><data:title/></h2>
 </b:if>
 <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:includable>
</b:widget>

を上書きします。こうすると縦にリスト上に並んでいたラベルが、プルダウンメニュー形式に表示されているはずです。

ラベルを複数設置した際に全てプルダウンメニューにする際、気をつけるのが、<b:widget id='～'>このidの値の部分。上記の上書き用コードのwidget idは'Label1'になってますが、複数ラベルを作ると元のwidget idは'Label2'、'Label3'とidの値が変わっているので、上記コードを上書きする際にidの値を手直ししておくこと。そうしないと全て'Label1'のプルダウンメニューが並んでしまいます。

<option> Select a Label </option>の部分。ここはメニューの常に見えている部分の文字を指定出来ます。「Select a Label」の部分は自由に変えて見て下さい。

結構スッキリしましたね。参考画像のラベル数が少なかったので、効果はまあまあな感じですが、ラベル数が多ければ多い人程効果があります。
まあでもスッキリしてるから良いというわけでもなく、ズラッと並んでいるからこそ見やすいという事もあると思います。複数選択する際はプルダウンで一個一個開いてくのはちょっと面倒ですしね。
お好きな方を。

参考サイト様

バカと俺につける薬：ラベルをプルダウンにした

CSSを使ってガジェット/ウィジェット間の距離を調整してみる

上記のプルダウンメニューの間隔・・・ちょっと上下に開き過ぎじゃない？と思いませんか？テンプレートデザイナーのカスタムCSSを利用して、距離を調整してみましょう。

まずはその後、[テンプレート]→[HTMLの編集]をクリック。

そしてガジェットIDをチェックします。

ガジェットは一番下の方の<b:section-contents id='sidebar～>みたいなコードの下に

<b:widget id='この部分がガジェットID' locked='false'～

上記のような形のコードがたくさん並んでいると思います。これらがガジェットのコードです。この位置を調整したいガジェットIDをメモし、一旦閉じます。

※今回の場合は3つのLabelの位置を調整したいので、Label1/Label2/Label3をメモします。


そして再び[テンプレート]→[カスタマイズ]をクリックし、テンプレートデザイナーを呼び出します。
そして[上級者向け]→[CSSを追加]へ。
ここに　#調整したいガジェットID{調整したい位置と数値}　を入力します。

ex:)
#Label1{margin-bottom:-20px;}
#Label2{margin-bottom:-20px;}
#Label3{margin-bottom:0px;}

margin-bottomとは、余白（margin）の下部分（bottom）を調整すると言う事。その数値をマイナスで指定したという事は、「下部分の余白を20px分、上に詰める」と指示になります。

下だけでなく、

margin-top　（余白上部分）
margin-bottom　（余白下部分）
margin-left　（余白左部分）
margin-right　（余白右部分）

と上下左右に指定出来ます。marginは余白なので、数値を正の値にすれば、逆の方向に移動すると考えた方が良いです。つまり"margin-left:10px;"とした場合、左側の余白部分を10px分増やすので、文字が右側に10pxずれると言うことです。

#Label1{margin-bottom: 10px;
           margin-left: 10px;}

という風に、1つのIDに2つ以上の指示をする場合、1つの要素が終わったら必ず";（セミコロン）

"を最後につけて下さい。これが無いと区切りがなく、効果が出ません。

入力が完了し、下のプレビュー画面で調整が上手くいったことが確認出来たら、[ブログに適用]をクリック。忘れずに。

結果、こんだけ縮めてみました。下のラベル2つのタイトルを無題にして、消すことによって、より密接な距離に。まあ正直近過ぎ間は否めませんが（笑）まああくまで例としてなので。

これも意外と使えるので是非やってみて下さい。

参考サイト

Sunabox.net: [blogger]もっと詰めて！サイドバーのガジェット上下の余白を詰めて配置する方法。(04/28追記)