(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

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

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

【広告】

※ 本ページには【広告】が含まれています

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

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

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

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

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

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

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

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

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

また、タグ上にホバーしたときのスタイルは、次の様になっています。

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

これまでのカスタマイズでは、タグクラウドのデザインをシンプルなデザインに変更しています。

タグの数が多くなってくると見分けるのが面倒になってくるので、これまでのシンプルなデザインは崩さずもう少し見やすい「ウイジェット タグクラウド」のスタイルになるように変更したいと思います。

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

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

カスタマイズ内容

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

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

以前カスタマイズを行っていないのであれば、「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■タグクラウドカスタマイズ
************************************/
.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: #fff9fc;
}
.widget.widget_tag_cloud a:before { /*タグクラウドのアイコン設定*/
/*	display: none;*/
	font-family: "Font Awesome 5 Free";
	content: "\f6d5";
	font-weight: 900;
	color:#f32469;
	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:before { /*タグクラウドのアイコン設定*/
	transition: all 0.6s ease; /*エフェクト処理*/
	color:#fff;
}

以前、下記内容のカスタマイズを行っていた場合は、削除またはコメントアウトします。

/************************************
** ■ウィジェット タグクラウドのタグアイコン削除
************************************/
.widget.widget_tag_cloud a:before {
	display: none;
}

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

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

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

また、タグ上にホバーしたときのスタイルは、次の様になりました。

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

今回の主なカスタマイズ内容は、

  • 先頭に別アイコンを表示(アイコンはFont Awesome 5を使用)
  • タグ上にホバーしたときにタグ拡大表示

となります。

最後に

これまで先頭のアイコンは非表示にしていたのですが、今回先頭のアイコンを復活させてデフォルトのアイコンとは違うアイコンに変更してみました。

これにより以前よりもタグクラウドの区切りが分かりやすくなったと思います。

また、ホバー時に拡大表示させることで、タグを選択し易くなりました。

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

シェアする
※ 記事内には【広告】が含まれています

コメント

【広告】