小ネタをこねた

閲覧数: 21(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
2021年4月1日

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

閲覧数まとめ
blank
2021年3月25日

閃きついでに総合計と週合計をフラグで制御する方式に変更してみた。これまではベタに関数をまるまるコピー  続きを読む

閃きは大事だw
blank
2021年3月23日

このサイトは、あくまでもCMSであるWordPressの構築やクラウドであるAWSの運用ノウハウ取得  続きを読む

ElasticPress 3.5.6
blank
2021年3月19日

マイナーバージョンアップにも関わらず、検索スコアリングのパラメータが微調整された結果、期待する検索結  続きを読む

管理画面を制限する
blank
2021年2月22日

このサイトではネット上のさまざまな攻撃からの防御のため、Wordfenceプラグインの無料版を使用し  続きを読む

検索精度を高める
blank
2020年11月1日

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

スポンサーリンク

コメントを残す

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