シンプルおしゃれなSNSフォローボタンのCSSカスタマイズデザイン

ブログのサイドバーやプロフィールにおしゃれなフォローボタンを設置している人を結構見かけます。

そのほとんどが有料テーマに備え付けの機能で設置していて、無料テーマにはそういった機能はほぼありません。

そこで今回は無料テーマでも有料テーマのようなシンプルでおしゃれなフォローボタンをコピペだけで作る方法をお伝えします。

ちなみに完成形のイメージは以下のような感じ。

シンプルおしゃれな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フォローボタンのカスタマイズ方法

YouTubeとinstagramじゃなくてFacebookのボタンにしたいんだけど……

別のSNSのフォローボタンに差し替えたいという場合はアイコンとボタンの色を変更して、自分が設置したいボタンにカスタマイズしましょう。

HTMLをカスタマイズしてフォローボタンアイコンを差し替える

上記の線を引いた箇所をFont Awesome 4.7の利用したいアイコン名に差し替えましょう。

アイコン名はFont Awesomeのアイコン一覧画面で、利用したいアイコンをクリックすることで確認することができます。

よく使われるSNSアイコンは以下のような感じ。

CSSをカスタマイズしてフォローボタンの背景色を差し替える

上記の赤字箇所を好みの色のカラーコードに変えることで、マウスをボタン上に乗せたとき（スマホではタップしたとき）に変わる色を変更することができます。

基本的にはそれぞれのSNSのブランドカラーを利用するのがオススメ。

フォローボタンをカスタマイズしてフォロワーを獲得しよう

おしゃれなサイトデザインは読者のボタンクリック率を上げることに繋がります。

どうしてもデザインに統一感がない場合や、CSSの反映がうまくいかないという場合は有料テーマの購入も検討してみることをオススメします。

無料テーマにはどうしても限界があるため、手軽にデザインを作って、記事執筆に集中したいなら有料テーマ一択です。

時間を掛けてでも無料でどうにかしたいのであれば、コツコツCSSをカスタマイズしてデザインを調整していきましょう。