WordPressテーマ Cocoon
このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。
MASAa.net | WordPress blog site specialized in PC produce by masaa
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆる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フォローボタン」は次のようになりました。
今回行ったカスタマイズの内容は、
- フォローボタンの上部の説明を削除（この場合【管理人@masaa. netをフォローする】）
- 各SNSフォローボタンにシャドー（影）を付ける
- 各SNSフォローボタンの角丸を更に大きくする
の3点です。
最後に
元々の「ウィジェット SNSフォローボタン」と比較すると、上部に有った説明が無い分スッキリとしました。
また、各SNSフォローボタンもシャドー（影）を付けたことで立体感が出てボタンらしくなったと思います。
ボタン自体のデザインもグラデーションを付けるなど変更して良かったのですが、今回は面倒なのでパスと言う事でまたの機会に。
コメント