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

4 min
こんな要望にお応えします
  • 左サイドにタテ表示されるSNSシェアボタンが多すぎると感じる人
  • タイトル下・記事下と左サイドで表示させるものを変えたい人
  • 3か所それぞれ表示させるものを変えたい人

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

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

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

スポンサーリンク

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

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

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

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

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

できること【4】「いいねボタン(ハート)」(左サイドのみ)の表示オン/オフ

ことり

ことり

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

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

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

めざすゴール

3か所のシェアボタンを連動させず、個別に設定する。それがこの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;
}

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

非表示にしたいボタンが2つ以上ある場合、▼こんなふうに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」の部分)を調整してください。

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スパム対策:日本語が含まれないコメントは無視されます。ご注意ください。