・【Blogger】ラベルのガジェットをプルダウン表示にする方法
今回はプルダウンメニューの様々なスタイルに挑戦していきたいと思います。
まず、プルダウンのコードにclass属性を与えてスタイルシートを書きましょう。
一般的なプルダウンメニューは以下のようになっているとおもいます。
<form> <select onChange='location.href=value;'> <option selected='selected' value=''></option> <option value=''></option> <option value=''></option> <option value=''></option> </select> </form>
<select>～</select>をclass属性を与えたdivで囲いましょう。
<form> <div class="sample011"> <select onChange='location.href=value;'> <option selected='selected' value=''></option> <option value=''></option> <option value=''></option> <option value=''></option> </select> </div> </form>ちなみにラベルをプルダウン化した場合も同様です。 （例）
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class="sample011">
<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>
</div>
<b:include name='quickedit'/>
</b:includable>
今回は以下のようなスタイルシートを書きました。
.sample011 {
overflow: hidden;
width:100%;
box-sizing:border-box;
border-radius: 3px;
padding:5px 15px;
border: 2px solid #39393A;
vertical-align: middle;
background: #114B5F;
}
.sample011 select {
color:#fff;
background: #114B5F;
border: 0;
margin: 0;
padding:0; width: 130%;
}
すると、以下のようなプルダウンメニューになります。