Cocoonのシェアボタンを修正

2025.01.14

このブログも含め、管理しているいくつかのブログでCocoonというテーマのスキンテンプレートを使っていて、記事下にシェアボタンを設置しているのですが表示がおかしくなりました。

大抵の不具合は、テーマやプラグインの更新で修正されることが多いので、更新を待つのも手なのですが、同じ現象が過去にもあったし、アイコンが不要に思えたので、シンプルなボタンに修正しました。

僕と同じ状況になることはないかもしれませんが、参考までに修正内容を紹介します。

ただ、Cocoonには複数のテンプレートがあり、ここで紹介するやり方で表示が変わらないテンプレートもあるかもしれません。あらかじめご了承ください。

CSSをカスタマイズ

このブログでは「X」、「Mastodon」、「Bluesky」、「MissKey」、「はてブ」、「LINE」のシェアボタンを表示しているのですが、修正前は以下の表示になっていました。

表示がおかしいシェアボタン

アイコンと背景色がおかしいですよね？

シンプルなボタン

先ほどの表示を修正するならアイコンを全て表示して背景色を各SNSのブランドカラーに揃える必要があります。

ただ、アイコンに関してはなくても良いというか、キャプション（SNS名）だけのボタンにした方がすっきりして見やすいと思うので、スタイルシートでアイコンを消すことにします。

アイコンを消去

Cocoonは子テーマも配布されているので、すでに使っている場合は、そちらのスタイルシートに追記することで表示を変えられますが、子テーマを入れていなくてもプラグインを使えば同じことができます。

テーマのダウンロード
Wordpressテーマ「Cocoon」の親テーマと子テーマ...
wp-cocoon.com
Simple Custom CSS Plugin
WordPress サイトに、簡単にカスタム CSS を追加...
ja.wordpress.org

アイコンを消すには子テーマのスタイルシート、もしくは先ほどのプラグインの編集画面に以下を記述して保存します。

.icon-x-corp::before,
.icon-mastodon::before,
.icon-bluesky::before,
.icon-misskey::before,
.icon-hatena::before,
.icon-line::before{display:none;}

ここでは当ブログで表示している6つのボタンを消す内容にしてありますが、他のSNSのボタンを消す時は、以下のクラス名（右側）で同様の指定をすると消せます。

  • Xicon-x-corp
  • Mastodonicon-mastodon
  • Blueskyicon-bluesky
  • Misskeyicon-misskey
  • Facebookicon-facebook
  • はてブicon-hatena
  • Lineicon-line
  • Pinteresticon-pinterest
  • Linkedinicon-linkedin
  • コピーicon-copy

背景色を指定

次にボタンの背景色ですが、スタイルシートでSNSごとのブランドカラー（に近い色）を指定して保存します。

.x-corp-button{background-color:#000000!important;} /* x */
.mastodon-button{background-color:#5b4adf!important;} /* Mastodon */
.bluesky-button{background-color:#0085fe!important;} /* Bluesky */
.misskey-button{background-color:#96cf4a!important;} /* Misskey */
.hatebu-button{background-color:#00a4df!important;} /* はてブ */
.line-button{background-color:#00bf00!important;} /* LINE */

上記は先ほどの6つのボタンを前提とした内容なので、他のボタンの背景色を指定する時は、そのボタンのクラス名と背景色を指定する必要があります。

.facebook-button{background-color:#3b5998} /* Facebook */
.pinterest-button{background-color:#bd081c} /* Pinterest */
.linkedin-button{background-color:#0077b5} /* LinkedIn */
.copy-button{background-color:#333333} /* タイトルとURLをコピー */

色を調べる時は拡張機能を使うと便利です。

Chrome ウェブストア
ブラウザに新機能を追加して、ブラウジング環境をカスタマイズで...
chromewebstore.google.com

文字色と空白を調整

以前から文字サイズや太さも気になっていたので、ついでに以下もスタイルシートに記述して保存します。

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

さいごに

現在はアイコン非表示の問題が改善されているので、アイコンを消さなくても良いとは思いますが、シンプルなボタンの方が見やすいようでしたら試してみてください。

紹介した指定内容での表示は記事下に出ているシェアボタンで確認できます。

関連記事