みなさんこんにちは！あおな（@aonalog）です。
この記事ではプログラミング未経験者の私でもできた、『コピペで簡単にできるCocoonで特定のページのみSNSボタンを消す方法』をご紹介します。
この記事の方法に沿って作業すれば、3分で特定ページのみSNSボタンを消すことができますよ！
トップページのSNSボタンって邪魔ですよね。
当ブログは、以前はよくある新着記事一覧型のトップページだったのですが、カテゴリごとに見やすくするために固定ページを使ってサイト型に変更しました。
サイト型への変更のしかたはこちらから↓
でも固定ページをトップページに設定すると、
デフォルトではこんな感じでSNSボタンが表示されてしまうんですね。今回はこの固定ページの邪魔なSNSボタンを消していきます！
3分で特定ページのSNSボタンを消す方法
それでは実際の画像を交えながら説明していきます。
※CSSコードはCocoon公式サイト様を参考にさせて頂きました。
Step1：SNSボタンを消したいページのIDを確認する
まずはSNSボタンを消したいページのページIDを控えておきましょう。
ページIDはWordPress上でページのURL上にマウスを合わせると左下に表示されるリンク先から確認できます。
こんな感じです。赤丸で囲った部分がページIDになります。この画像では「956」ですね。
Step2：「外観」→「テーマエディター」からスタイルシート(style.css)を開く
次にテーマのスタイルシート（style.css）を開きます。
「外観」→「テーマエディター」から開くことができますよ！
Step3：CSSコードをコピペする
スタイルシートを開くとこんな感じになっていると思います。
私は以前、見出しタグのデザインを少しいじったのでデフォルトではないコードが書かれていますが、なにもいじったことのない方であれば
「/＊必要ならばここにコードを書く＊/」
の下に以下のコードをコピペします。
- /*特定ページのシェア・フォローボタン非表示*/
- .page-id-XX .sns-share,
- .page-id-XX .sns-follow {
- display: none;
- }
文字部分もコピペしてください。あとでなんのコードだったかわかりやすくなります。
Step4：SNSボタンを消したいページのIDをXXに入力
最後にコピペしたコードの「.page-id-XX」のXXに、先ほど控えておいたSNSボタンを消したいページのIDを入力してください。
Step5：SNSボタンを消したいページを確認
最後にSNSボタンを消したかったページを確認してみましょう。
はい、見事にSNSボタンが消えました。お疲れ様でした！
3分で特定ページのみSNSボタンを消す方法 まとめ
この記事の方法を実践した際のBefore&Afterはこんな感じです。
- Before
- After
みなさんも無事にSNSボタンを消すことができたでしょうか？もし消えてないという方は、お問い合わせフォームよりメッセージください。私のわかる範囲でお答えします。
また、CSSはコードを間違えるとデザインがぐちゃぐちゃになってしまう可能性がありますのでご注意ください&自己責任でお願いします。心配な方はバックアップを取るのがおすすめです！
バックアップの取り方はこちら↓
以上、『3分で特定ページのみSNSボタンを消す方法』でした。最後までお読み頂きありがとうございました。
コメント