SNSシェアボタンのデザインを変更する方法

テーマ設定
この記事は約2分で読めます。

SNSシェアボタンは以下のようなデザインに変更することが可能です。

SNSシェアボタンの設定例

設定を変更するには、まずWordPress管理画面からCocoon設定を開いてください。

WordPress管理画面から「Cocoon設定」を選択してください。

Wordpress管理画面からCocoon設定を選択

「SNSシェア」タブから以下のような設定を変更することが可能です。

  • 表示切替
  • SNSボタン色
  • カラム数(列の数)
  • ロゴとキャプションの配置位置
  • シェア数を表示するかどうか

SNSシェアボタン設定

以下のように、必要なボタンのみに絞って表示させることも可能です。

必要なシェアボタンのみに絞って表示する

Cocoon設定から「SNSシェアボタン」の表示/非表示、並び、デザインなどを変更しても、「モバイルメニューから表示させるSNSシェアボタン」には反映されません。「モバイルメニューから表示させるSNSシェアボタン」は基本的に全て表示されますのでご了承ください。

「モバイルメニューから表示させるSNSシェアボタン」の表示を変更する場合は、以下のCSSで非表示にしたいボタンの部分以外を削除して、子テーマのstyle.cssに貼り付けてご利用ください。

/* Twitter */
.share-menu-content .twitter-button,
/* Facebook */
.share-menu-content .facebook-button,
/* はてぶ */
.share-menu-content .hatebu-button,
/* Pocket */
.share-menu-content .pocket-button,
/* Line */
.share-menu-content .line-button,
/* Pinterest */
.share-menu-content .pinterest-button,
/* linkedin */
.share-menu-content .linkedin-button,
/* コピー */
.share-menu-content .copy-button,
/* コメント */
.share-menu-content .comment-button {
  display:none ;
}
タイトルとURLをコピーしました