- 左サイドにタテ表示されるSNSシェアボタンが多すぎると感じる人
- タイトル下・記事下と左サイドで表示させるものを変えたい人
- 3か所それぞれ表示させるものを変えたい人
ご紹介するCSSをお使いになれば、左側にタテ並びに表示される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」の部分)を調整してください。