【Gush2】サイドバーのSNSボタンの並びにfeedlyボタンを追加するカスタマイズ

   2015/07/21

(2015年7月21日追記)
アイコンフォントを使う方法を記事にしました。本記事より良い方法です。

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

以前にこんな記事を書いております。イマイチなカスタマイズです。 【Gush2】サイドバーのSNSボタンの並びにfeedlyボタンを追加する方法 ひと様のブログを見ていて、よく目にしていた緑色の「fee

 
Gush2サイドバーSNSアイコンfeedly有り
ひと様のブログを見ていて、よく目にしていた緑色の「feedly」ボタン。これだけ普及してるってことは、私のとこにも置いたほうがいいんだろうな~と思いながらも、ほったらかしになっていました。

そんな折、紺さんのツイートを見まして、重い腰を上げました。

「なぜにfeedlyが優勢なの?」って思っていたのだけど、「Googleリーダーが2013年7月で終了した」のが原因だったのですね。ネットブランクが長すぎて時代についていってない自分を再確認しちゃいましたよ。
ほったらかしにしてたのは、「RSSボタンあるからいいじゃん」って思ってたからでもあったのだけど、「早々にfeedlyボタンを追加しよう」という気になったのでした。
 
仕上がりはこんな感じです
Gush2サイドバーSNSアイコン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’」に変更しておきます。

ついでに、「title=”feedlyに登録”」を追加しておくと、アイコンにカーソルを置いたときに吹き出しチップが出るので、よいかもしれません。他のSNSアイコンはピンクに変わるけど、feedlyはピンクに変わらないので(^_^;)

title属性についてはこちらの記事を見てね:
リンクのtitle属性って、意味なかったのね。画像のalt属性は大事と私は思うけど。 | さらさらぶろぐ

sidebar.phpにコードを貼り付ける(リストの追加)

sidebar.phpの先頭のほうにSNSアイコンの記述があります。番号無しリスト「<ul>~</ul>」で記述されているので「<li>feedly用コード</li>」を追加します。<li></li>を書くのを忘れないでね!

表示位置を合わせる記述を、style.cssに追加

他のSNSアイコンといい感じに並ぶように、style.cssに記述を追加します。
すべての画面サイズで適用されるように「@media{}」の外側に書きます。先頭でもいいのですが、私は、「カスタマイズした分は後ろのほうに書く」ようにしてるので、一番後ろに入れました。

いまいちなところ

「アイコンにカーソルを載せたとき、ピンク色に変わる」ようにしたかったのだけど、難しそうなのであきらめました。Twitter等はアイコンフォントで、feedlyはimgだから、同じようにはできないのです。
Gush2のSNSアイコンは、Font Awesomeのアイコンフォントを使っているので、feedlyのアイコンも提供されていたならば、それを使いたかったのだけど、無かったのです。
アイコンフォントなら、サイズや表示位置の調整も必要なくて簡単なのにね~

(2015年7月21日追記)
アイコンフォントを使う方法を記事にしました。

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

以前にこんな記事を書いております。イマイチなカスタマイズです。 【Gush2】サイドバーのSNSボタンの並びにfeedlyボタンを追加する方法 ひと様のブログを見ていて、よく目にしていた緑色の「fee

まとめ

紺さんのツイートを見て、わりとすぐにカスタマイズしたので、もう1ヶ月ほど経ってますね。すぐに記事にしなかったので、何を試行錯誤したのか忘れちゃってて、結果だけを書くことになりました。
こうやって記事にすると、ちょこっとしたカスタマイズなんだけど、ボタンのサイズと表示位置の調整に数時間費やしてます(^_^;)
試行錯誤の過程に、次の人へのヒント「こういうとこ間違えやすいから注意ね!」とかあったりするのに、忘れちゃってるから書けなくて、もったいないです。
なんか、カスタマイズのまとめじゃなくて、記事が遅いことの反省になっちゃいました(^^ゞ

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

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

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

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