小ネタをこねた

左上のメニューアイコン(三本線w)をクリックすると左側にサイドバーが表示されます。このサイドバーの中身はウィジェットで実装されていて、(一般公開の場合)上から順に「固定メニュー」「タグ」「最近の投稿」「今週のトップ5」「メタ情報」「アーカイブ」が配置されています。

標準では「最近の投稿」には「ペン」のアイコンがリストの前に表示されます。「今週のトップ5」と「メタ情報」はlist(li)要素の単純な「・(中点、中黒)」がリストの前に表示されます。list(li)要素の中点がアイコンに比べるとちょっと寂しい感じがしたので加飾しようと思い少し調べてみました。

「最近の投稿」で使われていたのは、「::before/::after」でした。要素の前後にアイコンを表示する機能のようで便利そうだったので「今週のトップ5」と「メタ情報」にもこれを使うことにしました。

まず標準で表示されている「・」を消します。

.widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

後は表示したいli要素に対して表示したいアイコンを指定するだけです。

.widget_post_views_counter_list_widget li::before {
	font-family: Fontawesome;
	font-size: 15px;
	margin-right: 5px;
	content: "\f080";
}

これでアイコンがリストの前に表示されるようになります。「おーできたできた」と一人悦に入っていたらふっと「マウスオーバーでアイコン変わったらクールだよなw」なんてことを思いまして、とりあえず過去の経験から「:hover」付ければいいんじゃね？と思いトライしてみましたが結果はあえなく「NG」そんな単純じゃないんだw (ググれということか)使い方が間違っていました。後に付けるのではなくて先に付ける！

.widget_post_views_counter_list_widget li:hover::before {
	font-family: Fontawesome;
	font-size: 15px;
	margin-right: 5px;
	content: "\f201";
}

これは「メタ情報」の設定です。

.widget_meta li::before {
	font-family: Fontawesome;
	font-size: 15px;
	margin-right: 5px;
	content: "\f204";
}
.widget_meta li:hover::before {
	font-family: Fontawesome;
	font-size: 15px;
	margin-right: 5px;
	content: "\f205";
}

これらの記述をテーマのカスタマイズで「追加CSS」に加筆すればやりたかったことが実現できます。結果は「メニュー」アイコンをクリックして確かめて下さい。スマホからだとアイコンが変わる様子は再現するのが難しいかもしれません。その際はパソコンでw

最終更新日: 2017年10月20日