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

WordPressテーマ Cocoon

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

MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト

WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

masaa.net

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

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

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

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

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

設置した「ウィジェット 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フォローボタン」は次のようになりました。

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

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

の3点です。

最後に

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

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

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