STINGER3の追尾型SNSボタンを縦並びに変更

このブログではQtaroさんの「room9 custum 003 “CANDY CRAZY”」というSTINGER3の子テーマを使っています。その理由は次の記事にしています。

STINGER3子テーマ「room9 custum 003 “CANDY CRAZY”」をベースにブログデザイン変更

STINGER3には様々な特徴があり、追尾型のSNSボックス表示もその1つです。でも、このSNSボックスには欠点があります。それは、ブログ幅が狭いと広告の表示と重なってしまうことです。そのため、この追尾型SNSボックスを表示しないように削除しているユーザーも少なくないようです。また、新しいバージョンでは幅の狭いスマホ用では、このSNSボックスが表示されないように仕様が変更されました。

そこで、せっかく表示できるようになっているこの追尾型SNSボックスを縦表示にできないものかと調べてみました。その結果、スタイルシートstyle.cssのSNSに関する記述を次のように変更することで、追尾型SNSボックスを縦並びにできました。
bibalogue

<オリジナルの記述>

[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]

なお、この記述ではボックスの枠線が表示されません。枠線が必要な場合は、オリジナルの記述を参考にして追加してください。

スポンサーリンク