AFFINGER6

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

2021年4月26日

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

こんな方におすすめ

  • AFFINGER5のデザインを変えたい
  • SNSボタンをカスタマイズしたい

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

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

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

\ 稼ぐに特化したWordPressテーマ /

今すぐAFFINGER5を購入!

【特典】「STINGERタグ管理プラグイン3」無料プレゼント中!

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

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

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

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

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

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

  • 「AFFINGER5 管理」からカスタマイズする
  • 「外観カスタマイズ画面」からカスタマイズする

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

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

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

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

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

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

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

1.デザインの設定

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

  • SNSボタンのカラーを優しい色にする
  • SNSボタンをシンプルにする
  • SNSボタンを丸くする

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

SNSボタンのカラーを優しい色にする:オフ
オフの状態
SNSボタンのカラーを優しい色にする:オン
オンの状態

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

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

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

SNSボタンを丸くする

2.表示設定

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

  • 投稿ページの上にSNSボタンを表示する
  • 投稿ページのSNSボタンを非表示にする
  • 固定ページの記事下にSNSボタンを表示する
  • 固定ページの上にSNSボタンを表示する(※下に表示している場合のみ有効)
  • トップページ下のSNSボタンを非表示にする
  • 非表示設定

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

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

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

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

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

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

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

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

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

SNSボタンの背景を青に設定

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

SNSボタンの文字を青に設定

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

まとめ

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

まとめ

  • 方法①:「AFFINGER5 管理」からカスタマイズする
  • 方法②:「外観カスタマイズ画面」からカスタマイズする

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

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

\ 稼ぐに特化したWordPressテーマ /

今すぐAFFINGER5を購入!

【特典】「STINGERタグ管理プラグイン3」無料プレゼント中!

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

-AFFINGER6
-