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

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

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

【広告】

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

WordPressテーマ Cocoon

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

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

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

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

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

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

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

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

現状特に問題の無い「ウィジェット プロフィール」なのですが、間隔の調整と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; /*左右マージン調整*/
}

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

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

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

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

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

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

最後に

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

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

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

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】