【Cocoon】ウィジェット プロフィールのカスタマイズ3回目

WordPressテーマ Cocoon

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

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

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

masaa.net

今回は、WordPressテーマ Cocoonでの3回目となる「ウィジェット プロフィール」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon ウィジェット プロフィール

以前にもWordPressテーマ Cocoonの「ウィジェット プロフィール」についてはカスタマイズを行ってきました。

【Cocoon】ウィジェット プロフィールのカスタマイズ

WordPressテーマ Cocoonでの「ウィジェット プロフィール」のカスタマイズについてまとめてみました。今回のカスタマイズでは「ウィジェット プロフィール」内のプロフィール情報の行の高さと左右マージンについて調整を行いました。

masaa.net

2020.11.26

【Cocoon】ウィジェット [C] プロフィールのカスタマイズ

WordPressテーマ Cocoonでの「ウィジェット [C] プロフィール」のカスタマイズについてまとめてみました。今回のカスタマイズではアンダーラインの表示や改行位置の規制、フォントサイズの調整、アイコンの回転を行ってみました。

masaa.net

2020.07.14

現在の「ウィジェット プロフィール」のスタイルは下記の様になっています。

現状特に問題の無い「ウィジェット プロフィール」なのですが、間隔の調整とSNSフォローボタンを目立たせるカスタマイズを行ってみたいと思います。

ウィジェット プロフィールのカスタマイズ3回目

WordPressテーマ Cocoonでの3回目となる「ウィジェット プロフィール」のカスタマイズを行います。

カスタマイズ内容

3回目となる「ウィジェット プロフィール」カスタマイズの内容は下記の通りです。

「スタイルシート(style.css)」を開き、下記のカスタマイズ内容を以前カスタマイズを行った「ウィジェット プロフィールのカスタマイズ」に上書きします。

なお、これまで「ウィジェット プロフィール」のカスタマイズを行ったことが無い場合は、「スタイルシート(style.css)」に下記のカスタマイズ内容を追記します。

/************************************
** ■ウィジェット プロフィールのカスタマイズ
************************************/
.nwa .author-box .author-widget-name { /*肩書きラベル*/
  margin-bottom: 20px; /*下マージン調整*/
  font-weight:bold; /*文字強調*/
}
.nwa .author-box .author-name { /*名前*/
  margin-bottom: 20px; /*下マージン調整*/
}
.author-box .sns-follow-buttons a.follow-button { /*SNSフォローボタン*/
  width: 32px; /*横幅サイズ*/
  height: 32px; /*縦幅サイズ*/
  font-size: 25px!important; /*フォントサイズ*/
}
@media screen and (max-width: 1030px) { /*スマホ表示設定*/
  .author-box .sns-follow-buttons a.follow-button { /*SNSフォローボタン*/
    width: 28px; /*横幅サイズ*/
    height: 28px; /*縦幅サイズ*/
    font-size: 29px!important; /*フォントサイズ*/
  }
}
.nwa .author-box .sns-follow-buttons a.follow-button .icon-home-logo { /*Home*/
  color: #fe619a; /*アイコンカラー*/
}
.nwa .author-box .sns-follow-buttons a.follow-button .icon-twitter-logo { /*Twitter*/
  color: #1DA1F2; /*アイコンカラー*/
}
.nwa .author-box .sns-follow-buttons a.follow-button .icon-instagram-logo { /*Instagram*/
  color: #904AC6; /*アイコンカラー*/
}
.nwa .author-box .sns-follow-buttons a.follow-button .icon-youtube-logo { /*Youtube*/
  color: #CD201F; /*アイコンカラー*/
}
.nwa .author-box .sns-follow-buttons a.follow-button .icon-amazon-logo { /*Amazon*/
  color: #F59F00; /*アイコンカラー*/
}
.nwa .author-box .sns-follow-buttons a.follow-button .icon-feedly-logo { /*feedly*/
  color: #0FC02A; /*アイコンカラー*/
}
.nwa .author-box .sns-follow-buttons a.follow-button .icon-rss-logo { /*RSS*/
  color: #F76300; /*アイコンカラー*/
}
.nwa .author-box .author-description p { /*プロフィール情報*/
  line-height: 1.6; /*高さ*/
  margin: 0 -14px; /*左右マージン調整*/
}

カスタマイズ後のウィジェット プロフィール

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

今回のカスタマイズでは、

1. 肩書きラベルのフォントを強調
2. 肩書きラベル、名前の下マージンを調整（拡大）
3. SNSフォローボタンのサイズを拡大
4. 各SNSフォローボタン毎にカラーを設定

の4点について行いました。

最後に

以前の「ウィジェット プロフィール」と比較すると、存在感が増したと思います。

また、SNSフォローボタンのサイズを拡大し、各SNSフォローボタン毎にカラーを設定したことで少しでもボタンが押される可能性が上がったのではないでしょうか。