WordPressテーマ THE THOR（ザ・トール）
別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）での「ウイジェット タグクラウド」のカスタマイズ 4回目についてまとめてみました。
WordPressテーマ THE THOR（ザ・トール） ウイジェット タグクラウドについて
WordPressテーマ THE THOR（ザ・トール）の「ウイジェット タグクラウド」のカスタマイズについては、過去にも行ってきました。
現在の「ウイジェット タグクラウド」のスタイルは、次の様になっています。
また、タグ上にホバーしたときのスタイルは、次の様になっています。
これまでのカスタマイズでは、タグクラウドのデザインをシンプルなデザインに変更しています。
タグの数が多くなってくると見分けるのが面倒になってくるので、これまでのシンプルなデザインは崩さずもう少し見やすい「ウイジェット タグクラウド」のスタイルになるように変更したいと思います。
ウイジェット タグクラウドのカスタマイズ 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;
}
カスタマイズ後のウイジェット タグクラウド
今回のカスタマイズによって、「ウイジェット タグクラウド」のスタイルは、次の様になりました。
また、タグ上にホバーしたときのスタイルは、次の様になりました。
今回の主なカスタマイズ内容は、
- 先頭に別アイコンを表示（アイコンはFont Awesome 5を使用）
- タグ上にホバーしたときにタグ拡大表示
となります。
最後に
これまで先頭のアイコンは非表示にしていたのですが、今回先頭のアイコンを復活させてデフォルトのアイコンとは違うアイコンに変更してみました。
これにより以前よりもタグクラウドの区切りが分かりやすくなったと思います。
また、ホバー時に拡大表示させることで、タグを選択し易くなりました。
コメント