Cocoon SNSボタン周りを小さくコンパクトに表示する

WordPressの無料テーマ「Cocoon」のSNS関連をコピペ一発で簡単にコンパクト表示さる方法を解説します。

概要

以前、Cocoonのボタンを小さく表示する方法を解説しました。

コピペ一発！CocoonのSNSボタンをカスタマイズ

Cocoonの標準スキンで記事に自動で付けられるSNSボタン 大きさも結構あり、威圧感がありすぎるような感じです。 今回は、そんなSNSボタンの表示を簡単にカスタマイズしてみたいと思います。 なお、更にSNSボタンをコ...

info-biz.club

2019.06.12

今回は更にコンパクト化しています。

こんな感じ

適応させたのは、
SNSシェアボタンの本文下シェアボタンと、
SNSフォーローボタンとその周辺表示です。

順を追って説明していきます。
WordPress管理メニューの
「Cocoon設定」の「Cocoon設定」をクリックします。

１．Cocoon設定のSNSシェアの設定

Cocoon設定ページの「SNSシェア」タブをクリックします。

本文下シェアボタンの欄
・本文下シェアボタンの表示を「チェック」
・ボタンカラーを「ブランドカラー（白抜き）」
・カラム数を「６列」
・ロゴ・キャプション配置を「ロゴ・キャプション左右」
・シェア数の表示を「チェック無し」

設定が済んだら
「変更をまとめて保存」をクリックします。

２．Cocoon設定のSNSフォローの設定

Cocoon設定ページの「SNSフォロー」タブをクリックします。

フォローボタンの欄
・本文下のフォローボタンの表示を「チェック」
・ボタンカラーを「ブランドカラー（白抜き）」
・フォロー数を表示は、チェック無し

設定が済んだら
「変更をまとめて保存」をクリックします。

３．CSSソースコードをコピペ

では、それぞれの表示サンプルとコピペするコードを紹介します。

１．SNSコンパクト表示 左寄せ配置

SNSコンパクト表示 左寄せ配置の表示サンプル

ボタンの表示を左寄せしたものです。

SNSコンパクト表示 左寄せ配置のソースコード

CSSのソースコードのみで適応させてます。

/*-----------------------------------------*/
/* コンパクトSNS for Cocoon                */
/*   左寄せ配置                            */
/*-----------------------------------------*/
/* シェアメッセージの表示設定 */
.sns-share-message{
  display:none;      /* シェアメッセージの非表示 */
}

/* SNSボタングループの設定 */
.bc-brand-color-white.sns-share.ss-col-6{
  display:flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  width:240px;              /* ボタン幅 x 6 */
  margin:0 auto 0 0;        /* 左寄せ配置にする */
}
/* ボタン単位の設定 */
.bc-brand-color-white.sns-share.ss-col-6 a{
  font-size: 18px;          /* アイコンサイズ */
  border: none;             /* SNSボタン枠を非表示 */
  width:40px;               /* １つのボタンの幅 */
}
 /* SNSボタン名称の表示設定 */
.bc-brand-color-white.sns-share .button-caption {
  display:none;        /* SNSボタン名称を非表示 */
}

/* フォローメッセージの表示設定 */
.sns-follow-message{
  display:none;     /* フォローメッセージの非表示 */
}

/* SNSフォローボタングループの設定 */
.bc-brand-color-white.sns-follow {
  display:flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  width:80px;               /* ボタン幅 x 2 */ 
  margin:0 auto 0 0;        /* 左寄せ配置にする */
}
/* SNSフォローボタン単位の設定 */
.bc-brand-color-white.sns-follow a {
  font-size: 18px;          /* アイコンサイズ */
  border: none;             /* ボタン枠を非表示 */
  width:40px;               /* １つのボタン幅 */
}

/* 投稿者名の表示設定 */
.footer-meta .author-info{
  display:none;            /* 投稿者名を非表示 */
}

２．SNSコンパクト表示 中央配置

SNSコンパクト表示 中央配置の表示サンプル

ボタンの表示を中央にしたものです。

SNSコンパクト表示 中央配置のソースコード

CSSのソースコードのみで適応させてます。

/*-----------------------------------------*/
/* コンパクトSNS for Cocoon                */
/*   中央配置                              */
/*-----------------------------------------*/
/* シェアメッセージの表示設定 */
.sns-share-message{
  display:none;      /* シェアメッセージの非表示 */
}

