Simplicity のフォローボタンを自作しました。
この記事は2014年11月23日に書かれたものです。ご注意ください。
あたらしく、ニコニコ動画へのリンクボタンを作成しました。
前回の記事ではFont Awesome IconsというサイトのWEBフォントを使用して、フォローボタンを追加しました。
しかし、このWEBフォントには外国でよく使われるサイトしかありません。
そのため今回は「ニコニコ動画」のWEBフォントを作成し、追加させました。
WEBフォントの作り方。
まずは欲しいWEBフォントを自作するところから始まります。
私はこのテーマ"Simplicity"を作成された方のブログを参考にしました。
自作のWEBアイコンフォントの作り方（無料ツールのみでfeedlyフォントを作る）
WEBフォントの作成から設置まで、お世話になった記事です。
おそらく、この記事を見て頂ければWEBフォントの作成まではスムーズに進むと思います。
WEBフォントの設置。
作成されたフォントを、テーマに入れ込みます。
素人の手探りで行ったので、もっと良い方法があるかもしれません……。
WEBフォントファイルを移動させる。
“icomoon"フォルダー内の"fonts"フォルダーを"fonts1″にリネームします。
これを"simplicity/webfonts/icomoon"へ入れます。
これでフォントの準備は完了です。
CSSを弄る。
WEBサイトに追加したWEBフォントが反映されるようにCSSを弄っていきます。
ここの書き方は、自作したWEBフォント"icomoon"フォルダー内にある”style.css”を参考に記入してみてください。
simplicity/webfonts/icomoon/style.css@font-face {
font-family: 'icomoon';
src:url('fonts1/icomoon.eot?-azamln');
src:url('fonts1/icomoon.eot?#iefix-azamln') format('embedded-opentype'),
url('fonts1/icomoon.woff?-azamln') format('woff'),
url('fonts1/icomoon.ttf?-azamln') format('truetype'),
url('fonts1/icomoon.svg?-azamln#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-nico-square:before {
content: "\e700";
}実際に設置してみる。
あとは先日の記事で記載したとおりに、自分でphpやcssを編集してフォローボタンを追加してみてください。
ただし、前回はからWEBフォントを参照していましたが、今回は別の場所からなので少しコードが変わっています。
simplicity/sns-pages.php<?php if ( get_nico_follow_id() )://ニコニコ動画フォローボタンを表示するか ?>
<li class="nico-page">
<a href="http://www.nicovideo.jp/user/<?php echo esc_html( get_nico_follow_id() ); //ニコニコ動画フォローIDの取得?>" " target="_blank" title="ニコニコ動画でフォロー" rel="nofollow">
<i class="icon-nico-square"></i>
</a>
</li>
<?php endif; ?>
Simplicity のフォローボタンを増やしてみました。
フォローボタンの追加、増やす方法に関してはこちらも参考にしてみてください。
〆
2時間くらい悩みに悩んで、別ファイルとして追加することには成功しました。
ただ、複数のフォントファイルを参照しているので少し重たくなってしまいますね……。
できれば複数のフォントファイルを1つにまとめられたら最高なのですが、難しい。
現在は「Font Awesome Icons」「Simplicityのデフォルト」「自作のフォント」この3種類で、自作に関しては増やしたくなったらその都度ファイルを更新させれば良いので大きな弊害にはなりづらいかも？
今後は考えなければいけない点かもしれませんが。
今日はここを更新したかったので満足です。
他にも追加したいボタンがあれば作っていきます！