WordPress Cocoon

【Cocoon】サイドバーのSNSフォローボタンをカスタマイズ

当サイトはアフィリエイト広告を利用しています。

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーにウィジェットで表示する「SNSフォローボタン」のカスタマイズをしてみました。

サイドバーにプロフィールボックスを置いてる人は必要ないですが、プロフィールじゃなくてSNSボタンだけ置きたいという場合もあると思います。

このブログではこんな感じで通常は色なし、マウスホバーで色が変わるようにしてみました。

他の形や色などのパターンも紹介しますので参考にしてみてください。それではいってみましょう〜！

サイドバーにSNSフォローボタンを表示する準備

まずはサイドバーにSNSフォローボタンを表示するための手順から紹介します。すでに表示できている人は飛ばしてください。

表示するボタンの設定

管理画面のメニューから「ユーザー＞あなたのプロフィール」を開いて、サイト〜GitHub URLまでの必要な部分にURLを入力してから一番下の「プロフィールを更新」のボタンを押します。

Cocoon設定の「SNSフォローボタン」を確認

デフォルトだとSNSボタンの上に「◯◯をフォローする」という文字が出ると思いますが、これを消すには管理画面のメニューから「Cocoon設定＞SNSフォローボタン」を開いて、「フォローメッセージ」を削除してください。

また、feedlyとRSSのボタンを表示するかどうかも変更できるので、必要であれば設定してください。

その他の部分は変更せずにそのままで大丈夫です。

ウィジェットの設定

次に「外観＞ウィジェット」を開いて「サイドバー」のウィジェットに「[C]SNSフォローボタン」を追加します。

「タイトル」が見出しになるのでお好きな文字を入力してください。未入力だと自動的に「SNSフォローボタン」という見出しになります。

これでサイドバーにフォローボタンが表示されていると思います。見出しのデザイン変更については以前に書いたので参考にどうぞ↓

【Cocoon】サイドバーの見出しデザインをカスタマイズ
...
web-ashibi.net
2018.04.22

CSSコードその１（当ブログと同じ設定）

あとはCSSを追加するだけですが、以下は現在このブログで使っているのと全く同じコードです。

  • CSS
  1. .sidebar .sns-follow-buttons a {
  2. width: 30%; /*ボタンの幅*/
  3. }
  4. .sidebar .sns-follow {
  5. margin: 0 0 24px 0;
  6. }
  7. .sidebar .sns-follow-buttons a {
  8. background: none !important;
  9. border: 1px solid #444d53;
  10. color: #444d53;
  11. border-radius: 50px;
  12. }
  13. .sidebar .twitter-button:hover {
  14. background-color: #1da1f2 !important;
  15. color: #fff;
  16. border-color: #1da1f2;
  17. }
  18. .sidebar .feedly-button:hover {
  19. background-color: #2bb24c !important;
  20. color: #fff;
  21. border-color: #2bb24c;
  22. }
  23. .sidebar .rss-button:hover {
  24. background-color: #f26522 !important;
  25. color: #fff;
  26. border-color: #f26522;
  27. }
.sidebar .sns-follow-buttons a {
  width: 30%; /*ボタンの幅*/
}
.sidebar .sns-follow {
  margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
  background: none !important;
  border: 1px solid #444d53;
  color: #444d53;
  border-radius: 50px;
}
.sidebar .twitter-button:hover {
  background-color: #1da1f2 !important;
  color: #fff;
  border-color: #1da1f2;
}
.sidebar .feedly-button:hover {
  background-color: #2bb24c !important;
  color: #fff;
  border-color: #2bb24c;
}
.sidebar .rss-button:hover {
  background-color: #f26522 !important;
  color: #fff;
  border-color: #f26522;
}

上記コードで冒頭で紹介した画像のようになります。続いてFacebookとInstagramも入れたバージョンのコードがこちら↓

  • CSS
  1. .sidebar .sns-follow-buttons a {
  2. width: 18%; /*ボタンの幅*/
  3. }
  4. .sidebar .sns-follow {
  5. margin: 0 0 24px 0;
  6. }
  7. .sidebar .sns-follow-buttons a {
  8. background: none !important;
  9. border: 1px solid #444d53;
  10. color: #444d53;
  11. border-radius: 50px;
  12. }
  13. .sidebar .twitter-button:hover {
  14. background-color: #1da1f2 !important;
  15. color: #fff;
  16. border-color: #1da1f2;
  17. }
  18. .sidebar .feedly-button:hover {
  19. background-color: #2bb24c !important;
  20. color: #fff;
  21. border-color: #2bb24c;
  22. }
  23. .sidebar .rss-button:hover {
  24. background-color: #f26522 !important;
  25. color: #fff;
  26. border-color: #f26522;
  27. }
  28. .sidebar .facebook-button:hover {
  29. background-color: #3b5998 !important;
  30. color: #fff;
  31. border-color: #3b5998;
  32. }
  33. .sidebar .instagram-button:hover {
  34. background-color: #c522b8 !important;
  35. color: #fff;
  36. border-color: #c522b8;
  37. }
