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

アイキャッチ画像 Cocoon
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPress blog site specialized in PC produce by masaa
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆる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の支援が行えます!

または、カスタマイズのひと休みにスマホゲームは如何でしょうか?
魔神の子
蒼空ファンタジー
リネージュ2M
商人放浪‪記
極夜大陸:メテオの彼方
パズル&サバイバ‪ル
ドラゴンとガールズ交響曲
魔剣伝説

ブレイドエクスロード
ロードモバイル
おすすめWordPressテーマ!
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ WING(AFFINGER5)
WordPressテーマ Diver

WordPress Cocoon
MASAa.net

コメント


スポンサーリンク
BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセールBTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール