小ネタをこねた

閲覧数: 20(0)

左上のメニューアイコン(三本線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日】
カテゴリーIT閑話, 公開タグ,
検索精度を高める
blank
2020年11月1日

検索ネタを連発するのはElasticsearchやElasticPressがバージョンアップした時の  続きを読む

ElasticPress日本語設定2020年版
blank
2020年10月29日

ElasticsearchをWordpressで利用するためのプラグインであるElasticPres  続きを読む

ElasticPress 3.5
blank
2020年10月22日

Elasticsearch用のプラグインであるElasticPressがメジャーバージョンアップ(3  続きを読む

Elasticsearch 6.8.11
blank
2020年10月2日

2017年末に「2.4.6」から「5.6.5」へバージョンアップして以来の大幅バージョンアップです。  続きを読む

パンくずリスト詳細
blank
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください