【Gush2】サイドバーSNSボタンの「Feedly」をアイコンフォントにしたよ。ホバー色も変えてみたよ。

 

以前にこんな記事を書いております。イマイチなカスタマイズです。

【Gush2】サイドバーのSNSボタンの並びにfeedlyボタンを追加する方法

ひと様のブログを見ていて、よく目にしていた緑色の「feedly」ボタン。これだけ普及してるってことは、私のとこにも置いたほうがいいんだろうな~と思いながらも、ほったらかしになっていました。 そんな折、

最近、同じようなボタン並びをアイコンフォントで実現しているブログを見まして、さっそくマネしてみました。 

できあがりはこんな感じです。
サイドバーSNSボタン feedlyアイコンフォント

feedlyアイコンフォントを使う準備

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

feedlyのアイコンフォントを作ってみたら想像以上に簡単で笑えた件 – P N R A

どーも!中野区でホームページ作成をしている@PNRAです! ホームページ作成に携わっている方なら誰しもが活用するであろうアイコンフォント!つくづく便利です!有名どころでいえば、「font awesome」や「Foundation Icon Fonts」などが思い浮かびますが、…

PNRAさんが配布されているフォントをちょびっとサイズ調整しました。
そのまま使いたかったのですけど、FontAwesomeのアイコンと並べるとちょびっとずれてしまうので。
Gush2デフォルトのアイコンに並べたい方はこちら↓を使うとよいです。

icomoon.zip 18.5 KB

フォントとスタイルシートをアップロード

ダウンロードした「icomoon.zip」を展開して、フォントとスタイルシートをFTPでアップロードします。

テーマフォルダの下にicomoonディレクトリを作り、fontsディレクトリとstyle.cssをアップロードします。
私の場合は子テーマ(gush2-child)を作っているので、こんなふうになってます。

icomoonスタイルシート読み込み記述をheader.phpに追加

この1行をheader.phpに追加します。

コードを入れる場所は、FontAwesomeスタイルシート呼び出しの下にしました。Gush2デフォルトでは33行目にあります。34行目が追加した行です。

サイドバーSNSボタンの並びにfeedlyを追加

サイドバーSNSボタンの記述はsidebar.phpにあるので、そこにfeedlyの記述を追加します。

sidebar.phpに、feedlyの記述を追加

下記2行を、sidebar.phpに追加します。

今回は、Google+とRSSの間に置きました。

ホバー色を変えたい場合は、こちら↑ではなく、後述↓のコードをお使いください。

ホバーの色を変えたい場合

ホバーというのは、カーソルを乗せたときの状態を表す言葉です。
Gush2デフォルトのSNSボタンのホバーの色はピンクです。
今回、ボタンごとにそれらしい色にしてみました。
(ツイッターは公式の#55aceeにしてます。他は色取得でテキトーに)

style.cssに、ホバー色用のクラス定義を追加

style.cssに、ホバー色を指定する記述(クラス定義)を追加します。
もともとのホバーの記述の後ろに追加します。Gush2デフォルトのstyle.cssであれば1149~1152行目にホバーの記述はあります。

sidebar.phpに、クラスを指定する記述を追加

sidebar.phpでは、style.cssで定義したクラスを呼び出します。これで色が変わります。
下記のように、クラスを指定する記述を追加します。

まとめ

FontAwesomeとicomoonでフォントの仕様が違うため、表示ずれが発生しました。今回は、feedlyアイコンをちょこっと加工することでごまかしちゃいました。フォントサイズを変えたりすると、別のずれが生じるかもしれません。

icomoonの使い方は、下記のサイトを参考にさせていただきました。
Webフォントを使ったSNSアイコンの作り方【はてぶ/Pocket/Feedly/LINE】 |JunkBlog
自作のWEBアイコンフォントの作り方(無料ツールのみでfeedlyフォントを作る) |寝ログ
アイコン型ウェブフォントを利用して CSS で装飾した SNS ボタンを設置する方法 | キャリコ
ありがとうございました。

  • このエントリーをはてなブックマークに追加
  • Pocket
書いてる人 さらさらり
お里湯さんのひよこ|ぴよたそ

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。