【STINGER5】ヘッダーにfeedlyフォローボタンも追加してみました

前回、ヘッダー部分の右側にWEBアイコンフォントを使ってフォローボタンを設置してみたことを記事にしました。

便利なWEBアイコンフォントですが、すべてのフォントデザインがそろっているわけではありません。今回の作業で気づいたことは、Font AwesomeのWEBフォントにfeedlyのアイコンフォントがないことです。FacebookやTwitterなど、WEB上でよく見かけるロゴのアイコンはありましたが、feedlyのものはありません。

でも、feedlyフォローボタンも置きたい。そこで、調べて結果、Simplicityの作者わいひら(yhira)さんがフォントを自作しているのを見つけました。

スポンサーリンク

feedlyフォローボタンのWEBフォントデータの入手方法

自作のWEBアイコンフォントの作り方(無料ツールのみでfeedlyフォントを作る)

最近は、その便利さからWEBアイコンフォント(以下、アイコンフォント)を利用したサイトが増えています。 アイコンフォントは、CSSで色や大きさを指定出来るし、画像と違い大きさが変わったからといって、表

nelog.jp

まず、このサイト公開されているfontデータをダウンロードします。それから、サーバー上でSTINGER5のstyle.cssを置いているフォルダーにインストールしました。

スポンサーリンク

style.cssとheader.phpの記述内容の変更

style.cssに追加した記述

次に行ったことは、このサイトに書いてあった次のstyle.cssをSTINGER5のstyle.cssに追加することです。

[html]
@font-face {
font-family: ‘icomoon’;
src:url(‘fonts/icomoon.eot?t154j0’);
src:url(‘fonts/icomoon.eot?#iefixt154j0’) format(‘embedded-opentype’),
url(‘fonts/icomoon.woff?t154j0’) format(‘woff’),
url(‘fonts/icomoon.ttf?t154j0’) format(‘truetype’),
url(‘fonts/icomoon.svg?t154j0#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-feedly:before {
content: "\e600";
}
.icon-feedly-square:before {
content: "\e601";
}
[/html]

header.phpに追加した記述

その後、feedlyアイコンが表示できるように、header.phpに次の記述を追加しました(ブログのURLはご自身のものに書き換えてくださいね)。

[html]
<li><a href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fbibalogue.com%2Ffeed%2F" target="_blank">
<i class="icon-feedly-square" style="color:#222222; font-size: 85%; " >
</i></a></li>
[/html]

アイコンフォントの大きさは、Simplicityの作者わいひら(yhira)さんの指示通り85%にして表示するようにしました。また、色も黒系になるように変更しました。

これで間違いがないのか不安なところもあるのですが、思い通りにfeedlyボタンが表示できるようになったのでとりあえずは満足しています。