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

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約6分で読めます。
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

別ブログサイトのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト(THE THOR採用)
ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト(THE THOR採用)
MASAa.blog│パズドラ好きのmasaaが情報発信する1st WordPressブログサイト(THE THOR採用)
パズドラ好きのmasaaが情報発信する1st WordPressブログサイト(THE THOR採用)

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

WordPressテーマ THE THOR(ザ・トール) ウィジェット プロフィール

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

【THE THOR】ウィジェット プロフィールのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)での「ウィジェット プロフィール」のカスタマイズについてまとめてみました。今回のカスタマイズではプロフィールにアンダーラインの表示や改行位置の規制、フォント調整を行ってみました。

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

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

なお、「ウィジェット プロフィール」の設定は、次の様になっています。

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

現状特に問題の無い「ウィジェット プロフィール」なのですが、SNSアイコンの大きさなど気になる点をカスタマイズしてみたいと思います。

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

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

カスタマイズ内容

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

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

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

/************************************
** ■プロフィールカスタマイズ
************************************/
.widgetProfile__name { /*ネーム*/
	margin-top:20px; /*上マージン調整*/
	font-size: 20px; /*フォントサイズ*/
}
.widgetProfile__text {
	word-break: break-all; /*表示範囲に合わせて改行*/
	text-decoration: underline dotted #333; /*アンダーライン*/
	font-weight: 700; /*タイトル フォント太さ*/
	font-size:14px; /*フォントサイズ*/
	margin:20px auto 14px; /*マージン調整*/
}
.widgetProfile__group { /*役職 / 所属*/
	display: none; /*非表示*/
}
.widgetProfile .btn__link.btn__link-secondary { /*記事一覧ボタン*/
	padding: 2px 25px 0 15px!important; /*間隔調整*/
	margin-bottom: 15px; /*下マージン*/
	transition: all 0.6s ease; /*エフェクト処理*/
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.widgetProfile .btn__link.btn__link-secondary { /*記事一覧ボタン*/
		padding: 7px 25px 5px 15px!important; /*間隔調整*/
	}
}
.widgetProfile .btn__link.btn__link-secondary:hover { /*記事一覧ボタン ホバー時*/
	color: #f32469!important; /*文字色*/
	font-weight:900!important; /*フォント太さ*/
	box-shadow: none; /*枠無し*/
	transform: none; /*浮かさない*/
	transition: all 0.6s ease; /*エフェクト処理*/
}
.widgetProfile__snsTitle { /*フォローアイコンのタイトル*/
	display: none; /*非表示*/
}
.widgetProfile__sns { /*フォローアイコン*/
	margin-top: 0px; /*上マージン無し*/
	padding: 10px 17.5px 0; /*間隔調整*/
	background-color: transparent!important; /*背景白*/
}
.widgetProfile__snsItem { /*Twitter/Instagramアイコン*/
	margin-right: 12px; /*右マージン*/
	margin-left: 12px; /*左マージン*/
	transform: scale(1.3); /*拡大表示*/
}
.widgetProfile__snsLink.icon-twitter { /*Twitterアイコン*/
	color: #1DA1F2; /*アイコンカラー*/
	font-size: 16px; /*フォントサイズ*/
}
.widgetProfile__snsLink.icon-instagram { /*Instagramアイコン*/
	color: #904AC6; /*アイコンカラー*/
	font-size: 16px; /*フォントサイズ*/
}
.widgetProfile__snsLink.icon-youtube { /*YouTubeアイコン*/
	color: #CD201F; /*アイコンカラー*/
	font-size: 16px; /*フォントサイズ*/
}
@media only screen and (max-width: 768px) { /*iPad縦表示対応*/
	.widgetProfile__snsLink.icon-twitter { /*Twitterアイコン*/
		color: #1DA1F2; /*アイコンカラー*/
		font-size: 22px; /*フォントサイズ*/
		padding-top: 3px; /*上間隔調整*/
	}
	.widgetProfile__snsLink.icon-instagram { /*Instagramアイコン*/
		color: #904AC6; /*アイコンカラー*/
		font-size: 22px; /*フォントサイズ*/
		padding-top: 3px; /*上間隔調整*/
	}
	.widgetProfile__snsLink.icon-youtube { /*YouTubeアイコン*/
		color: #CD201F; /*アイコンカラー*/
		font-size: 22px; /*フォントサイズ*/
		padding-top: 3px; /*上間隔調整*/
	}
}

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

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

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

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

  1. ネームのフォント調整
  2. 記事一覧ボタンの間隔調整
  3. SNSフォローアイコンの背景を非表示
  4. SNSフォローアイコンのサイズ拡大と間隔調整

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

最後に

これまでTwitterとInstagramの2つしかない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

コメント