【Gush2】サイドバーのSNSボタンの並びにfeedlyボタンを追加するカスタマイズ
アイコンフォントを使う方法を記事にしました。本記事より良い方法です。
【Gush2】サイドバーSNSボタンの「Feedly」をアイコンフォントにしたよ。ホバー色も変えてみたよ。
以前にこんな記事を書いております。イマイチなカスタマイズです。 【Gush2】サイドバーのSNSボタンの並びにfeedlyボタンを追加する方法 ひと様のブログを見ていて、よく目にしていた緑色の「fee
ひと様のブログを見ていて、よく目にしていた緑色の「feedly」ボタン。これだけ普及してるってことは、私のとこにも置いたほうがいいんだろうな～と思いながらも、ほったらかしになっていました。
そんな折、紺さんのツイートを見まして、重い腰を上げました。
本当に5分で出来ました（*´▽｀*）＞5分で終わり！Feedlyに登録する【Feedly Button】をブログに設定する手順 http://t.co/dd8FZOAnlw @ViralClubさんから
— 紺_もりもり (@kon_guutara) 2015, 5月 11
「なぜにfeedlyが優勢なの？」って思っていたのだけど、「Googleリーダーが2013年7月で終了した」のが原因だったのですね。ネットブランクが長すぎて時代についていってない自分を再確認しちゃいましたよ。
ほったらかしにしてたのは、「RSSボタンあるからいいじゃん」って思ってたからでもあったのだけど、「早々にfeedlyボタンを追加しよう」という気になったのでした。
仕上がりはこんな感じです
目次
feedlyに登録して、ソースコードを取得
まずは、feedlyに登録します。このとき、黒いボタンを選びましょう。（Gush2に合わせてグレーのボタンを作ってみようとしたけど、透明レイヤーでプロテクトされていて、加工できませんでした(T_T)）
登録はこちらの公式ページで→ feedly. your news. delivered.
登録方法はこちらのサイトを見てね：
5分で終わり！Feedlyに登録する【Feedly Button】をブログに設定する手順
WordPressでFeedlyとRSS設定＆ボタンを設置する方法 | -think the web-
取得したソースコードを、sideber.phpに追加
ボタンサイズを30pxに変更しておく
Gush2のデフォルトアイコン（Twitterとか）に合わせるため、サイズを30pxにします。
取得したコードの中に、「width=’28’ height=’28’」という記述があるので、これを、「width=’30’ height=’30’」に変更しておきます。
|
1 2 3 |
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwpblog.sara2jp.com%2F' target='blank'> <img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-logo-black_2x.png' alt='follow us in feedly' width='28' height='28'></a> |
ついでに、「title=”feedlyに登録”」を追加しておくと、アイコンにカーソルを置いたときに吹き出しチップが出るので、よいかもしれません。他のSNSアイコンはピンクに変わるけど、feedlyはピンクに変わらないので(^_^;)
title属性についてはこちらの記事を見てね：
リンクのtitle属性って、意味なかったのね。画像のalt属性は大事と私は思うけど。 | さらさらぶろぐ
sidebar.phpの先頭のほうにSNSアイコンの記述があります。番号無しリスト「<ul>～</ul>」で記述されているので「<li>feedly用コード</li>」を追加します。<li></li>を書くのを忘れないでね！
|
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/" target="_blank"><i class="fa fa-twitter"></i> </a></li> <li><a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i> </a></li> <li><a href="https://www.google.com/" target="_blank"><i class="fa fa-google-plus"></i> </a></li> <li><a href="<?php echo home_url();?>/feed/" target="_blank"><i class="fa fa-rss"></i> </a></li> <li>【ここに取得＆加工したfeedly用コードを貼り付ける】 </li> </ul> </div> |
表示位置を合わせる記述を、style.cssに追加
他のSNSアイコンといい感じに並ぶように、style.cssに記述を追加します。
すべての画面サイズで適用されるように「@media{}」の外側に書きます。先頭でもいいのですが、私は、「カスタマイズした分は後ろのほうに書く」ようにしてるので、一番後ろに入れました。
|
2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 |
}/* PC表示ここまで */ img#feedlyFollow { margin: 0.3em 0.5em 0 0; vertical-align: baseline; } /*-------------------------------------- カスタマイズおつかれさまでした！ 不具合があればご連絡ください^^ Ellora --------------------------------------*/ |
いまいちなところ
「アイコンにカーソルを載せたとき、ピンク色に変わる」ようにしたかったのだけど、難しそうなのであきらめました。Twitter等はアイコンフォントで、feedlyはimgだから、同じようにはできないのです。
Gush2のSNSアイコンは、Font Awesomeのアイコンフォントを使っているので、feedlyのアイコンも提供されていたならば、それを使いたかったのだけど、無かったのです。
アイコンフォントなら、サイズや表示位置の調整も必要なくて簡単なのにね～
アイコンフォントを使う方法を記事にしました。
【Gush2】サイドバーSNSボタンの「Feedly」をアイコンフォントにしたよ。ホバー色も変えてみたよ。
以前にこんな記事を書いております。イマイチなカスタマイズです。 【Gush2】サイドバーのSNSボタンの並びにfeedlyボタンを追加する方法 ひと様のブログを見ていて、よく目にしていた緑色の「fee
まとめ
紺さんのツイートを見て、わりとすぐにカスタマイズしたので、もう１ヶ月ほど経ってますね。すぐに記事にしなかったので、何を試行錯誤したのか忘れちゃってて、結果だけを書くことになりました。
こうやって記事にすると、ちょこっとしたカスタマイズなんだけど、ボタンのサイズと表示位置の調整に数時間費やしてます(^_^;)
試行錯誤の過程に、次の人へのヒント「こういうとこ間違えやすいから注意ね！」とかあったりするのに、忘れちゃってるから書けなくて、もったいないです。
なんか、カスタマイズのまとめじゃなくて、記事が遅いことの反省になっちゃいました(^^ゞ
この記事へのコメントはこちら