モカどっとこむ

WordPressのcustomize、iPhoneやPC、アフィリエイトなどのジャンルを中心にブログを更新中。投資に関する情報(FX、投資信託)も記事にしています。

WordPress全般

【STINGER5】サイドバーにSNSフォローボタンを追加してみよう

snsボタン-5

SPONSORD LINK

こんなSNSフォローボタンを探し続けて一週間。ようやくカスタマイズに成功しました。今回は「ちゅんこ」さんのサイトを参考に「Google+」を「Feedly」へと修正しましたので、そのやり方をご紹介したいと思います。

当ブログで利用していない「Google+」を「Feedly」へ変更

モカは「Google+」は利用していません。有名ブロガーの方々は大抵使っているみたいですが、今のところブログ記事を書いたり、Twitterすらまともに活用出来ていないので、利用するのはもう少し先になりそうだなぁという事でカスタマイズする事にしました。

▼本家、ちゅんこさんのサイトで紹介しているフォローボタン

snsボタン-6▼モカがカスタマイズしたフォローボタンsnsボタン-5

「Google+」を消して、「RSS」を元に「Feedly」を追加しました。

SPONSORD LINK

フォローボタンを作成してみよう!

今回は「sidbar.php」と「style.css」の2つを修正します。

「sidbar.php」ちゅんこさんのサイトに記載のあるphpの内容をちょこっと修正し以下の様にしました。

sidber.phpの内容

  • Google+の一文を削除
  • Feedlyの一文をGoogle+の一文の場所に追加

【】内は皆さんの内容へ修正して下さい。

style.cssの内容

こちらも同様にGoogle+を削除し、Feedlyを追加します。

如何でしょう?モカのサイトと同じ様になりましたか?余白などの設定は必要に応じて入れて下さい!

まとめ

少しカスタマイズするだけで、結構、自身のサイトに合う内容に変更できますね!

個人的には、今まで味気無いボタンでしたしそれなりに気に入っていますので、当面はこのままにしたいと思います。もう少し工夫すれば色付きの○の中にアイコンを表示したりも出来ますので、スキル次第ですね。(モカは勉強不足です…。)

<関連記事>

snsボタン-1stinger5のSNSボタンを目立つようにカスタマイズしてみよう!
こんにちは!モカです。stinger5のSNSボタンが何だか寂しかったので、少し目立つようにカスタマイズしてみました。色々なサイトを見て勉...
SPONSORD LINK

-WordPress全般