【Cocoon2020】特定のページでSNSボタンを非表示にする方法CSSで簡単

SNSキーボード ワードプレスCocoon

はじめに 一番簡単な方法かと思います

『外観→テーマエディター→CSSエディター』や『外観→カスタマイズ→追加CSS』で編集すると記事のIDを調べる手間が増えます。そしてエディターはできるだけすっきりさせておいたほうが良いと思うので(他にCSSエディターには他に書かなければいけないことがたくさんあり分かりづらくなる可能性があるので)、今回は別のところで設定する方法をご紹介します。簡単です!

SNSボタンが不要なページとは

ホームページ風のトップページや、お問い合わせページなどにはシェアボタンは必要ないと思ったりしますよね。そういったときに役立ちます。

SNSボタンを非表示にするCSSはこちら!

/*SNSボタン非表示*/
.sns-share,
.sns-follow {
display: none;
}

SNSボタンを非表示にするCSSを貼りつける場所

投稿画面の下

SNSボタンを非表示にしたい投稿画面の

Wordpress投稿画面

一番下に『カスタムCSS』と書かれているところがあります。記入できる状態になっていない時は右の『▼』をクリックしてください。

投稿画面↓カスタムCSS

記入できる状態になりました。

CSS記入できる状態

こちらに先ほどのCSSをコピーして貼り付けます。

SNSボタン非表示CSSの貼り付け

このようにします。

カスタムCSSにCSS4を貼り付け

実際にSNSボタンを非表示にしてみます

SNSボタン非表示CSSなし(通常の場合)

SNSボタン非表示CSS貼り付け後

CSSをペーストしてプレビューボタンを押してみてみると、SNSボタンが表示されていないのがお分かりになるかと思います。

SNSボタンを非表示にするCSS設定は以上です!

おわりに

今回私はワードプレスのテーマCocoonを使用して記事を書いていますが、以下のテーマもおすすめです。ぜひ覗いてみてくださいね。

【THE THOR(ザ・トール)】 の特徴
  • 圧倒的にSEOに強い
  • おしゃれで美しいデザイナーズサイトが簡単に作れる
  • アクセスUP収益UPを強力に後押しする「集客・収益化支援システム」を搭載
  • ランキングサイト・口コミサイトなどが簡単に作れる など
ブロガー専用WordPressテーマ「OPENCAGE」 の特徴
  • ブロガー向けのシンプルで高機能なテーマ
  • カスタマイズに時間をかける必要がない
  • 全てモバイルファーストでつくられているのでスマホで見た時のデザインは抜群
タイトルとURLをコピーしました