2014/06/1020 Shares

Stingerサイドバーにさりげない気遣いを。アイコンフォントの使い方

サイン

エローラ(@uszero800)です。本日のStingerカスタマイズは、サイドバーのタイトル部分

単に装飾を変えるならCSSをいじるだけですが、もう一歩踏み込んで画像を使わないアイコン表示にチャレンジしてみましょう。

タイトル部分のビフォーアフター

もともとはこのようになっています。

Stinger3サイドバービフォー画像

左の矢印アイコンは画像。小さいので特に負荷がかかっているわけではありません。このまま流用したい場合は、フォントの色やボーダーを加えるだけでも印象が変わります。

今回は、このように改造してみます。

Stinger3サイドバーアフター画像

アイコンはアイコンフォントを使用しています。画像のように見えますが実はテキストなんです。

ブログを表示する際にフォントを読み込むという手間が加わるので、小さな画像を入れるよりちょっと重くなるかもしれません。でも、サイズや色を自由に変えられるというメリットがあるのでぜひお試しください。

それでは、さっそくカスタマイズ方法をご紹介します。

サイドバータイトル変更手順

Ligature Symbolsアイコンフォントのサンプル

今回使用したのは、こちらのアイコン。はてなブックマークやLINEなんかもあります。

Ligature Symbols
Ligature Symbols

はてなブックマークアイコン はてなブックマークアイコン表示例(50px青)

<span style="font-family: 'LigatureSymbols';font-size: 50px;color: #000c69;">hatenabookmark</span>

WordPressアイコン Wordpressアイコン表示例(50px赤)

<span style="font-family: 'LigatureSymbols';font-size: 50px;color: #820000;">wordpress</span>

ただの文字列なので、コピペしてもテキストになります(IEは表示されていないかも。ごめんなさい)。

追記アイコンフォントの使用を一時中止しているため、イメージ画像を表示しています。

ダウンロードとアップロード

まず、上記サイトからファイル一式ダウンロードし、解凍します。

アイコンフォントダウンロード

お次は、サーバへアップロード。
アップロードするのは、下記の5種類。

LigatureSymbols-2.11.eot
LigatureSymbols-2.11.svg
LigatureSymbols-2.11.woff
LigatureSymbols-2.11.otf
LigatureSymbols-2.11.ttf

アップロード先は、Stinger3のフォルダです。

FTPソフトから[wp-content]-[themes]-[stinger3ver○○○]と進んでください(○○○は利用バージョン文字列)。

新たに「fonts」というフォルダを作ってその中に5種類のファイルをアップ。

FFFTPのイメージはこのようになります。

FFFTPイメージ

フォントを読み込む設定方法

CSSに下記の記述を挿入します。

@font-face {
	font-family: 'LigatureSymbols';
	src: url('./fonts/LigatureSymbols-2.11.eot');
	src: url('./fonts/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
	url('./fonts/LigatureSymbols-2.11.woff') format('woff'),
	url('./fonts/LigatureSymbols-2.11.ttf') format('truetype'),
	url('./fonts/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
	src: url('./fonts/LigatureSymbols-2.11.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

最初のほうに挿入しました。こんな感じになります。

/*---------------------------------------------------------
Theme Name: stinger3ver20131023
Theme URI: http://stinger3.com
Description: stinger3
Author: enji
Author URI: http://stinger3.com
License:
License URI:
Version: 20131023
---------------------------------------------------------*/
@charset "UTF-8";
@font-face {
	font-family: 'LigatureSymbols';
	src: url('./fonts/LigatureSymbols-2.11.eot');
	src: url('./fonts/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
	url('./fonts/LigatureSymbols-2.11.woff') format('woff'),
	url('./fonts/LigatureSymbols-2.11.ttf') format('truetype'),
	url('./fonts/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
	src: url('./fonts/LigatureSymbols-2.11.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

完了したら、このフォントを読み込む場所をCSSで指定します。記事内で使用する場合は、先ほどの表示例をご参考に。

:beforeを使ってタイトル前にアイコンを追加

サイドバーのタイトル部分はここで装飾されています。

.menu_underh2 {
	margin-bottom: 20px;
	margin-top: 20px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	background-image: url(images/ca3.png);
	background-repeat: no-repeat;
	background-position: left center;
}

画像の読み込みを消して、左側の余白を調整。下線を加えます。

.menu_underh2 {
	margin-bottom: 20px;
	margin-top: 20px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	color: #820000;
	border-bottom: 1px solid #820000;
	font-weight: bold;
}

つづいて、「:before」という要素を加えたクラスを追加します。

.menu_underh2:before {
	font-family: 'LigatureSymbols';
	content: '\E038';
	margin-right: .3em;
	color: #111;
	font-size: 30px;
	font-weight: normal;
	-webkit-text-rendering: optimizeLegibility;
	-moz-text-rendering: optimizeLegibility;
	-ms-text-rendering: optimizeLegibility;
	-o-text-rendering: optimizeLegibility;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-ms-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

3行目のcontent内は、アイコンフォントのユニコードです。ダウンロードしたサイトに一覧表があるので、使いたいアイコンのユニコードをコピペしてください。

フォントなので、色や大きさは自由に変えられます。

以上で完成です。おつかれさまでした。

まとめ:CSSスプライトもあるよ

アイコンフォントはブラウザによって対応がまちまちなので、どの環境でも同じように表現したいなら画像を使うのが一番です。

画像を使用してなおかつ軽さを求めるのであれば、CSSスプライトという方法もあります。更新作業が面倒なので、デザインが固まった後に適用すると良いかも。

いろいろ試してみて自分にベストな方法を見つけてください。

それでは、また。