すたすた式
Vaster2
ラベルとラベルの間がやや狭いと感じたので空間を広く取りました。
HTML を編集します。コピペするさいは必ずバックアップをとってから作業してください。
変更前
変更後
Vaster2 デフォルトテンプレートだと585行目当たり。
CSS変更前
/* ラベル -------------------------------------------- */ .list-label-widget-content ul li a { font-size: 13px; color: #666666; transition:0.4s; /* 徐々に変化させる */ padding: 6px 10px; border: 1px solid #e4e4e4; border-radius: 2px; } .list-label-widget-content ul li a:hover{ color:#fff; background-color:#008ec2; text-decoration:none; } .list-label-widget-content ul{ list-style-type: none; padding:0; line-height:initial; } .list-label-widget-content ul li{ margin: 5px 2px; display:inline-block; }
CSS変更後
/* ラベル -------------------------------------------- */ .list-label-widget-content ul li a { font-size: 13px; color: #666666; transition:0.4s; /* 徐々に変化させる */ padding: 6px 10px; border: 1px solid #e4e4e4; border-radius: 2px; background-color: #f3f3f3; /* 背景色 */ box-sizing: border-box; /* 枠線を内側に */ letter-spacing: 1px; /* 文字間を開ける */ } .list-label-widget-content ul li a:hover{ color: #fff; background-color: #008ec2; text-decoration: none; } .list-label-widget-content ul{ list-style-type: none; padding: 0; line-height: initial; } .list-label-widget-content ul li{ margin: 5px 10px; /* 値変更 */ display: inline-block; }
.list-label-widget-content ul li a に background-color , box-sizing , letter-spacing を追加。
.list-label-widget-content ul li の margin の値を変更。
ラベルがやや小さく押しづらく感じたので、縦に並べました。
上記、PCの時のラベルデザインを元にしました。もっとうまいやり方があると思いますがとりあえず。
@media screen and (max-width: 768px){ のなかに CSS を追加します。
/* レスポンシブデザイン --------------------------------------------------- */ @media screen and (max-width: 768px){
下記を追加しました。
追記：自分の環境では全体的にやや右によっていたので調節しました。
.list-label-widget-content ul li { display: block; margin-left: 0px; /* 右側によっていたので調節 */ padding-right: 10px; /* 右側によっていたので調節 */ } .list-label-widget-content ul li a { margin: 5px 0; padding: 10px 10px; width: 100%; text-align: center; line-height: 2; display: block; }
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