Cocoonの固定ページでSNSボタンとSNSシェアを非表示にする

今回は、「CocoonでSNSボタンとSNSを非表示にする」について解説します!

イヌ
イヌ

この記事は以下のような人におすすめ!

  • 「プライバシーポリシー」などにSNSボタン・SNSシェアがでているので、非表示にしたい。
  • 固定ページに限らず、任意のページのSNSボタン・SNSシェアを非表示にしたい
ウサギ
ウサギ

必要ないところでは、表示したくない〜

今回は以下の2つの方法を解説します!

  1. テーマにCSSを設定して非表示にする方法
  2. それぞれの固定ページにCSSを設定して非表示にする方法

では、いってみましょう!

テーマにCSSを設定して非表示にする方法

このセクションの流れは以下のとおりです。

  1. 固定ページのIDを確認する
  2. テーマの追加CSSにコードを追加する

固定ページのIDを確認する

テーマでSNSボタンを非表示にするためには、固定ページのIDを確認する必要があります。

IDとは、投稿や固定ページを作成したときに設定されるユニーク(一意)な数値のことです。ユニークは他とは重複しない1つしかないことを指すので、このIDがわかればオンリーワンのページを見つけることができます。

  1. 管理画面から固定ページ一覧を表示します
  2. SNSを非表示にしたい固定ページのタイトルの部分にカーソルを合わせます
  3. 画面下の「https://dog-and-rabbit.com/wp-admin/post.php?post=163&action=edit」に表示される「post=163」の数字の部分「163」が、その固定ページのIDです。

テーマの追加CSSにコードを追加する

1.「外観」→「カスタマイズ」を開きます

2. テーマのカスタマイズ画面が開くので、「追加CSS」をクリックします

3. 表示されたテキストエリアに、以下のコードを書き込み、右上の「公開」ボタンをクリックします。

.page-id-163 .sns-share, .page-id-163 .sns-follow { display: none; }
Code language: CSS (css)

.page-id-に続けて、さきほど確認したIDの「163」を追加します。

4. 表示されていた「SNSボタン」と「SNSシェア」の項目が非表示になりました。

CSS登録前

CSS登録後

それぞれの固定ページにCSSを設定して非表示にする方法

このセクションの流れは以下のとおりです。

  1. 固定ページの編集画面を開く
  2. カスタムCSSにコードを追加する

固定ページの編集画面を開く

SNSボタンを非表示にしたい固定ページの編集画面を開きます

カスタムCSSにコードを追加する

1. 編集画面を下までスクロールし、「カスタムCSS」の下三角アイコンをクリックします。

2. 表示されたテキストエリアに、以下のコードを書き込み、「下書き保存」します。

.sns-share, .sns-follow { display: none; }
Code language: CSS (css)

ここでは「ID」の指定は不要です。
なぜかというと、この固定ページのみを非表示にするためのCSSだからです。
カスタムCSSで設定している内容は、このページのみが対象になります。

3. 表示されていた「SNSボタン」と「SNSシェア」の項目が非表示になりました。

CSS登録前

CSS登録後

まとめ: SNSボタンとSNSシェアを非表示にする

ウサギ
ウサギ

たしかに消えるようになったけど、
2つの方法はどちらをつかったらよいの?

イヌ
イヌ

複数の固定ページで非表示にしたいなら、
1. テーマにCSSを設定して非表示にする方法
をおすすめするかな。

2. それぞれの固定ページにCSSを設定して非表示にする方法
は手軽だけど、それぞれのページで設定する必要があるから、
ちょっと手間がかかるかも。

ウサギ
ウサギ

なるほど〜。
IDさえわかれば、テーマの追加CSSでいっぺんに変更できるもんね!

イヌ
イヌ

ということで、
Cocoonの固定ページでSNSボタンとSNSシェアを非表示にする
を解説しました〜

ウサギ
ウサギ

参考なるとうれしいです!
またね〜

コメントを残す

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