【AFFINGER5】SNSボタンのデザインをカスタマイズする方法

今回は、AFFINGER5のSNSボタンのデザインをカスタマイズする方法について解説します。

AFFINGER5を使用することで簡単にサイトデザインをカスタマイズできるのでぜひ試してみてください。

AFFINGER5を使ってない方はぜひこちらからどうぞ！↓

AFFINGER5でSNSボタンのデザインをカスタマイズする方法

SNSボタンとは以下のようなデザインで、シェアやフォローなどができます。

集客やブログ記事の拡散にも繋がるので、SNSボタンは重要な存在です。

そこで、今回はAFFINGER5のSNSボタンのカスタマイズ方法を解説します。

SNSボタンをカスタマイズする方法は以下の2つがあります。

それでは順番に解説します。
ぜひ参考にしてください。

方法①：「AFFINGER5 管理」からカスタマイズする

まずは、WordPress管理画面の「AFFINGER5 管理」➡︎「AFFINGER5 管理」➡︎「SNS」を開きましょう。

すると、以下のような画面になります。

「SNS設定」でSNSボタンをカスタマイズできます。

設定は主に「デザインの設定」「表示設定」の二つに分かれます。

1.デザインの設定

カスタマイズできるデザインの設定項目は以下の3つです。

「SNSボタンのカラーを優しい色にする」をオンにすると以下のように色が変化します。

少し薄暗くなった感じがしますね。

そして「SNSボタンをシンプルにする」をオンにするとプラグイン連動によるシェア数の表示が無効になります。

3つ目の「SNSボタンを丸くする」で以下のようなデザインに…

2.表示設定

表示設定は以下の6つです。

SNSボタンを表示する場所や、非表示にする場所をカスタマイズできます。

「非表示設定」では、非表示にするSNSボタンを選択できます。

カスタマイズができたら下の[save]をクリックして設定を反映させましょう。

方法②：「外観カスタマイズ画面」からカスタマイズする

次は、WordPress管理画面の「外観」➡︎「カスタマイズ」➡︎「[＋]オプションカラー」➡︎「SNSボタン」を開いてください。

おそらく、以下のような画面になったと思います。

この画面では、「ボタン背景色」と「アイコンと文字」を設定できます。

試しに背景色を青に変えてみましょう。

アイコンと文字色を変更するとこんな感じ…

カスタマイズができたら、[公開]をクリックして反映させましょう。

まとめ

今回は、AFFINGER5でSNSボタンをカスタマイズする方法について以下の2つを解説しました。

AFFINGER5を使えば簡単にデザインをカスタマイズできましたね。

まだAFFINGER5をインストールしていない方はこちらからどうぞ！

というわけで、今回はここまでです。
最後まで読んでいただきありがとうございました。