SNSボタンを縦に配置

すっかり間が空いてしまいましたが(汗)ブログの使い勝手をちょっぴり変えてみました。

当ブログで使っているSTINGERというテーマでは、Twitterやfacebookのボタンがページの下に横たわるように配置されているんですけど、これをサイトの横へ縦に表示されるようにしてみました♪

昨年、STINGERを導入した際の懸案事項です⇒※STINGER3でSNSボタンが広告に被る現象発生

結局、削除することで昨年は落ち着いたんだけど、ないとやっぱりさみしい。ということで復活です。縦にする方法は、「ウェビメモ」さんで紹介されてた方法を真似っこしてみました。

STINGER3(ver20131217)のstyle.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;
}

こんなふうにしてみた。

.sns {
width:60px;
padding: 15px;
margin-left:20px;
text-align:center;
position:fixed;
bottom:30px;

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;
}

margin-left:20px;のとこをマイナスにすると、画面から飛び出して見えなくなっちゃうので(汗)プラスの数字にしてるんだけど、いいんだろうか。いいよね、見えてるし。←適当

その他の数字や文字も適当なので、どっか抜けてたり、反対に余計な文字を書いてるかもしれませんが、Firefoxとか、Chromeは問題なく見えてるのでよしとします。

InternetExplorerだけ、なぜかfacebookの人数の吹き出しのとこが欠けてるんだけど、気にしないことにしました。解決。

IEだと欠けるとこがあるけど放置

この記事、いいなと思ったらボタンをクリック
  • Facebook
  • Hatena
  • twitter
  • Google+
ブログの購読はこちらも便利
follow us in feedly