【Cocoon】SNS「トップシェアボタン」をモバイル端末で非表示にするカスタマイズ

どんぱっぱ

Cocoonのトップシェアボタンはスキンなしデフォルトだと大きすぎて邪魔になりがちなので、横幅1023px以下のスマホ・タブレット表示では非表示にしました。

基本情報

「トップシェアボタン（メインカラムトップシェアボタン）」とは、メインカラム上部に表示される下図のようなボタンのことです。

画面の横幅が480px以下の状態でトップシェアボタンを表示・非表示した場合は下図のようになります。

横幅の狭い端末の場合、トップシェアボタンがファーストビュー（スクロールせずに表示される部分）の1/4以上を埋めてしまったりします（ボタン表示数とサイズによりますが）。

また、Cocoonにはモバイルのヘッダー・フッターメニューに下図のようなシェアボタン機能も存在しています。

モバイルメニューのSNSシェアボタンを使う場合はトップシェアボタンの必要性があまりなく、ファーストビューの邪魔にもなりそうだったので、非表示にすることにしました。

カスタマイズ方法

『Cocoon』の子テーマ『Cocoon Child』のスタイルシート「style.css」に後述のコードを書き込んでトップシェアボタンを非表示にします。

テーマのダウンロード

Wordpressテーマ「Cocoon」の親テーマと子テーマのダウンロードページ...

wp-cocoon.com

GitHub - xserver-inc/cocoon-child

Contribute to xserver-inc/cocoon-child d...

github.com

スタイルシートの編集方法

どんぱっぱ

編集方法は色々ありますが、どれでもいいです。

トップシェアボタンを非表示にする

横幅1023px以下でトップシェアボタンを非表示とする場合。

@media screen and (max-width: 1023px){
  
  /* SNS メインカラムトップシェアボタン 非表示 */
  .ss-top {
    display: none;
  }

}

スタイルシートへの記述例

@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/

  /* SNS メインカラムトップシェアボタン 非表示 */
  .ss-top {
    display: none;
  }

}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

サイトのデザインや都合に合わせて、1023px以下・834px以下・480px以下の部分に書き込めばいいです。

おまけ：ボトムシェアボタンを非表示にする

横幅1023px以下でボトムシェアボタンを非表示とする場合。

@media screen and (max-width: 1023px){
  
  /* SNS メインカラムトップシェアボタン 非表示 */
  .ss-bottom {
    display: none;
  }

}

どんぱっぱ

設定は以上です！