Stinger3カスタマイズ-SNSボタンを横左下表示から縦表示に変更する

環境
WordPress: 4.1
Stinger3: 20140327

Stinger3をインストールした際の初期設定では、SNSボタンはサイトの左下に横長にSNSボタンが表示されています。

このままだとサイトが見づらいので縦長の表示に変更します。

直接親テーマのCSSを修正するか、子テーマを作ってCSSを修正します。

1. 縦長表示に変更する。

デフォルトのstyle.cssから.snsの記述を探します。
デフォルトだと644行目頃から始まります。

上記の.sns内に”width: 70px”を追記します。

この時点でこんな感じです。

2. 右側に移動する。

SNSボタンを縦長にしても、左側に記事があるサイトではブラウザが狭いとやはり記事にボタンがかぶってしまいます。
そこで、縦長にしたSNSボタンを右側に移動させます。

先ほどのソースに以下を追記します。

このようになります。

このままだと、”Page Top”のナビゲーションとかぶっているので、下部からの位置「bottom: 20px」を調整します。
それと、個人的にはブラウザの右側にくっついていてほしいので、「right: 20px;」の値も修正します。

3. ボックスのコーナーに丸みを帯びさせる。

Firefoxではボックスの右上と右下のコーナーが丸くなっています。
このまま右に移動させるとバランスが崩れるので左側に丸みを持たせるように修正します。

border-radius
-moz-border-radius
-webkit-border-radius
の、3行を修正します。

CSS3に対しては、border-radius、
Firefoxに対しては、-moz-border-radius
Chrome等に対しては-weblit-border-radius
がデザインに反映されます。
値は、『左上、右上、右下、左下』の順序で決められているので、

これで、ボックスの左側に丸みを帯びさせることができました。

4. ボタンを中央揃えに修正する。

ボタンを中央揃えにします。

.sns .snsb li {
と
.snsb li {
中のfloat:left;を、float:none;に修正。

.sns .snsb li {に、
“text-align: center;”
を追記します。

これでsnsボックスの各ボタンが中央揃いになりました。

…ただし、
このままだとfloat:none;が
『.post #snsbox03 .sns03 .snsb.clearfix {
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}』
にまで影響して、記事の下のsnsボタンまで縦配置になってしまいます。

そこで、

#snsbox03 .sns03 li {
float: left;
margin-right: 10px;
この三行を追加します。

完了。

Page Topボタンの位置を修正したい・・・