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

2015/07/21

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

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

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

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

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

1 feedlyアイコンフォントを使う準備
2 サイドバーSNSボタンの並びにfeedlyを追加
- 2.1 sidebar.phpに、feedlyの記述を追加
3 ホバーの色を変えたい場合
- 3.1 style.cssに、ホバー色用のクラス定義を追加
- 3.2 sidebar.phpに、クラスを指定する記述を追加
4 まとめ

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）を作っているので、こんなふうになってます。

wp-content/themes/gush2-child/icomoon/fonts/icomoon.eot
                                           /icomoon.svg
                                           /icomoon.ttf
                                           /icomoon.woff
                                     /style.css

wp-content/themes/gush2-child/icomoon/fonts/icomoon.eot

/icomoon.svg

/icomoon.ttf

/icomoon.woff

/style.css

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

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

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/icomoon/style.css">

1	<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/icomoon/style.css">

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

<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" media="all" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/icomoon/style.css">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5shiv.js" charset="UTF-8"></script>

<!--[if lt IE 9]>

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

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

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

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

<li><a href="http://cloud.feedly.com/#subscription/feed/<?php echo home_url();?>/feed/"  target="blank"><i class="fa icon-feedly"></i>
</a></li>

1 2	<li><a href="http://cloud.feedly.com/#subscription/feed/<?php echo home_url();?>/feed/" target="blank"><i class="fa icon-feedly"></i> </a></li>

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

<!--アイコン-->
<div class="side-sns">
<!-- thnx! http://www.iconsdb.com/ -->
<ul>
<li><a href="https://twitter.com/【自分のツイッターID】" target="_blank"><i class="fa fa-twitter"></i>
</a></li>
<li><a href="https://www.facebook.com/【自分のフェイスブックID】" target="_blank"><i class="fa fa-facebook"></i>
</a></li>
<li><a href="https://plus.google.com/u/0/【自分のグーグルプラスID】" target="_blank"><i class="fa fa-google-plus"></i>
</a></li>
<li><a href="http://cloud.feedly.com/#subscription/feed/<?php echo home_url();?>/feed/"  target="blank"><i class="fa icon-feedly"></i>
</a></li>
<li><a href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i>
</a></li>
</ul>
</div>

<ul>

</a></li>

</a></li>

</a></li>

<li><a href="http://cloud.feedly.com/#subscription/feed/<?php echo home_url();?>/feed/" target="blank"><i class="fa icon-feedly"></i>

</a></li>

<li><a href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i>

</a></li>

</ul>

</div>

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

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

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

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

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

#sub .side-sns ul li a:hover {
	color: #ff7ddf;
	text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}
#sub .side-sns ul li a:hover.sns-twitter {
	color : #55acee ;
}
#sub .side-sns ul li a:hover.sns-facebook {
	color : #3b579d ;
}
#sub .side-sns ul li a:hover.sns-google-plus {
	color : #dd4b39 ;
}
#sub .side-sns ul li a:hover.sns-feedly {
	color : #87c040 ;
}
#sub .side-sns ul li a:hover.sns-rss {
	color : #fa9f39 ;
}
/*-----------------------------------
  サイドバーウィジェット

1149

1150

1151

1152

1153

1154

1155

1156

1157

1158

1159

1160

1161

1162

1163

1164

1165

1166

1167

1168

1169

#sub .side-sns ul li a:hover {

color: #ff7ddf;

text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);

}

#sub .side-sns ul li a:hover.sns-twitter {

color : #55acee ;

}

#sub .side-sns ul li a:hover.sns-facebook {

color : #3b579d ;

}

#sub .side-sns ul li a:hover.sns-google-plus {

color : #dd4b39 ;

}

#sub .side-sns ul li a:hover.sns-feedly {

color : #87c040 ;

}

#sub .side-sns ul li a:hover.sns-rss {

color : #fa9f39 ;

}

/*-----------------------------------

サイドバーウィジェット

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

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

<!--アイコン-->
<div class="side-sns">
<!-- thnx! http://www.iconsdb.com/ -->
<ul>
<li><a class="sns-twitter" href="https://twitter.com/【自分のツイッターID】" target="_blank"><i class="fa fa-twitter"></i>
</a></li>
<li><a class="sns-facebook" href="https://www.facebook.com/【自分のフェイスブックID】" target="_blank"><i class="fa fa-facebook"></i>
</a></li>
<li><a class="sns-google-plus" href="https://plus.google.com/u/0/【自分のグーグルプラスID】" target="_blank"><i class="fa fa-google-plus"></i>
</a></li>
<li><a class="sns-feedly" href="http://cloud.feedly.com/#subscription/feed/<?php echo home_url();?>/feed/"  target="blank"><i class="fa icon-feedly"></i>
</a></li>
<li><a class="sns-rss" href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i>
</a></li>
</ul>
</div>

<ul>

</a></li>

</a></li>

</a></li>

<li><a class="sns-feedly" href="http://cloud.feedly.com/#subscription/feed/<?php echo home_url();?>/feed/" target="blank"><i class="fa icon-feedly"></i>

</a></li>

<li><a class="sns-rss" href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i>

</a></li>

</ul>

</div>

まとめ

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

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

on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。初めまして。同感です。こんなに良いのに、なんでみんな使わないの？？って思いますよね。確かにフォントは、初期状態ではちょっと… そのあたりがもうちょっと何とかなれば最高なんですけどね。ＣＳＳの解説ありがとうございます、参考にさせていただきますね♪
on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。bloggerは僕もオススメです( ´ ▽ ` )ﾉ本当シーサーブログは広告多いですね( ´ ▽ ` )ﾉ
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）TN0816さまご訪問ありがとうございます。キーワード検索の下に表示されるのは、サイド広告300pxです。外観＞ウィジェット＞サイド広告300px に、広告コードを書いているのではないでしょうか？
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）このブログとても参考になりました！１つわからないところがあるのですが、ここに書かれているとおりにやったのですが、サイドバーのキーワード検索の下にもも広告が表示されてしまい、どうしたらいいのかわからなくて困っています。アドセンスはメイン上部にレスポンシブ広告を入れて、記事下左と記事下右に300×250を入れています。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。a cattle northern さまくわしい情報をありがとうございます。なるほど。怪物レベルでなければ、ポイントで受け取る分が必ずあるのですね。「ポイントで楽天市場で買い物してね」ってことなのでしょうね。楽天市場を使ってない人は『もしも』がいいですね。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。楽天アフィですが、１ヶ月で３０００円以上は、３０００ポイントを楽天ポイントで＋超過分を楽天銀行振込１ヶ月で３０００円未満は楽天ポイントで支給となります。毎月１０万以上確実で全額銀行振込となりますが、そんな怪物は・・・・・。楽天市場を使うのでなければ、もしもの方がいいと思いますよ。

さらさらぶろぐ

アフィリエイトのことを書くつもりで始めたけど、WordPressやGush2のことを書いちゃってます。

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

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

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

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

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

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

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

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

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

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

まとめ

関連記事-こちらもどうぞ

この記事へのコメントはこちらコメントをキャンセル

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

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

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

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

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

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

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

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

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

まとめ

関連記事-こちらもどうぞ

この記事へのコメントはこちら コメントをキャンセル

この記事へのコメントはこちらコメントをキャンセル