【注意】このMASAa.netはWordPressテーマ Cocoonを使用しており、THE THORはZMASAa.blogで使用中です。クリックするとZMASAa.blogを開きます。
WordPressCocoon

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

アイキャッチ画像 Cocoon
この記事は約5分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむための情報発信サイト
この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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

……… THE THOR(ザ・トール)購入について ………
下記バナーからTHE THOR(ザ・トール)をご購入の方には、
当掲載のカスタマイズについて優先的にサポートさせて頂きます。

下記バナー経由でTHE THOR(ザ・トール)を購入した日付と時刻
を合わせてお問い合わせフォームからご連絡下さい。



気軽にプレイできるPC向けウェブブラウザ対応ゲーム!
邪神ちゃんドロップキック
精霊幻想記アナザーテイル
空島クロニクル
ラストラグナロク
ビビッドアーミー
城姫クエスト 極
下記バナーからスマホゲームのインストールお願いします!
MU:アークエンジェル
Cave Shooter
イース6オンライン
ザ・アンツ
リネージュ2M
クッキーランキングダム
ドラゴンとガールズ交響曲
魔剣伝説
パズにゃん
ブレイドエクスロード

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

MASAa.net

コメント