小ネタをこねた

閲覧数: 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年5月12日

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

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

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

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

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