【STINGER5】コピペOK!サイドバーにアイコンフォントでSNS各種のフォローボタンを作る【STINGER5】コピペOK!サイドバーにアイコンフォントでSNS各種のフォローボタンを作るアイコンフォントを使ったフォローボタンのサイト、よく見かけるようになりましたね。わたしもフェイスブックページを作ってみたのでフォロー数増えるといいなと願い、当ブログでもサイドバーに搭載してみました!ご紹介するのは、Twitter、Facebook、Google+のソーシャル三種の神器とRSSの4つのボタンの作成方法のご紹介です。コピペだけでコードをそのまま利用できるので簡単にフォローボタンを作ることが出来ます。AwesomeのCDNへのパスがすでに記述されています。そのアイコンフォントを利用してフォローボタンを作っていきます。sidebar.phpへの記述このコードはsidebar.phpへの直に書いてください。target="_blank">RSS</a></li></ul></div>POINTご自身のツイッター、フェイスブック、グーグルのURLをご自身のファンページのものに書き換えてください。?>ところにご自身のURLを記述してください。タブレットサイズ】というところより前の部分です。a:hover::before{color:#ffb53c;}マージンやパディングなどは調整してください。ATTENTIONtransitionプロパティなどがCSS3のものなのでそれ対応のサイトにのみ有効なスタイルです。css3対応でないサイトなどはボタン部分のスタイルを変えてみてください。Awesomeのサイトから選び、content:”f●●”;のfで始まる英数字を変えてください。Awesomeにはfeedlyのアイコンがありません。RSSのマークを利用し、色を変えてみるといいかも。}こんな感じになります当ブログではアイコンフォントはicomoonを利用しています。icomoonはアイコンを自作することができ、また必要な分だけアイコンフォントを使うことができるのです。Shufulife以下は、icomoonに対応しているソーシャルのアイコンを配布してくださっているサイトです。Share!!ツイートするシェアするはてブするこの記事のタイトルとURLをコピーする記事タイトル【STINGER5】コピペOK!サイドバーにアイコンフォントでSNS各種のフォローボタンを作る記事URLhttps://shufulife.com/followme/お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。【エクセル帳簿】決算時に行うこともっと見るブログの中の人ちゅんこ@shufulife意識低い系主婦。夫と娘(5歳)と仲睦まじく暮らしています。毎日楽することばかり考えて、お手本はアニメ「あたしンち」のお母さん。Shufulife本サイト内にある記事や画像などの一切の無断転載を禁じます。