THE SONICのCSSカスタマイズ｜左サイド･アイキャッチ下･記事下のSNSシェアボタンの一部を非表示にする

ご紹介するCSSをお使いになれば、左側にタテ並びに表示されるSNSシェアボタンの表示／非表示を自由に設定できます。

SNSシェアボタンは外観＞カスタマイズ＞記事設定＞シェアボタンの設定画面で設定します。

すぐ実践に移したいひとは▼こちらのボタンをどうぞ。

まずは確認：カスタマイザーでできること

「カスタマイザー」とは外観＞カスタマイズと順番に開いていったとき表示されるメニューのことです。

できること【１】投稿ページ・固定ページでの表示オン／オフ

できること【２】上・下・左サイドでの表示オン／オフ

できること【３】シェアボタンの表示オン／オフ

できること【４】「いいねボタン（ハート）」（左サイドのみ）の表示オン／オフ

ことり

カスタマイザーで設定できるのはここまで。

カスタマイザーではできないこと

記事上・記事下・左サイド、それぞれの箇所で表示させるSNSボタンの種類（数）を切り分けることはできません。（2020/5/7現在）

めざすゴール

３か所のシェアボタンを連動させず、個別に設定する。それがこのCSSカスタマイズの目的であり、ゴールです。

例えば▼この画像の場合。アイキャッチ下はフルで表示させ、左サイドの「Facebook」「note」「Pinterest」を非表示にしています。

でも、この機能はそのうち実装されちゃうかも。

そしたらこの記事がムダになっちゃうね。

ねね

ことり

いやいや、むしろありがたい。（ニーズあるかな？）

スポンサーリンク

左サイドのSNSシェアボタンを個別に表示／非表示設定する方法

左サイドのSNSシェアボタンを非表示にするための個別CSSコード

左サイドのTwitterボタンを非表示

/* 左サイドのTwitterボタンを非表示 */
.left-fixed-in .snsbtn.tw-btn {
	display: none;
}

左サイドのFacebookボタンを非表示

/* 左サイドのFacebookボタンを非表示 */
.left-fixed-in .snsbtn.face-btn {
	display: none;
}

左サイドの はてブ（はてなブックマーク）ボタンを非表示

/* 左サイドのはてブボタンを非表示 */
.left-fixed-in .snsbtn.hatena-btn {
	display: none;
}

左サイドのLINEボタンを非表示

/* 左サイドのLINEボタンを非表示 */
.left-fixed-in .snsbtn.line-btn {
	display: none;
}

左サイドのPocketボタンを非表示

/* 左サイドのPocketボタンを非表示 */
.left-fixed-in .snsbtn.poket-btn {
	display: none;
}

左サイドのnoteボタンを非表示

/* 左サイドのnoteボタンを非表示 */
.left-fixed-in .snsbtn.note-btn {
	display: none;
}

左サイドのPinterestボタンを非表示

/* 左サイドのPinterestボタンを非表示 */
.left-fixed-in .snsbtn.pinterest-btn {
	display: none;
}

複数のコードをまとめて記述することもできる

非表示にしたいボタンが２つ以上ある場合、▼こんなふうにCSSをひとつにまとめて記述してもOK。

/* 左サイドの「Facebook」「note」「Pinterest」を非表示 */
.left-fixed-in .snsbtn.face-btn, /* カンマを忘れずに */
.left-fixed-in .snsbtn.note-btn, /* カンマを忘れずに */
.left-fixed-in .snsbtn.pinterest-btn /* 最後はカンマ要らないよ */ {
	display: none;
}

記事上・記事下のSNSシェアボタンを個別に表示／非表示設定する方法

記事上・記事下のSNSシェアボタンを非表示にするための個別CSSコード

記事上・記事下のTwitterボタンを非表示

/* 記事上下のTwitterボタンを非表示 */
.snsbox-in .snsbtn.tw-btn {
	display: none;
}

記事上・記事下のFacebookボタンを非表示

/* 記事上下のFacebookボタンを非表示 */
.snsbox-in .snsbtn.face-btn {
	display: none;
}

記事上・記事下のはてブ（はてなブックマーク）ボタンを非表示

/* 記事上下のはてブボタンを非表示 */
.snsbox-in .snsbtn.hatena-btn {
	display: none;
}

記事上・記事下のLINEボタンを非表示

/* 記事上下のLINEボタンを非表示 */
.snsbox-in .snsbtn.line-btn {
	display: none;
}

記事上・記事下のPocketボタンを非表示

/* 記事上下のPocketボタンを非表示 */
.snsbox-in .snsbtn.poket-btn {
	display: none;
}

記事上・記事下のnoteボタンを非表示

/* 記事上下のnoteボタンを非表示 */
.snsbox-in .snsbtn.note-btn {
	display: none;
}

記事上・記事下の noteボタンを非表示

/* 記事上下のnoteボタンを非表示 */
.snsbox-in .snsbtn.pinterest-btn {
	display: none;
}

スポンサーリンク

おまけ：左サイドのSNSシェアボタンを少し遅らせて表示させる方法

▼こんなふうに縦にも横にもズラ～っと並んでいたら、ちょっとにぎやかすぎる気がするんです。

ことり

実際には「ユーザーはそこまでじっくり見ない」と思いますけどね。残念ながら。

なので、少し表示を遅らせてみたらどうかな･･･と考えたわけです。

完成イメージが▼これ。

画面を下へスクロールさせると、記事上（アイキャッチ下）のSNSボタンが画面上方へ消えるころに左サイドのボタンが現れます。

このブログにも採用しています。（2020/5/7 現在）

ねね

左サイドのSNSシェアボタンを下方へずらして表示させるCSSコード

/* 左サイドのSNSシェアボタン位置を下方へ */
.left-fixed {
	margin-top: 750px;
}

好みに合わせて数値（「750」の部分）を調整してください。

関連記事

関連

THE SONICを“オールインワン”と表現してはばからない理由

関連

THE SONIC(ソニック)はアイキャッチ画像なしでもタイトルがクールに表現できるので見てほしい

関連

SANGO⇒THE SONIC｜ふきだしショートコードを一括置換【Classic Editorで編集した記事専用】