すたすた式
Blogger QooQ
サイドバーのラベルをボタンっぽいデザインしたら、そのままではタップ・クリックできる部分が少ない（範囲が狭い）感じでした。
そこでタップ・クリックできる範囲を広げてみました。
CSSだけで行うやり方と、HTMLの変更+CSSのやり方があります。（CSSだけで行うほうが作業量が少なく簡単だと思います。）
HTMLを編集します。必ずバックアップを取ってから作業してください。
「ラベルごとの投稿数を表示」がOFFの場合はaタグに下記のようなCSSを適用すればクリックできる範囲が広がります。
CSS適用例
.list-label-widget-content a { display: block; border: solid 1px #000; padding: 1em; text-align: center; width: 100%; }
ただ「ラベルごとの投稿数を表示」がON状態では、この方法が適用できなかったので以下の方法をとりました。
[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に | コリスを参考にしました。
出力されるラベルのHTMLは以下のようになっていたので、これにCSSを適用します。
<div class="widget-content list-label-widget-content"> <ul> <li> <a dir="ltr" href="https://xxx.blogspot.com/search/label/xxx">ラベル</a> <span dir="ltr">(n)</span> </li> </ul> ...... </div>
.list-label-widget-content li { position: relative; margin: 1em; padding: 1em; border: solid 1px; text-align: center; } .list-label-widget-content a::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color:rgba(0,0,0,0) }
数字の色をそろえるなら以下も追加
.list-label-widget-content span { color: #779cff; }
.list-label-widget-content li { text-align: center; margin: 1.5em 0.5em; padding: 1em .5em; border: solid 2px #eee; border-radius: 5px; font-weight: normal; font-size: 1.2em; position: relative; } .list-label-widget-content a { color: #00122B !important; } .list-label-widget-content a::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: auto; content: ""; background-color:rgba(0,0,0,0) }
HTMLを変更することでも投稿数までリンクの範囲を広げることができます。
テンプレートで<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>を検索
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<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>
(<data:label.count/>)を</a>の前にコピーします。
(<data:label.count/>)
</a>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/>(<data:label.count />)</a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if>
*<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>は2か所あります。上が[リスト]、下が[クラウド]
次に、[レイアウト]-「ラベルガジェット」-[編集]-「ラベルの設定」で「ラベルごとの投稿数を表示」をオフにする。
クラウドの場合のセレクターは.cloud-label-widget-content a
.cloud-label-widget-content a
テンプレートVaster2の場合、ラベルウィジェットはこのようなHTMLでした
<li> <a expr:dir="data:blog.languageDirection" expr:href='data:label.url + "?max-results=10"'> <data:label.name /> <b:if cond="data:showFreqNumbers"> <span dir="ltr">(<data:label.count />)</span> </b:if> </a> </li>
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