.sidebar .sns-follow-buttons a {
  width: 18%; /*ボタンの幅*/
}
.sidebar .sns-follow {
  margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
  background: none !important;
  border: 1px solid #444d53;
  color: #444d53;
  border-radius: 50px;
}
.sidebar .twitter-button:hover {
  background-color: #1da1f2 !important;
  color: #fff;
  border-color: #1da1f2;
}
.sidebar .feedly-button:hover {
  background-color: #2bb24c !important;
  color: #fff;
  border-color: #2bb24c;
}
.sidebar .rss-button:hover {
  background-color: #f26522 !important;
  color: #fff;
  border-color: #f26522;
}
.sidebar .facebook-button:hover {
  background-color: #3b5998 !important;
  color: #fff;
  border-color: #3b5998;
}
.sidebar .instagram-button:hover {
  background-color: #c522b8 !important;
  color: #fff;
  border-color: #c522b8;
}
上記コードだとこうなります。ボタンの数によって2行目の「width: 18%; /*ボタンの幅*/」の数字を調整してください。

CSSコードその2（最初からカラー表示）

カスタマイズ前のカラー表示のままならコードは短くなります↓

  • CSS
  1. .sidebar .sns-follow-buttons a {
  2. width: 18%; /*ボタンの幅*/
  3. }
  4. .sidebar .sns-follow {
  5. margin: 0 0 24px 0;
  6. }
  7. .sidebar .sns-follow-buttons a {
  8. border-radius: 50px;
  9. }
  10. .sidebar .instagram-button {
  11. background-color: #c522b8 !important;
  12. }
.sidebar .sns-follow-buttons a {
  width: 18%; /*ボタンの幅*/
}
.sidebar .sns-follow {
  margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
  border-radius: 50px;
}
.sidebar .instagram-button {
  background-color: #c522b8 !important;
}
上記コードだとこうなります。InstagramのボタンだけCSSで背景色を変更しています。

下から2行目の「border-radius: 50px;」を「border-radius: 0;」にすれば四角になります。「4px」とかだと少し角が丸い四角といった感じ。お好みで調整してください。

CSSコードその3（ボタンを丸くする）

ボタンの形を正円にしたい場合は以下のコードを使ってください。

  • CSS
  1. .sidebar .sns-follow-buttons {
  2. justify-content: center; /*ボタンを中央寄せにする*/
  3. }
  4. .sidebar .sns-follow {
  5. margin: 0 0 24px 0;
  6. }
  7. .sidebar .sns-follow-buttons a {
  8. border-radius: 50%;
  9. width: 40px; /*ボタンの横の大きさ*/
  10. height: 40px; /*ボタンの縦の大きさ*/
  11. font-size: 20px; /*アイコンのサイズ*/
  12. margin: 0 6px; /*ボタン同士の間隔*/
  13. }
  14. .sidebar .instagram-button {
  15. background-color: #c522b8 !important;
  16. }
.sidebar .sns-follow-buttons {
  justify-content: center; /*ボタンを中央寄せにする*/
}
.sidebar .sns-follow {
  margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
  border-radius: 50%;
  width: 40px; /*ボタンの横の大きさ*/
  height: 40px; /*ボタンの縦の大きさ*/
  font-size: 20px; /*アイコンのサイズ*/
  margin: 0 6px; /*ボタン同士の間隔*/
}
.sidebar .instagram-button {
  background-color: #c522b8 !important;
}
上記コードでこうなります。ボタンやアイコンの大きさはCSSでお好みのサイズに変えてください。

1〜3行目のコードと、12行目の「margin: 0 6px;」を削除すると、デフォルトの指定である「justify-content: space-between;」が適用されるので幅いっぱいに等間隔に並びます↓

「justify-content」はFlexboxのプロパティの１つで、「space-between」だと等間隔に配置されます。

まとめ

応用すればカラーを変えたり色々とアレンジできると思います。サイトの雰囲気に合わせて調整してみてください。

WordPress
Cocoon
＼記事が役に立ったらシェアしてね／
DICE
うぇぶあしび

comment

  1. みやけ より:
    2019年7月3日 1:57 AM

    大変ためになる記事ありがとうございます。
    参考にしてSNSフォローボタンを出したところ
    「○○」をフォローする」
    という記述が現れたのですが、対応方法わかりますでしょうか?

    返信
    • DICEDICE より:
      2019年7月3日 3:12 AM

      コメントありがとうございます。
      Cocoon設定の「SNSフォロー」内にある「フォローメッセージ」を削除すると消えると思います。
      それも記事に追加しておいたほうが良さそうですね。気付かせていただいてありがとうございます。

      返信
  2. Vantako より:
    2020年3月11日 12:53 AM

    2個目のcssコードのほうで3行目の「 }　」でエラーが起きてしまい、大きさの調節ができないのですが、どうしてでしょうか。ご連絡お待ちしております。

    返信
    • DICEDICE より:
      2020年3月11日 1:37 AM

      確認しましたがこちらの環境では問題ありませんでした。
      入力したコードに間違いがないか確認してみていただけますでしょうか。

      返信
  3. ガル山 より:
    2020年4月28日 5:49 PM

    はじめまして。大変参考になる記事をありがとうございます。
    1点質問させて頂きたいのですが、よろしいでしょうか。

    こちらの記事を参考にボタンを設置したのですが、TOPページではTwitterのアイコンが表示されず、各記事には表示されているという事象が起きています。

    何が原因かわからず困っております。
    何かヒントをいただければ幸いです。どうぞよろしくお願いいたします。

    返信
    • DICEDICE より:
      2020年4月28日 11:36 PM

      CSSが上書きされてしまっていると思われますが、ブラウザの開発者ツールで該当箇所にどんなCSSが適用されているかを調べてみると分かると思います。

      返信
      • ガル山 より:
        2020年4月29日 12:21 PM

        お忙しい中ご返信ありがとうございます。
        一度開発者ツールから確認して挑戦してみたいと思います。
        ありがとうございました。

        返信
タイトルとURLをコピーしました