/* SNSボタングループの設定 */
.bc-brand-color-white.sns-share.ss-col-6{
  display:flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  width:240px;              /* ボタン幅 x 6 */
  margin:0 auto 0 auto;     /* 中央配置にする */
}
/* ボタン単位の設定 */
.bc-brand-color-white.sns-share.ss-col-6 a{
  font-size: 18px;          /* アイコンサイズ */
  border: none;             /* SNSボタン枠を非表示 */
  width:40px;               /* １つのボタンの幅 */
}
 /* SNSボタン名称の表示設定 */
.bc-brand-color-white.sns-share .button-caption {
  display:none;        /* SNSボタン名称を非表示 */
}

/* フォローメッセージの表示設定 */
.sns-follow-message{
  display:none;     /* フォローメッセージの非表示 */
}

/* SNSフォローボタングループの設定 */
.bc-brand-color-white.sns-follow {
  display:flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  width:80px;               /* ボタン幅 x 2 */ 
  margin:0 auto 0 auto;        /* 中央配置にする */
}
/* SNSフォローボタン単位の設定 */
.bc-brand-color-white.sns-follow a {
  font-size: 18px;          /* アイコンサイズ */
  border: none;             /* ボタン枠を非表示 */
  width:40px;               /* １つのボタン幅 */
}

/* 投稿者名の表示設定 */
.footer-meta .author-info{
  display:none;            /* 投稿者名を非表示 */
}

３．SNSコンパクト表示 右寄せ配置

SNSコンパクト表示 右寄せ配置の表示サンプル

ボタンの表示を右寄せにしたものです。

SNSコンパクト表示 右寄せ配置のソースコード

CSSのソースコードのみで適応させてます。

/*-----------------------------------------*/
/* コンパクトSNS for Cocoon                */
/*   右寄せ配置                            */
/*-----------------------------------------*/
/* シェアメッセージの表示設定 */
.sns-share-message{
  display:none;      /* シェアメッセージの非表示 */
}

/* SNSボタングループの設定 */
.bc-brand-color-white.sns-share.ss-col-6{
  display:flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  width:240px;              /* ボタン幅 x 6 */
  margin:0 0 0 auto;        /* 右寄せ配置にする */
}
/* ボタン単位の設定 */
.bc-brand-color-white.sns-share.ss-col-6 a{
  font-size: 18px;          /* アイコンサイズ */
  border: none;             /* SNSボタン枠を非表示 */
  width:40px;               /* １つのボタンの幅 */
}
 /* SNSボタン名称の表示設定 */
.bc-brand-color-white.sns-share .button-caption {
  display:none;        /* SNSボタン名称を非表示 */
}

/* フォローメッセージの表示設定 */
.sns-follow-message{
  display:none;     /* フォローメッセージの非表示 */
}

/* SNSフォローボタングループの設定 */
.bc-brand-color-white.sns-follow {
  display:flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
  width:80px;               /* ボタン幅 x 2 */ 
  margin:0 0 0 auto;        /* 右寄せ配置にする */
}
/* SNSフォローボタン単位の設定 */
.bc-brand-color-white.sns-follow a {
  font-size: 18px;          /* アイコンサイズ */
  border: none;             /* ボタン枠を非表示 */
  width:40px;               /* １つのボタン幅 */
}

/* 投稿者名の表示設定 */
.footer-meta .author-info{
  display:none;            /* 投稿者名を非表示 */
}

適応（コピペ）方法

WordPressの管理メニューの
「外観」「テーマエディター」をクリックします。

テーマの編集ページで
編集するテーマを選択：
Cocoon Child
テーマファイル：
スタイルシート
(style.css)

「子テーマ用のスタイルを書く」の部分へ
適応したい１～３のどれかのCSSソースコードをコピペします。

コピペし終えたら
「ファイルを更新」をクリックします。

SNSコンパクト表示のまとめと詳細

SNSコンパクト表示のために行った変更を解説します。

大まかな変更点
１．シェアメッセージを非表示
２．SNSボタングループ全体の横幅を変更
３．SNSボタン枠を非表示
４．SNSボタンアイコンサイズ変更
５．SNSボタン幅を変更
６．SNSボタン名称を非表示（アイコンのみに）
７．フォローメッセージを非表示
８．SNSフォローボタングループの横幅を変更
９．SNSフォローボタン枠を非表示
10．SNSフォローボタンアイコンサイズ変更
11．SNSフォローボタン幅を変更
12．投稿者名を非表示

通常の表示で各名称を明示したので参考にしてください。

また、全てを適応する必要が無い場合は、
CSSソースコードの必要な部分のみをコピペしてください。

注意点として、ボタン幅やボタングループの横幅が小さすぎる場合
Googleのサイト評価の項目でもある
モバイルユーザビリティの「クリック可能な要素が近すぎます」に引っかかる恐れがあるので気を付けましょう。