トイレのうず

WordPressにソーシャルボタンをFontelloのWebフォントを使って設置する方法

当記事はアフィリエイト広告を掲載しています。

高速化と Retina 対応のため、サイトの使っているアイコンを Web フォントにしました。 Web フォントとは SVG をフォント化してそれを CSS で表示させます。ベクター素材の SVG が元なので、画像などとは違い拡大してもエッジがきれいです。なので Retina 対応のディスプレイで見てもきれいに表示されます。

Font Awesome が有名だけど読み込むのが遅いので Fontello を使うことにした

Font Awesome というアイコンフォントのサービスが有名ですが、これを設置したところページの読み込み完了まで 20 秒もかかってしまったので、 Fontello にて必要なアイコンのみをまとめ、自分のサーバーに置くことにしました。 Font Awesome は CDN を使っているのですが、それでも重かったです。

→ Fontello

Fontello

あと Font Awesome にははてなブックマークと LINE のアイコンがありません。 Fontello は Font Awesome などのサービスから自分でアイコンを選べるほか、 SVG をアップロードしてフォントにも組み込めます。

足りないアイコンの SVG を用意する

まずははてなブックマークと LINE のアイコンの SVG ファイルを作成します。それぞれ公式からロゴファイルがダウンロードできます。今回は Mac の Sketch.app を使用して SVG を作成します。はてなブックマークについては EPS を Sketch.app でそのまま開き、不要な部分を削除したり非表示にします。 (SVG だとうまく編集できなかったです。)

SVG でアイコンを作成

パスが重なっている部分は重なっているパスを含むレイヤーを選択し、メニューから「 Edit 」→「 Combine 」→「 Difference 」を選択します。 Web フォントとして使うには全体を 1 色でベタ塗りする必要があります。最後に Export から SVG で保存します。

LINE は AI ファイルしかなく、直接 Sketch.app で開くことができません。一度プレビュー .app で開き印刷の方向を横に合わせて PDF に保存します。それを Sketch.app に読み込んで同じように加工し、 SVG に書き出します。

Fontello にて Web フォントにまとめる

Font Awesome 等から必要なフォントを選びます。

アイコンをドラッグ・アンド・ドロップ

用意した SVG を画面にドラッグ・アンド・ドロップしてアップロードし選択します。

これで右上部の「 Download 」をクリックすれば必要なファイルが手に入ります。以下は細かい設定です。設定しなくても使えます。

CSS で使う名前を変更

CSS のクラスで指定する名前が変えられます。 SVG をアップロードするときにファイル名をわかりにくい名前にしてしまった場合はここで変更できます。

クラスの接頭文字列を変更

先頭の「 icon- 」は上部のスパナアイコンから変更できます。

コードを変更

フォントのコードも変えられます。

サイトでの表示

ダウンロードして ZIP ファイルを解凍すると以下のような構成になっています。(アイコンは Fontello で作成したフォントアイコンを使用しました。)

  • fontello-xxxxxxxx
    • config.json
    • css
      • fontello.css
    • demo.html
    • font
    • LICENSE.txt
    • README.txt

このフォルダを fontello-icon と名前を変え、テーマフォルダの中に入れました。 Web フォントを表示するのに必要なのは css と font フォルダです。他のファイルはアップロードしなくても大丈夫です。(アイコンを追加した場合は config.json を Fontello のページにドラッグ・アンド・ドロップすると、同じ設定でフォントの追加や変更が可能です。)

ヘッダで CSS ファイルを読み込む

css/fontello.css ファイルを <head> で読み込みます。管理しやすいので function.php に以下のように付け加えました。

function add_fontello() {
	wp_enqueue_style( 'fontello', get_template_directory_uri() . '/fontello-icon/css/fontello.css', 'css-style', '1.0' );
}
add_action( 'wp_enqueue_scripts', 'add_fontello' );

クラスを指定すると表示される

クラス名を指定すると CSS の :before の擬似要素を使って表示されます。 aria-hidden="true" で装飾のためのアイコンでスクリーンリーダーに対して存在しないものとして認識させます。

<i class="fa icon-facebook" aria-hidden="true"></i>

 ←こんな感じに表示されます。

→ Qiita : Font-Awesome でアクセシビリティを確保しながらウェブフォントを活用する

WordPress に SNS ボタンを設置

以下のサイトを参考にしてアイコンフォントを使って SNS ボタンを作りました。アクセスビリティを考慮して一部コードを改良しました。ボタンには title 属性をつけました。

→ LIG.inc : PHP がわからなくても簡単! WordPress でオリジナルのソーシャルボタンを設置する方法

<aside>
	<ul class="social">
		<li class="fa"><a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php echo get_the_title(); ?>" target="_blank"><i class="fa icon-facebook" title="Facebook" aria-hidden="true"></i></a></li>
		<li class="go"><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank"><i class="fa icon-gplus" title="Google+" aria-hidden="true"></i></a></li>
		<li class="tw"><a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>" target="_blank"><i class="fa icon-twitter" title="twitter" aria-hidden="true"></i></a></li>
		<li class="ha"><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php echo get_the_title(); ?>" target="_blank"><i class="icon-hatenabookmark" title="Hatena Bookmark" aria-hidden="true"></i></a></li>
		<li class="li"><a href="http://line.me/R/msg/text/?<?php the_permalink(); ?>%0D%0A<?php echo get_the_title(); ?>" target="_blank"><i class="icon-line" title="LINE" aria-hidden="true"></i></a></li>
	</ul>
</aside>

CSS はこんな感じにしました。

.social {
	list-style: none;
	text-align: center;
	clear: both;
}

.social li{
	float: left;
	font-size: 1.6em;
	width: 2.4em;
	height: 2.4em;
	line-height: 2.4em;
	background: #999999;
	border-radius: 50%;
}

.social a{
	color: #ffffff;
	display:block;
	width: 100%;
	height: 100%;
}

WordPress が出力するリストに表示

WordPress が出力するカテゴリ一覧などのリストファイルに表示するには class を追加できないので、 css で :before の擬似要素の content プロパティにコードを指定しています。

.widget_categories li, .widget_mycategoryorder li{
	padding-left: 1.2em;
	line-height: 1.6em;
}
.widget_categories li:before, .widget_mycategoryorder li:before{
	content: "\f07b";
	font-family: fontello;
	color: #cccccc;
	padding-right: 0.2em;
	font-size: 1.2em;
	vertical-align: -0.2em;
	margin-left: -1.2em;
	speak: none;
}

音声読み上げを制御するために speak: none; プロパティをつけています。

→ E-riverstyle Vanguard :「 aria-hidden= ” true ”」と「 speak: none; 」

関連記事

WordPress 3.3.1 の投稿エディタのフォントを変更する
WordPress
WordPress 3.3.1で投稿エディタの全角と半角の区別がつかない
外部サイトの画像を WordPress のサイトアイコンに設定する
WordPress
ブログカードのサイトアイコンがWordPressのデフォルト
WordPress で「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」に対応する
WordPress
above the fold(ファーストビュー、スクロールせずに見える領域)
レスポンシブ対応画像の遅延読み込み時に再レンダリングされるのを防止する方法
WordPress
画像の高さが未指定だと画像遅延読み込みで再レンダリングされる
WordPress の Embed の head に不要な JavaScript や CSS が出力されるのを修正する
WordPress
thumbnail
ソーシャルブックマーク登録ボタン追加【 AddClips 】
WordPressWeb制作
thumbnail