SNSのボタンを小さくしたい

SNSのシェアとかフォローをお願いするボタンを控えめにしたい。Cocoonのシンプルなのが気に入っているので、スキンは入れたくなくて、追加CSSでなんとかしたい時の設定方法。もっと良い方法があるのかもしれないけれども、とりあえず、ボタンの表示を小さくした記録。

Contents

ボタンの幅を狭くする
キャプションを消してロゴだけ表示させる

ボタンの幅を狭くする

一番簡単そうなのは、ボタン類の幅を狭くする事のように思えた。
トップシェアボタンは非表示にしているので、今回はボトムシェアボタンについての記載です。

Cocoon設定→SNSシェア→ボトムシェアボタンで、表示するボタンの数を減らし、幅100％だったのを80％にしてみたところ、パソコンでは良いように見えたけれども、スマホでの表示はとんでもない状態になる。CSSの知識がないので、このボタンがどういう構造なのかわからない。

上がスマホの幅80％表示の状態。初期状態の全幅より控えめになった。スマホだと詰まりすぎて、しかもなぜかはてブがつぶれる。表示が崩れているのは見苦しいのでなんとかしたい。
レスポンシブの設定がよくわからないので、全体を小さくすれば良いのではないかと思う。

キャプションを消してロゴだけ表示させる

ボタンの幅がなぜ一定でないのか。一定にならないのか。わからない。
文字があふれているのなら文字を消せば良いと思うのだが、Cocoon設定→SNSシェアにキャプションを表示させないという選択肢がない。ロゴとキャプションの位置関係が上下か左右しかないので、あきらめて、Display:noneで見た目消すという方法を模索。
追加CSSで、キャプション（Twitterとかの文字の方）のクラス（.button-caption）を直接指定して非表示にしても、なぜか効かないので、その上のクラスも一緒に指定する感じでキャプションを非表示化。上のクラスも一緒に指定する都合で、下記の記載の時、CocoonのSNSシェアの設定は、ロゴキャプション上下限定。それ以外に設定するとキャプションは復活します。

.sns-share-buttons {width:70%;flex-wrap:nowrap;margin:auto}
.sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption {display:none}

CSSの追加は、外観→カスタマイズ→追加CSS。
幅は、メインカラム幅の70％で、下の画像のように、スマホで崩れない。ただ、なぜ正方形に近い感じに収まっているのか、まったくわからない。