前回は、残念ながらメニューを追加することはできませんでした。今回こそ、メニューを設置しようと思います。
（前回：『メニュー作りの失敗談 ～Blogger テンプレートを作るよ！ (6)～』）
ラベルリストをメニュー用に改造するよ！
ちょちょいとできそうな方法をいくつか思いつきました。
1つは、ラベルリストの挙動をページリストに合わせる方法で、もう1つはラベルリストの挙動に css を合わせる方法です。とりあえず両方紹介しようと思います。
改造法１ ラベルリストの挙動をページリストに合わせる
[レイアウト] の設定画面でラベルリストを追加し、テンプレートでその中身を書き換えます。
選択済みでも <a> 要素のまま、 <span> 要素に変えないようにして、選択済みの <li> 要素に selected クラス名を追加するようにします。また、投稿数を表示する設定の時でも表示がおかしくならないように、投稿数を <a> 要素内に含めるように変更しています。
変更前後のコードを書き残しておきます。（変更箇所は太字）
<b:widget id='Label1' locked='false' title='ラベル' type='Label' visible='true'>
<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'>
<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'>
<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><b:widget id='Label1' locked='false' title='ラベル' type='Label' visible='true'>
<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 expr:class='data:blog.url == data:label.url ? "selected" : ""'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>
(
<data:label.count/>
)
</span>
</b:if>
</a>
</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'>
<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>また、お好みで <ul> と <b:loop> の間に 『ホーム』 ボタンを追加します。
以下のコードを挿入します。
<li expr:class='data:blog.url == data:blog.homepageUrl ? "selected" : ""'>
<a expr:dir='data:blog.languageDirection' expr:href='data:blog.homepageUrl'>
ホーム
</a>
</li>
それっぽいメニューになりました！
 |
| 改修結果。とりあえず全ラベルと、その投稿数を表示してみた |
注意点は、ガジェットの中身を直接変更しているため、ガジェットを削除して追加しなおすと変更前に戻ってしまうこと。
その都度ユーザーがガジェットを変更しなければならないというのは……うーん。
テンプレート制作者としては、ガジェットも <includable> みたいに中身をこちらで定義できるようにしてくれると嬉しかったなぁ。
改造法２ ラベルリストの挙動に css を合わせる
投稿数を表示しない、ホームボタンも要らない、ただ外見が変にならなければいいというのなら、 css を変更するだけで十分かもしれません。
変更前後のコードを載せておきますが、ベースにしているテンプレートによっては変更前のコードが違うかもしれませんので、使う時は注意が必要です。
/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid $(tabs.border.color);
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid $(tabs.border.color);
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a, .tabs-inner .widget li span {
display: inline-block;
margin: 0;
padding: .6em 1.5em;
font: $(tabs.font);
color: $(tabs.text.color);
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a, .tabs-inner .widget li:last-child span {
border-$endSide: 1px solid $(tabs.border.color);
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover, .tabs-inner .widget li span {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}この変更は、単純に <a> 要素に対するセレクタの真似をして <span> 要素にも適用するように修正しているだけです。最後の変更点だけは少し違いますが、これはラベルリストの <li> 要素には選択中でも selected が付かず、選択中のみ <span> になるのでこうしました。
今回は、一つめのラベルリストを書き換える方で対応しました！
0 件のコメント :
コメントを投稿