(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連Cocoon

【Cocoon】ウィジェット SNSフォローボタンのカスタマイズ

アイキャッチ画像 Cocoon
この記事は約3分で読めます。

【広告】

※ 本ページには【広告】が含まれています

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト
WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

今回は、WordPressテーマ Cocoonでの「ウィジェット SNSフォローボタン」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon ウィジェット SNSフォローボタン

これまでサイドバーに「ウィジェット プロフィール」を設置してきました。

プロフィールのコンテンツページは別に有るので、敢えてサイドバーに表示させる必要は無いと判断し「ウィジェット プロフィール」を表示しないようにしてみました。

但し、SNSフォローボタンの表示が無くなるのは問題なので、「ウィジェット プロフィール」の代わりにサイドバーに「ウィジェット SNSフォローボタン」を設置してみました。

設置した「ウィジェット SNSフォローボタン」は下記の通りです。

【Cocoon】ウィジェット SNSフォローボタンのカスタマイズ

このまま「ウィジェット SNSフォローボタン」を設置して表示させても良かったのですが、少しカスタマイズしてみました。

ウィジェット SNSフォローボタンのカスタマイズ

「ウィジェット SNSフォローボタン」のカスタマイズを行います。

カスタマイズ内容

「インデックスのタイトル」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ●SNSフォローボタン
************************************/
.sns-share-message, .sns-follow-message {
  display: none; /*説明文字削除*/
}
.follow-button {
  border-radius:6px!important; /*角丸コーナー*/
  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー(影)*/
}

カスタマイズ後のウィジェット SNSフォローボタン

今回のカスタマイズによって、「ウィジェット SNSフォローボタン」は次のようになりました。

【Cocoon】ウィジェット SNSフォローボタンのカスタマイズ

今回行ったカスタマイズの内容は、

  1. フォローボタンの上部の説明を削除(この場合【管理人@masaa. netをフォローする】)
  2. 各SNSフォローボタンにシャドー(影)を付ける
  3. 各SNSフォローボタンの角丸を更に大きくする

の3点です。

最後に

元々の「ウィジェット SNSフォローボタン」と比較すると、上部に有った説明が無い分スッキリとしました。

また、各SNSフォローボタンもシャドー(影)を付けたことで立体感が出てボタンらしくなったと思います。

ボタン自体のデザインもグラデーションを付けるなど変更して良かったのですが、今回は面倒なのでパスと言う事でまたの機会に。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 記事内には【広告】が含まれています

コメント

  1. タカボー より:

    いつもカスタマイズの参考になる記事をありがたく拝見させて頂いております。
    ありがとうございます。
    masaaさん、もしご存知でしたら教えて頂けると嬉しいのですが、、、
    プロフィール欄のこのSNSフォローボタンにマウスオーバー(ホバー)すると、「Twitterをフォロー」、「feedlyで更新情報を購読」などの文字列が現れますが、この文字列を変更したい場合のカスタマイズはどのように行えば良いのでしょうか?
    親テーマのtmp/sns-follow-buttons.phpを子テーマにコピーして、変更したい文字列を書き直すやり方で合ってますでしょうか?
    どうも詳しい方法と手順が分からず、カスタマイズに詳しいmasaaさんに質問してみようと思いました。
    どうかよろしくお願いします。

    • masaa masaa より:

      こちらこそMASAa.netをご覧頂き誠にありがとうございます。

      ご質問の
      > 親テーマのtmp/sns-follow-buttons.phpを子テーマにコピーして、変更したい文字列を書き直すやり方で合ってますでしょうか?
      についてですが、それでOKです。

      子テーマにtmpのフォルダを作成して、そのtmpのフォルダの中に親テーマからコピーしてきた「sns-follow-buttons.php」を保存して下さい。
      その後子テーマの「sns-follow-buttons.php」を編集すればOKです。
      一応こちらで確認しましたが、正常に編集した文字列が表示されました。
      以上、よろしくお願い致します。

      • タカボー より:

        ご丁寧に確認までして頂いて本当にありがうこざいました。
        masaaさんに質問してみて良かったと思いました。助かりました。
        おかげて解決しました。
        これからも為になる記事を楽しみにしております。
        今後とも宜しくお願いします。

        • masaa masaa より:

          無事動作して良かったです。
          また何かありましたら遠慮無くご連絡ください。
          私の分かる範囲であれば対応させて頂きます。
          それでは引き続きMASAa.netをよろしくお願い致します(o_ _)o))

【広告】