AFFINGER6のSNSボタン設定方法を解説【当記事オリジナルカスタマイズも紹介】

アフィンガーのSNSボタンを設置したい！色とかも自由に変えれるのかなぁ？

ゆう

アフィンガーでは2種類のSNSボタンを設置ができるよ。当記事オリジナルのデザインも紹介するからぜひ試してみて！

SNSボタンは「ブログのコンテンツを連携し共有するためのボタン」のことです。

SNSボタンはコンテンツの拡散に繋げたり、ブログ内容をより多くの画像などで投稿補完ができたり、ブログとの相性がよく設置しておくメリットが多数あります。

ということで、この記事では、アフィンガー向けのSNSボタン設置方法を解説していきます！

本記事の内容

• アフィンガーでSNSボタンを設定する手順
• SNSボタンのカスタマイズ方法

AFFINGER6について

AFFINGER6の購入前に評判やメリット・デメリットについて確認しておきたいという方は、【特典つき】AFFINGER6(アフィンガー6)を4年愛用した使用感をレビューを参考にしてみて下さい。

AFFINGER6(アフィンガー)のSNSボタン設定方法

SNSボタンを設置する方法を解説していきます。SNSのアカウントさえあれば5分くらい設置できるのでサクッと設定してしまいましょう。

SNSボタンを設置できる場所（完成イメージ）

アフィンガーで表示できるSNSボタンの箇所は次の2箇所です。ちなみにボタンの意味づけが少し違うので合わせて説明しておきます。

• 記事本文
  →ユーザー自身のSNSアカウントに記事を共有するボタン
• プロフィールカード
  →自分のSNSアカウントへリンクするボタン

それぞれの場所に設置したときの完成イメージは下の画像のような感じです。

記事本文

プロフィールカード

それでは、これらのSNSボタンを設置する手順を解説していきますね。

SNSボタンを設定する方法

SNSボタンは記事本文とプロフィールカード内に設定できます。

それぞれの方法を画像を使いながら説明していきます。

記事本文にSNSボタンを設置する

記事内のSNSボタンは「AFFINGER管理→SNS/OGP」から設定します。

表示・非表示のチェックボックスに沿って表示設定をするだけでOKです。またSNSごとの表示設定もできるので、不要なSNSにチェックをつけておきましょう。

プロフィールカードにSNSボタンを設置する

まず、「ユーザー→プロフィール」に移動てください。

ここでプロフィールカード内に表示したいSNSの「自分のアカウントURL」を入力します。

ここに入力したアカウントのSNSがプロフィール内に表示されます。

AFFINGER6(アフィンガー)でSNSボタンをカスタマイズする方法

SNSボタンはカラーとボタンデザインの変更ができます。

SNSボタンの基本スタイル

基本は「AFFINGER管理→SNS/OGP」から以下の設定ができます。

デフォルト設定

SNSボタンを優しい色にする

SNSボタンをシンプルにする

SNSボタンを丸くする

SNSボタンのカラーを一括変更する

カスタマイザーで一括カラー変更することもできます。

全て同じ色のボタンになるので、ブログ印象に合わせて変えてみましょう！

プロフィールカードのSNSボタンのデザインを変える

通常は、丸いタイプのみ選択できますが、サイトのデザイン的にスクエア（四角）にしたいなと思いました。ということで、下の写真のようなデザインにカスタマイズしてみたので紹介します。

今回はプロフィールカード内のSNSボタンの形を変えてみたので参考にカスタマイズCSSを載せておきます。

ゆう

追加CSSに貼り付けるだけで使えるので、よかったら使ってください！

/* サイドバーSNSアイコン */

/* PC用サイドバー */
#side aside .st-author-profile .sns li a {
	border-radius: 15%;
}

/* スマホ用スライドサイドバー */
.st-author-profile .sns li a {
	border-radius: 15%;
}

スマホユーザーにSNSボタンは不要、という話

余談ですが、Layer0という海外メディアで「Does Anyone Use Social Sharing Buttons on Mobile?（SNSシェアボタンをスマホで使っている人はいるのか？」という調査記事がありました。

この記事のデータでは、スマホでSNSボタンを利用しているユーザーはたったの0.2%という結果だったようです。（デスクトップで見ているユーザーと比較して35%も利用率が低かった）

スマホのブラウザアプリには、Webサイトや画像などを簡単にシェアできる機能が標準搭載されています。わざわざWebサイトに設置してあるSNSボタンを使わないという人が多いんでしょうね。

とはいえ、SNSボタンそのものにデメリットがあるわけではないので設置しておいても支障はないとは思います。

デザイン的に邪魔にならなければ置いておいてもいいかな、というのが個人的な感想です。

まとめ：ブログと相性がいいSNSボタンを取り入れよう

ということで今回の記事は、アフィンガーのSNSボタン設定方法の紹介でした。

SNS✖️ブログは相性が良いので、SEOだけで頑張るよりも集客効率アップしやすいです。

また、ブログの投稿内容だけでは伝えにくい内容をSNSで補足する使い方もあります。

ゆう

画像をたくさんユーザーに共有するなら、インスタグラムやピンタレストの方が便利だったりします

SNSボタンを設置しておくとで、ブログ↔︎SNSの相互補完でユーザー満足度アップにも繋がります。特に理由がなければSNSボタンは設置しておきましょう！

AFFINGER6を検討中の方