ウサヲブログ  HOME

ウェブ制作に関わる備忘録などを綴ります

このページの位置: HomeWordpress「wp_list_categoryのリストスタイルにウェブフォントを設置」の記事

wp_list_categoryのリストスタイルにウェブフォントを設置

フォントオウサムへのリンク

ウサヲです。

サイドバーのカテゴリ一覧の左端に、リストのポッチンマーク「・」に代わり、Font Awesomeツールで見つけたウェブフォントを使いたくってウサヲが試した方法です。完成品はこんな感じ↓。

スクリーンショット 2016-06-23 9.20.45

やりたいこと

  1. wp_list_categories()を使ってカテゴリーリストを表示します。
  2. そのリストの前にFont Awesomeツールで見つけた画像を擬似要素として表示したいのです。

やったこと

<i>Font Awesomeツールのクラス</i>をソースに挿入したかったのですが、それをするにはwp_list_categories()のソースコードを解析せねばならず、その気力がなく途中で断念。

そこで、Font Awesomeツールの擬似要素とクラスに展開されるcssを拾ってきて、それを自分のstyle.cssにぶち込んでみた。

以下、参考css。

#sidebar .listItem li:before {
 content: "\f115";
 margin-left: -.65em;
 padding-right: 3px;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
 text-rendering: auto;

 

ウサヲが本当にやりたかったことはコチラ

ウェブフォントの<i>タグをソースの<a>タグの内部にぶち込んで、ウェブフォントも一挙まとめてリンク先に指定したかった・・。でもでもできなかった・・。ウサヲ、撃沈。

結局は・・

ウェブフォント自体も<a>で囲むことができなかったので、この作業自体をやめることにしました・・。

結局今のウサヲブログのサイドバーをご覧の通り、サイドバーのタイトルにだけウェブフォントを使うことで収まりました。デザインもこちらの方がすっきりしているようで・・。費やした時間は糧になったと信じて書きました。

コメントを残す

日本語でお願いします。「テスト投稿」のような短い文は無視されます。

TOP