【Gush2】サイドバーSNSボタンの「Feedly」をアイコンフォントにしたよ。ホバー色も変えてみたよ。
以前にこんな記事を書いております。イマイチなカスタマイズです。
【Gush2】サイドバーのSNSボタンの並びにfeedlyボタンを追加する方法
ひと様のブログを見ていて、よく目にしていた緑色の「feedly」ボタン。これだけ普及してるってことは、私のとこにも置いたほうがいいんだろうな~と思いながらも、ほったらかしになっていました。 そんな折、
最近、同じようなボタン並びをアイコンフォントで実現しているブログを見まして、さっそくマネしてみました。
できあがりはこんな感じです。
目次
feedlyアイコンフォントを使う準備
アイコンフォントをダウンロード
feedlyのアイコンフォントを作ってみたら想像以上に簡単で笑えた件 – P N R A
どーも!中野区でホームページ作成をしている@PNRAです! ホームページ作成に携わっている方なら誰しもが活用するであろうアイコンフォント!つくづく便利です!有名どころでいえば、「font awesome」や「Foundation Icon Fonts」などが思い浮かびますが、…
PNRAさんが配布されているフォントをちょびっとサイズ調整しました。
そのまま使いたかったのですけど、FontAwesomeのアイコンと並べるとちょびっとずれてしまうので。
Gush2デフォルトのアイコンに並べたい方はこちら↓を使うとよいです。
フォントとスタイルシートをアップロード
ダウンロードした「icomoon.zip」を展開して、フォントとスタイルシートをFTPでアップロードします。
テーマフォルダの下にicomoonディレクトリを作り、fontsディレクトリとstyle.cssをアップロードします。
私の場合は子テーマ(gush2-child)を作っているので、こんなふうになってます。
1 2 3 4 5 |
wp-content/themes/gush2-child/icomoon/fonts/icomoon.eot /icomoon.svg /icomoon.ttf /icomoon.woff /style.css |
icomoonスタイルシート読み込み記述をheader.phpに追加
この1行をheader.phpに追加します。
1 |
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/icomoon/style.css"> |
コードを入れる場所は、FontAwesomeスタイルシート呼び出しの下にしました。Gush2デフォルトでは33行目にあります。34行目が追加した行です。
32 33 34 35 36 |
<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> |
サイドバーSNSボタンの並びにfeedlyを追加
サイドバーSNSボタンの記述はsidebar.phpにあるので、そこにfeedlyの記述を追加します。
下記2行を、sidebar.phpに追加します。
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の間に置きました。
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!--アイコン--> <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> |
ホバー色を変えたい場合は、こちら↑ではなく、後述↓のコードをお使いください。
ホバーの色を変えたい場合
ホバーというのは、カーソルを乗せたときの状態を表す言葉です。
Gush2デフォルトのSNSボタンのホバーの色はピンクです。
今回、ボタンごとにそれらしい色にしてみました。
(ツイッターは公式の#55aceeにしてます。他は色取得でテキトーに)
style.cssに、ホバー色用のクラス定義を追加
style.cssに、ホバー色を指定する記述(クラス定義)を追加します。
もともとのホバーの記述の後ろに追加します。Gush2デフォルトのstyle.cssであれば1149~1152行目にホバーの記述はあります。
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では、style.cssで定義したクラスを呼び出します。これで色が変わります。
下記のように、クラスを指定する記述を追加します。
5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!--アイコン--> <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> |
まとめ
FontAwesomeとicomoonでフォントの仕様が違うため、表示ずれが発生しました。今回は、feedlyアイコンをちょこっと加工することでごまかしちゃいました。フォントサイズを変えたりすると、別のずれが生じるかもしれません。
icomoonの使い方は、下記のサイトを参考にさせていただきました。
Webフォントを使ったSNSアイコンの作り方【はてぶ/Pocket/Feedly/LINE】 |JunkBlog
自作のWEBアイコンフォントの作り方(無料ツールのみでfeedlyフォントを作る) |寝ログ
アイコン型ウェブフォントを利用して CSS で装飾した SNS ボタンを設置する方法 | キャリコ
ありがとうございました。
この記事へのコメントはこちら