WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「ウイジェット タグクラウド」のカスタマイズ 5回目についてまとめてみました。
WordPressテーマ THE THOR（ザ・トール） ウイジェット タグクラウドについて
WordPressテーマ THE THOR（ザ・トール）の「ウイジェット タグクラウド」のカスタマイズについては、過去4回行ってきました。
現在の「ウイジェット タグクラウド」のスタイルは、次の様になっています。
過去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; /*文字色*/
}
カスタマイズ後のウイジェット タグクラウド
今回のカスタマイズによって、「ウイジェット タグクラウド」のスタイルは、次の様になりました。
今回のカスタマイズ内容は、タグ配列の【奇数表示】と【偶数表示】でそれぞれ色設定を行い認識性を高めてみました。
最後に
よくエクセルなどで表を作成した際に、行の交互で色分けを行って見やすさと認識性向上を狙ったのと同じ手法です。
但し、どちらかを強調と言う訳にはいかないので、奇数と偶数の色の設定バランスが難しいところです。
コメント