ブログのサイドバーやプロフィールにおしゃれなフォローボタンを設置している人を結構見かけます。
そのほとんどが有料テーマに備え付けの機能で設置していて、無料テーマにはそういった機能はほぼありません。
そこで今回は無料テーマでも有料テーマのようなシンプルでおしゃれなフォローボタンをコピペだけで作る方法をお伝えします。
ちなみに完成形のイメージは以下のような感じ。
この記事の流れ
シンプルおしゃれなSNSフォローボタンのCSSとHTMLの記載方法
まず、Font Awesomeが利用可能なテーマではない場合はBetter Font AwesomeをインストールするなどしてFont Awesomeが利用可能な状態にしておいてください。
See the Pen SNS Follow btn by MUMEI (@MUMEI) on CodePen.
参考元：オシャレな丸いSNSフォローボタンを設置する【WordPressカスタマイズ】
CSSのコードはStyleシートではなく、WordPressの外観＞カスタマイズ＞追加CSSに追加しましょう。WordPress管理画面＞外観＞テーマの編集＞style.cssでも編集は可能ですが、うまく反映されない可能性があります。
アイコンとボタンの位置がずれているという場合は、line-heightプロパティの数値を修正して自分のテーマに合わせてアイコンの位置を調整してみてください。
ちなみに、当ブログで使用しているAFFINGERなどの一部テーマではFont Awesomeの最新版に対応していないため、旧バージョンのFont Awesome 4.7を使っています。
シンプルおしゃれなSNSフォローボタンのカスタマイズ方法
別のSNSのフォローボタンに差し替えたいという場合はアイコンとボタンの色を変更して、自分が設置したいボタンにカスタマイズしましょう。
HTMLをカスタマイズしてフォローボタンアイコンを差し替える
</a></li>
上記の線を引いた箇所をFont Awesome 4.7の利用したいアイコン名に差し替えましょう。
アイコン名はFont Awesomeのアイコン一覧画面で、利用したいアイコンをクリックすることで確認することができます。
よく使われるSNSアイコンは以下のような感じ。
- Twitter：fa-twitter
- Facebook：fa-facebook
- Instagram：fa-instagram
- YouTube：fa-youtube
- Pinterest：fa-pinterest
- RSS：fa-rss
- LINE（代用）：fa-comment
CSSをカスタマイズしてフォローボタンの背景色を差し替える
/* Twitterボタンの色 */
.flowbtn.fl_btn1{
border:solid 1px #fff;/* 枠線の色 */
color:#fff;/* 文字の色 */
}
/* Twitterマウスホバー時 */
.flowbtn.fl_btn1:hover{
color:#fff!important;/* 文字の色 */
border:solid 1px #55acee;/* 枠線の色 */
background:#55acee;/* 背景の色 */
}
上記の赤字箇所を好みの色のカラーコードに変えることで、マウスをボタン上に乗せたとき（スマホではタップしたとき）に変わる色を変更することができます。
基本的にはそれぞれのSNSのブランドカラーを利用するのがオススメ。
フォローボタンをカスタマイズしてフォロワーを獲得しよう
おしゃれなサイトデザインは読者のボタンクリック率を上げることに繋がります。
どうしてもデザインに統一感がない場合や、CSSの反映がうまくいかないという場合は有料テーマの購入も検討してみることをオススメします。
無料テーマにはどうしても限界があるため、手軽にデザインを作って、記事執筆に集中したいなら有料テーマ一択です。
-
-
【レビュー】AFFINGER5(アフィンガー５) のメリット・デメリットまとめ
僕が初めてブログを書き始めた当時のテーマは『STORK（ストーク）』というブロガーに特化した人気テーマ 運営開始からしばらくして、「ブログではなくアフィリエイトサイトを作りたい」と思い立ち、テーマを乗 ...
続きを見る
時間を掛けてでも無料でどうにかしたいのであれば、コツコツCSSをカスタマイズしてデザインを調整していきましょう。