Webアイコン「Genericons」の使い方と無効化したい場合の方法

Tweet

Pocket

WordPressのstyle.cssを眺めていると、contentプロパティに『\f502』というようなエスケープ文字の入った値に気づくかと思います。
これはエスケープしてるわけでなく、Webアイコン「Genericons」の指定方法です。
ちなみにGenericonのライセンスはGPLです。
これを使えばSVG（スケーラブルベクターグラフィック）でできたサイズの可変自在なアイコンを、簡単お手軽にテキストの前や後に表示することが可能です。
アルファベット一文字に対して一つのアイコンを設定し、CCSで文字としてアイコンを表示させるアイコンフォントとは違いますのでご注意を。アイコンフォントは別の機会に。

Genericonsの設定方法

1. サイトのディレクトリに配置
自分で本家サーバーからダウンロードした場合は任意のフォルダに配置する。
その際、アクセス権限に注意
WordPressのオリジナルテーマTwentythirteenの場合、デフォルトではfunctions.phpのLine:180あたりで以下を実行し、genericons.cssを読込んでいます。

// Add Genericons font, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/fonts/genericons.css', array(), '2.09' );

マニュアルで挿入するなら以下のようにタグで読込んでください。

<link href="GenericonsのCSSファイルへのパス" rel="stylesheet" media="screen">

※ CSSファイルは、テーマフォルダ内の「/fonts/genericons.css」です。

2. 対象のCSSクラスに表示したいアイコンを指定

.genericon:before {
  /* 表示すべきアイコンの番号 */
  content: “\f502”;
  /* アイコンのサイズ */
  font: normal 16px/1 Genericons;
}

fontプロパティでサイズを変更しても、実体がSVGなのでキレイに表示されます。

Contentプロパティ自体は名前の通り、指定要素の直前もしくは直後に文字や画像などのコンテンツを挿入するもので、:beforeまたは:after擬似要素の場合に限って使用できます。
:beforeの場合はテキストの前に、:afterの場合はテキストの後に配置されます。

twentythirteenデフォルトのGenericonsを無効にしたい時

子テーマ内のfunctions.phpへ以下の内容を記述。

function noexe_genericons() {
  wp_dequeue_style( ‘genericons’ );
}
add_action( ‘wp_enqueue_scripts’, ‘noexe_genericons’, 10 );

Tweet

Pocket