WordPressCocoon

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

アイキャッチ画像 Cocoon
この記事は約3分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむ情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆる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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
ARKA-蒼穹の門
三国志外伝:戦姫覚醒
Cave Shooter
ナナリズムダッシュ
イース6オンライン
ザ・アンツ
クッキーランキングダム
リネージュ2M
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
龍が如くONLINE
戦国布武
我が天下

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

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))