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

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

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

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(ザ・トール)での「ウイジェット タグクラウド」のカスタマイズ 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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

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

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



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

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

MASAa.net

コメント