Bloggerのカスタマイズを検索していたら、英語サイトでプルダウンにできるというのを発見してやってみました。
と思ったら、『Blogger ラベル プルダウン』で調べたら、日本語でわかりやすく説明されたページがありました。
Bloggerネタ、ライブレポや音楽、映画・アニメ・マンガ、日常的な事を書いたりすると思います。
friendofmine-woh.blogspot.comプルダウン化
Bloggerテンプレートの「HTML編集」で検索機能を使用するなどして、次の行をみつけます。※「ラベル」のところの文字は変更可能なのでその前までの文字列で検索した方が良いかもしれません。
<b:widget id='Label1' locked='false' title='ラベル' type='Label'>
ここから次の</b:widget>まで（50行程あると思います）を次のソースコードに置き換えます。
<b:widget id='Label1' locked='false' title='ラベル' 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>ラベルを選択</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>
プルダウンのデフォルトで表示される文字を変えたい場合は、<option>ラベルを選択</option>の中の文字（例の場合は「ラベルを選択」の部分）を変更してください。
プレビューでプルダウンメニューが表示されることが確認できたら保存してください。
プルダウンにしてもBloggerのダッシュボード「レイアウト」でガジェットの移動、編集も可能です。
削除して、またドロップダウンにしたい場合は、再度カスタマイズする必要があります。
プルダウンのデザイン変更
プルダウンにできたのでアーカイブと同じデザインにしようと思ったら知識不足で大変でした。
無理矢理感もありますがなんとか同じ見た目になりました。
プルダウン化した場合は「#Label1 select」がプルダウンでした。
#Labelのあとの数字は追加したラベルガジェットの数に応じて変わります。
#Label1 {
position: relative;
margin-bottom: 0;
margin-top: 0;
}
#Label1 select {
width: 100%;
height: 52px;
cursor: pointer;
text-indent: 0.01px;
text-overflow: ellipsis; /* はみ出し処理 */
border: none; /* 線なし */
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none; /* 矢印消す */
appearance: none; /* 矢印消す */
padding: 8px 0px 8px 1em; /* 余白[上][右][下][左] */
font-family : inherit;
font-size: 14px; /* 文字サイズ */
color: #757575; /* 文字の色 */
margin-left: 8px;
margin-bottom: 0;
margin-top: 0;
}
/* 矢印消すIE用 */
#Label1 select::-ms-expand {
display: none;
}
#Label1 option {
pointer-events: none;
}
/* 疑似要素 Labelの文字と背景色 */
#Label1::after{
position: absolute;
border: 1px;
border: 1px solid #F3F3F3;
border-radius: 6px;
width:95%;
height:35px;
white-space: pre-wrap; /* content内のスペースを有効に */
content: ' Label';
top: 55px; /* 位置調整 */
left: 8.5px; /* 位置調整 */
font-size: 14px; /* 文字サイズ */
color: #757575; /* 文字の色 */
background: #F6F5F5; /* 背景色 */
line-height: 35px; /* 縦位置中央に */
pointer-events: none; /* 擬似要素が上にあってもクリックを有効に */
}
/* 疑似要素 右の▼マーク */
#Label1::before {
position: absolute;
top: 70px; /* 位置調整 */
right: 22px; /* 位置調整 */
width: 0;
height: 0;
padding: 0;
content: '';
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #474A4D; /* 色 */
z-index: 1; /* 重ね合わせの順を上へ */
pointer-events: none; /* 擬似要素が上にあってもクリックを有効に */
}
無駄がいっぱいありそうですが、擬似要素のbeforeで▼のマーク、afterで後ろのグレイの背景色を重ねています。
本来のプルダウンの「Label」の文字の上にグレイの背景を重ねてしまっているので再度「Label」の文字を表示させているという、、、
擬似要素を上に重ねていることでプルダウンを選択できないという状態になり諦めようと思いましたが「pointer-events: none;」とすることで選択できるようになりました。
上に重ねた「Label」の文字をスペースで調整していますが、反映されず「white-space: pre-wrap;」というのがあることを知るまで時間がかかりました。
残念なところとしては後ろのグレイの背景色の横幅を%で指定しているので、画面のサイズによっては▼のマークがはみ出ると思います。
 |
| はみ出した▼ |
iPadのサイズくらいの横幅だとはみ出そうです。
0 件のコメント:
コメントを投稿