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

アイキャッチ画像 THE THOR(ザ・トール)
スポンサーリンク

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

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

ZMASAa.blog│PC・ガジェット好きmasaaのWordPressブログサイト
このZMASAa.blogは、ガジェット好きmasaaのWordPressブログサイトです。masaaが手に入れたガジェットについてや愛車トヨタノアに関すること等を掲載していきます。
MASAa.blog│パズドラ日記と製品レビューの記事を掲載するmasaaの元祖WordPressブログサイト
このMASAa.blogは、パズドラ好きmasaaのWordPressブログサイトです。パズル&ドラゴンズ(パズドラ)を始めスマホアプリについてやレビュー記事等を掲載していきます。

今回は、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の支援が行えます!

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

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

WordPress THE THOR
MASAa.net

コメント


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