【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連THE THOR

【THE THOR】ウイジェット タグクラウドのカスタマイズ 5回目

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

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

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

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

今回は、WordPressテーマ THE THOR(ザ・トール)での「ウイジェット タグクラウド」のカスタマイズ 5回目についてまとめてみました。

WordPressテーマ THE THOR(ザ・トール) ウイジェット タグクラウドについて

WordPressテーマ THE THOR(ザ・トール)の「ウイジェット タグクラウド」のカスタマイズについては、過去4回行ってきました。

【THE THOR】ウイジェット タグクラウドのカスタマイズ 4回目
WordPressテーマ THE THOR(ザ・トール)での4回目となる「ウイジェット タグクラウド」のカスタマイズについてまとめてみました。今回は先頭に別アイコン(Font Awesome 5)の表示とホバー時にタグ拡大表示を行いました。
【THE THOR】ウィジェット タグクラウド(メインカラムエリア時)
WordPressテーマ THE THOR(ザ・トール)での「ウィジェット タグクラウド(メインカラムエリア時)」のカスタマイズについてまとめてみました。今回はメインカラム時のウィジェット タグクラウド表示の枠と内側余白を無くしました。
【THE THOR】ウィジェット タグクラウドのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)での「ウィジェット タグクラウド」のカスタマイズについてまとめてみました。今回のカスタマイズでは、「ウィジェット タグクラウド」のタグアイコンを削除してみました。
【THE THOR】ウイジェット タグクラウドのカスタマイズ
WordPressテーマ THE THOR(ザ・トール)の「ウイジェット タグクラウド」のカスタマイズについてまとめてみました。今回の「ウイジェット タグクラウド」のカスタマイズは、全体的にコンパクトにして文字をハッキリと見えやすいようにしました。

現在の「ウイジェット タグクラウド」のスタイルは、次の様になっています。

【THE THOR】ウイジェット タグクラウドのカスタマイズ 5回目

過去4回の「ウイジェット タグクラウド」のカスタマイズにおいて、かなり使いやすく見やすいタグクラウドになってきました。

しかし、タグの数が多くなってくると、どうしても小さい表示のため見分けるのが面倒になってきます。

そこで、更に見やすさを追求した「ウイジェット タグクラウド」のスタイルになるように変更したいと思います。

ウイジェット タグクラウドのカスタマイズ 5回目

WordPressテーマ THE THOR(ザ・トール)での「ウイジェット タグクラウド」のカスタマイズ 5回目を行います。

カスタマイズ内容

「ウイジェット タグクラウド」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、下記のカスタマイズ内容を以前カスタマイズした「■タグクラウドカスタマイズ」に上書きします。

これまで「ウイジェット タグクライド」のカスタマイズを行っていない場合は、「スタイルシート(style-user.css)」を開き追記する形でOKです。

/************************************
** ■タグクラウドカスタマイズ
************************************/
.widget.widget_tag_cloud a { /*タグクラウド奇数の設定*/
	border:1px solid #ff75a7; /*枠線設定*/
	color: #f32469; /*文字色*/
	line-height: 1.0; /*行の高さ*/
	padding: 4px 6px 3px 6px; /*内側余白設定*/
	margin: 0 1px 3px 0; /*外側余白設定*/
	font-size: 13px!important;
	font-weight:700; /*フォント太さ*/
	background-color: #fff; /*背景色*/
}
.widget.widget_tag_cloud a:nth-child(even) { /*タグクラウド偶数の設定*/
	border:1px solid #fe619a; /*枠線設定*/
	color: #ff75a7; /*文字色*/
	background-color: #fdeef7;
}
.widget.widget_tag_cloud a:before { /*タグクラウド奇数のアイコン設定*/
	font-family: "Font Awesome 5 Free";
	content: "\f6d5";
	font-weight: 900;
	color:#f32469;
	font-size: 11px!important;
}
.widget.widget_tag_cloud a:nth-child(even):before { /*タグクラウド偶数のアイコン設定*/
	font-family: "Font Awesome 5 Free";
	content: "\f6d5";
	font-weight: 900;
	color:#ff75a7;
	font-size: 11px!important;
}
.widget.widget_tag_cloud a:hover { /*タグクラウドホバー時のリンク文字設定*/
	color: #fff; /*文字色*/
	transition: all 0.6s ease; /*エフェクト処理*/
	text-decoration:none; /*アンダーライン*/
	transform: scale(1.6); /*拡大表示*/
}
.widget.widget_tag_cloud a:hover:nth-last-child(even):before, /*タグクラウド偶数ホバー時のアイコン設定*/
.widget.widget_tag_cloud a:hover:before { /*タグクラウド奇数ホバー時のアイコン設定*/
	transition: all 0.6s ease; /*エフェクト処理*/
	color:#fff; /*文字色*/
}

カスタマイズ後のウイジェット タグクラウド

今回のカスタマイズによって、「ウイジェット タグクラウド」のスタイルは、次の様になりました。

【THE THOR】ウイジェット タグクラウドのカスタマイズ 5回目

今回のカスタマイズ内容は、タグ配列の【奇数表示】と【偶数表示】でそれぞれ色設定を行い認識性を高めてみました。

最後に

よくエクセルなどで表を作成した際に、行の交互で色分けを行って見やすさと認識性向上を狙ったのと同じ手法です。

但し、どちらかを強調と言う訳にはいかないので、奇数と偶数の色の設定バランスが難しいところです。

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

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

下記バナーからスマホゲームのインストールお願いします!
ザ・グランドマフィア
少女ウォーズ
れじぇくろ! ~レジェンド・クローバー~
イース6 オンライン〜ナピシュテムの匣〜
極道のエデン
リネージュ2M
魔剣伝説
超次元彼女
ライフアフター
覇王の天下-戦略シミュレーション
グランドサマナーズ
The King of Fighters '98UM OL

MASAa.net

コメント