はじめに
Twitter、Facebook、Instagramなど強大な影響力を持つSNSがあり、
私自身も上記3つのアカウントを持っています。
拡散力が非常に高いのでブログと連携して活用しようと考えたのですが、
Twitterはしばらくログインしておらず、Facebookは見る専…
ということでInstagramのフォローボタンをブログに追加しようと考えました。
参考にしたブログ
参考というか、こちらが全てです笑
私はサイドバーのProfileにHTMLタグを追加し、
デザイン＞カスタマイズ＞デザインCSSにはまるっとコピペしました。
アイコンが表示されないとき
ただしこれだけだと、特別なカスタマイズをしていない場合はInstagramアイコンが表示されません。
こんな感じで、なんか物足りない…
こちらのアイコン、FontAwesomeというWebフォント（アイコンフォント）を利用しています。
fontawesome.io
上記のIconsというメニューから、使用できるアイコン一覧を確認することができます。
アイコンフォントを利用すると面倒なアイコンの色変更がとても簡単にできるため、
ブログのデザイン変更時にとても便利です。
今回はこちらのFontAwesomeを利用できるようにするため、
下記のようなコードを
設定＞詳細設定＞検索エンジン最適化＞headに要素を追加に追記してください。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
ちなみにこちらから、最新のソースを確認できます。
www.bootstrapcdn.com
保存すると、このようにInstagramアイコンが表示されました！
1つしかボタンがないのでTwitterやFacebookと揃っているかどうかはわかりませんが（笑）、
おしゃれなフォローボタンが追加されました♪
おわりに
せっかくInstagramのような拡散力の高いSNSを利用しているのであれば、
できればブログやHPとも連動させたいですよね。
簡単に設定できますので、ぜひやってみてください♪
ちなみにFontAwesomeはこのようにタグを書けば、（HTMLが有効な箇所なら）どこでも使用できます。
<i class="fa fa-address-book" aria-hidden="true"></i>
こんな感じ→
有用なアイコンがたくさんありますので、使ってみてください！
そしてよろしければInstagramのフォローもお願いします！笑
（主に手帳やインテリアの話題が中心なので、IT要素は非常に薄めですが…^^;）