サイドバーにいれたウィジェットの幅の調整について
-
サイドバーに直接コーディングして、SNSのリンクをいれたのですが、
300pxとっている幅いっぱいまで表示がされません。マージンなどは、限りなくつかわないように下記のように書き換えたのですが、
どこの部分が干渉していることが考えられるでしょうか。よろしくお願いします。
—siderbar.php—-
<aside id=”sidebar”><!–メイン右 サイドバー–>
<?php dynamic_sidebar(); ?>
<!– SNSボタン –>
<h4 class=”menu_underh2″>SNS</h4>
<div class=”follow”>-
<li class=”twitter”>Twitter
<li class=”facebook”>Facebook
<li class=”rss”>/?feed=rss2″ target=”_blank”>RSS
<li class=”feedly”>Feedly</div>
<!– SNSボタンここまで –>
</aside><!–メイン右 サイドバーここまで–>—siderbar.php—-
—style.css—-
/* すべてのページに適応 sidebar SNS用*/
.follow {
margin-bottom:24px;
}
.follow ul{
position:relative;
overflow:hidden;
}.follow ul li{
float:left;
width:50%;
list-style-type: none;
}.follow ul li a{
padding-top:10px;
padding-bottom:5px;
display:block;
-webkit-transition: .2s ease-in-out;
transition: .2s ease-in-out;
color:#fff;
font-family:’Open Sans’,sans-serif;
text-align:center;
text-decoration:none;
}.follow ul li a::before{
position:relative;
display:block;
-webkit-transition:.15s ease-in-out;
transition:.15s ease-in-out;
color:#fff;
font-size:26px;
font-family: “FontAwesome”;
}.follow ul li a:hover{
background-color:#fff;
}.follow ul .twitter a{
background-color:#00aced;
border:2px solid #00aced;
}
.follow ul .twitter a::before{
content: “\f099”;
}.follow .twitter a:hover,.follow .twitter a:hover::before{
color:#00aced;
}.follow .facebook a{
background-color:#3c5a98;
border:2px solid #3c5a98;
}.follow .facebook a::before{
content:”\f09a”;
}.follow .facebook a:hover,.follow .facebook a:hover::before{
color:#3c5a98;
}.follow ul .rss a{
background-color:#ffb53c;
border:2px solid #ffb53c;
}
.follow ul .rss a::before{
content:”\f09e”;
}
.follow ul .rss a:hover,.follow ul .rss a:hover::before{
color:#ffb53c;
}
.follow ul .feedly a{
background-color:#87c040;
border:2px solid #87c040;
}
.follow ul .feedly a::before{
content:”\f09e”;
}
.follow ul .feedly a:hover,.follow ul
.feedly a:hover::before{
color:#87c040;
}
———-
- トピック「サイドバーにいれたウィジェットの幅の調整について」には新たに返信することはできません。