このブログではQtaroさんの「room9 custum 003 “CANDY CRAZY”」というSTINGER3の子テーマを使っています。その理由は次の記事にしています。
STINGER3子テーマ「room9 custum 003 “CANDY CRAZY”」をベースにブログデザイン変更
STINGER3には様々な特徴があり、追尾型のSNSボックス表示もその１つです。でも、このSNSボックスには欠点があります。それは、ブログ幅が狭いと広告の表示と重なってしまうことです。そのため、この追尾型SNSボックスを表示しないように削除しているユーザーも少なくないようです。また、新しいバージョンでは幅の狭いスマホ用では、このSNSボックスが表示されないように仕様が変更されました。
そこで、せっかく表示できるようになっているこの追尾型SNSボックスを縦表示にできないものかと調べてみました。その結果、スタイルシートstyle.cssのSNSに関する記述を次のように変更することで、追尾型SNSボックスを縦並びにできました。
＜オリジナルの記述＞
[css]
.sns {
padding: 5px 5px 5px 5px;
margin-left: -1px;
bottom: 10px;
position: fixed;
border-radius: 0px 4px 4px 0px; /* CSS3 */
-moz-border-radius: 7px; /* Firefox */
-webkit-border-radius: 7px;
border-top-width: 1px;
border-left-width: 1px;
border-bottom-width: 1px;
border-right-width: 1px;
border-top-style: solid;
border-left-style: solid;
border-bottom-style: solid;
border-right-style: solid;
border-top-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
border-right-color: #ccc;
background-image: url(images/a30.png);
background-repeat: repeat;
}
[/css]
＜変更後の記述＞
[css]
.sns {
background-image: none;
border: medium none;
padding: 20px;
width: 60px;
margin-left: 4px;
bottom: 10px;
position: fixed;
border-radius: 0 4px 4px 0;
background: rgba(255,255,255,0.2);
}
[/css]
なお、この記述ではボックスの枠線が表示されません。枠線が必要な場合は、オリジナルの記述を参考にして追加してください。