俺流!バラとラン栽培

バラとランと WordPress に魅せられて!

順序のないリストにアイコンフォント(Genericons)を適用する

先日の投稿記事「【問題解決】アイコンフォント、Genericons が IE 11 で表示されない!」を記述する時に気が付いたのですが、本ブログで採用しているテーマ「Frontier」では、アイコンフォントの「「Genericons」を標準で装備していることを知りました。

20150308_genericons

この「Genericons」は、WordPress の標準テーマ「Twenty Fourteen」で標準装備されたらしいのですが、どうやらアイコンをフォントして表示することができるらしい!ましてや本ブログで採用している「Frontier」で標準装備しているのですが、使わない手はないでしょう!

先ずは、思い付いたのがタイトルページにリストしている「最新投稿記事」リストにアイコンフォントを適用します。参考にしたのは「イメージ画像を使わずにリストの行頭記号をカッコよく変える – AdSense実験室」という投稿記事。

上記に加え、具体的な利用方法は「アイコンフォントの具体的な使い方 – Genericons | Web Tips」が詳細を説明していますので、参考になると思います。

本ブログで採用しているテーマ「Frontier」では、以下のように設定されているようです。

実際にテーマファイルを確認すると以下のファイルが格納されています。

ファイル 備考
フォントファイル(.eot) 実際には、4 つのフォーマットのアイコンフォントがあるようですが、実装されているのは .eot ファイル。
genericons.css @font-faceとアイコン表示するためのクラスを記述しています。
LICENSE.txt フォントのライセンスを記述したファイルです。

実際に挿入した style.css は以下の通りです。オリジナルのスタイルを修正するためのコードも記述する必要があるため、ちょっと通常の sytle.css よりもコードが多いかもしれません。

リストには「recentpost」というクラスを設定することで、通常のリストの装飾とは区別するようにしています。投稿記事や固定ページでは、通常のリストにしたいので。実際に出力したサンプルを下に示しておきます。

  • リスト 1
  • リスト 2
  • リスト 3
  • リスト 4
  • リスト 5
  • リスト 6

通常、リストを上記のように混在させることはありませんが、あくまでも結果を確認するために示しています。上記リスト4、5、6 は「<li class="recentpost">~</li>」として記述しています。

【追記】
ちょっと気になるのは、上記とは別に以下のような記述が本ブログでは出力されています。

上記は、「Font Awesome」という別のアイコンフォントを利用できるようにしていること、更に jetpack というプラグインでは、上記と全く同じ「Genericons」を別のディレクトリーに格納しているということ・・・

特に問題は出ていないようですが、やっぱり気になりますよね~

関連する投稿記事リスト

下記に、本投稿記事と関連する投稿記事リストを自動生成しています。

自動生成は、投稿記事間の内容(80%)、カテゴリー(10%)、タグ(10%)を基準にして実施され、日付は公開日を示しています。ご興味があれば、是非、ご覧下さいませ。

Updated: 2015年03月08日 — 09:39

気楽にコメントして頂けますように!コメントは承認後の公開です。

* Copy This Password *

* Type Or Paste Password Here *

2,181スパムコメントは、これまでのところでブロックされたSpam Free Wordpress

「俺流!バラとラン栽培」Copyright © 2015-2016 by Zero Cool. All rights researved. Frontier Theme