このブログも含め、管理しているいくつかのブログでCocoonというテーマを使っているのですが、つい先日、記事の下にあるシェアボタンの不具合に気づきました。
大抵の不具合は、テーマやプラグインの更新で修正されることが多いので、更新を待つのも手なのですが、同じ現象が過去にもあったし、CSSの修正で済むので自分で対処しました。
同じ状況になることはないかもしれませんが、今回の記事が何かの参考なれば幸いです。
不具合の状況
僕は以下の6つのシェアボタンを表示しているのですが、修正前は以下の表示になっていました。
アイコンと背景色がおかしいですよね？
テーマとプラグインの設定を変えたり、CSSを修正したり、キャッシュを削除したり、とりあえずできる範囲のことを色々とやってみたけど変化ナシ。
尚、Cocoonの設定（SNSシェア）の「ボトムシェアボタン設定」ではロゴとキャプション（SNS名）の位置関係を設定できるようになっていますが、僕の場合は「ロゴ・キャプション上下」に設定しています。
原因は不明のままですが、スタイルシートの追記で解決したので順を追って紹介します。
CSSをカスタマイズ
Cocoonには子テーマがあるので、そちらのスタイルシートに記述しても良いのですが、僕は以下のプラグインを使っています。
アイコンを消去
ボタンの中にあるアイコンはウェブフォントなので、読み込むフォントをきちんと指定したら表示されると思うのですが、個人的には文字だけの方がすっきりして見やすい気がするので、CSSに以下を記述してアイコンを消すことにしました。
.icon-x-corp::before,
.icon-mastodon::before,
.icon-bluesky::before,
.icon-misskey::before,
.icon-hatena::before,
.icon-line::before{display:none;}僕が表示している6つに対する内容なので、違うSNSのボタンを使う時は、それらのボタンに対するクラス名に変更する必要はありますが、クラス名は開発者ツールでボタンの場所を見ればわかると思います。
背景色を指定
次にボタンの背景色にSNSごとのブランドカラー（に近い色）を指定。
.x-corp-button{background-color:#000000!important;}
.mastodon-button{background-color:#5b4adf!important;}
.bluesky-button{background-color:#0085FE!important;}
.misskey-button{background-color:#96cf4a!important;}
.hatebu-button{background-color:#00a4df!important;}
.line-button{background-color:#00bf00!important;}色を調べる時は拡張機能を使うと便利です。
文字色と空白を調整
最後に文字の大きさ、色、太さを変えて、ボタンの中の空白を調整したら作業完了。
.x-corp-button,
.mastodon-button,
.bluesky-button,
.misskey-button,
.hatebu-button,
.line-button{padding: 4px 0 7px 0!important;}
.button-caption{font-size:16px!important;color:#fff!important;font-weight:bold;}さいごに
今回の指定内容はあくまで現時点のテンプレートに対するものなので、当然ながら今後の更新で表示が変わったり、崩れたりする可能性はあります。
ただ、またおかしくなったとしても、先ほどの箇所を修正したら何とかなると思います。
ちなみに、この記事の下に出ているシェアボタンが完成形です。
