モバイルシェアボタン表示を変更

はじめに

モバイル表示の場合、Cocoon設定→SNSシェアの設定に関係なく、全てのSNSシェアボタンが表示される問題があります。
この問題を解決するため、本スキンでは、設定したSNSシェアボタンのみが表示されるようにカスタマイズしています。

モバイルのSNSシェアボタンに選択してないSNSボタンが表示される

度々失礼致します。 モバイルのフッターにあるシェアボタンをタップすると、選択してないSNSのボタンも表示されてしまいます。 また、SNSのそれぞれのボタンが縦長の丸になってしまっています。 投稿ページの下に表示させているSNSシェアボタンは...

wp-cocoon.com

変更内容

変更前

Cocoon設定→SNSシェアの設定により、トップやボトムに表示する、シェアボタンの選択が可能です（図1参照）。
しかし、モバイル表示において「シェアボタン」をクリックすると、設定に関係なく全てのボタンが表示される問題が発生していました（図2参照）。

変更後

Cocoon設定→SNSシェア→ボトムシェアボタン設定の「表示切替」で設定したシェアボタンが表示されます。
コメント以外の全てのボタンをオフの場合、モバイル表示で「シェア」ボタンは表示されなくなります。

参考：SNSシェアボタンを非表示にするCSS

非表示にしたいSNSシェアボタンに関しては、以下のCSSコードを追加することで対応できます。
本スキン以外の方はご利用ください。

.share-menu-content .twitter-button,    /* Twitter */
.share-menu-content .mastodon-button,   /* Mastodon */
.share-menu-content .bluesky-button,    /* Bluesky */
.share-menu-content .misskey-button,    /* Misskey */
.share-menu-content .facebook-button,   /* Facebook */
.share-menu-content .threads-button,    /* Threads */
.share-menu-content .reddit-button,     /* Reddit*/
.share-menu-content .hatebu-button,     /* はてぶ */
.share-menu-content .line-button,       /* Line */
.share-menu-content .pinterest-button,  /* Pinterest */
.share-menu-content .linkedin-button,   /* Linkedin */
.share-menu-content .copy-button {      /* コピー */
  display: none;
}

さいごに

本スキンのカスタマイズにより、モバイル表示において、SNSシェアボタンが設定通りに表示されるよう、改善されています。
これにより、ユーザーが期待するSNSシェアボタンが正しく表示され、使い勝手が向上します。