AFFINGER

AFFINGER5でSNSボタンをカスタマイズする方法【完全版】

2021年2月6日

遠くを見るライオン

悩む学生
AFFINGER5のSNSのボタンをもっと色を変えたり、形を変えておしゃれにしたい。

 

今回はこんな悩みを解決します。

 

本記事の内容

  • AFFINGER5のSNSボタンの色をカスタマイズ
  • AFFINGER5のSNSボタンの形をカスタマイズ
  • AFFINGER5のSNSボタンの位置をカスタマイズ

AFFINGER5はカスタマイズできるところが多すぎて、どこをいじればいいのか悩みますよね。

 

ですが、AFFINGER5のSNSボタンに関して詳しく解説している記事って本当に少なくて、どうすればいいのか分からない人もいるかと思います。

 

今回はそんなあなたに向けて、SNSボタンのカスタマイズのすべてを紹介していきます。

 

この記事を読めば、細部のSNSボタンが自分好みのおしゃれなものになり、ブログにさらに愛着も沸くようになりますよ

 

本記事はさくっと読めますので安心してください。

AFFINGER5のSNSボタンの色の変え方

 

AFFINGER5の色の変え方は2種類あります。

 

  1. AFFINGER5の外観→カスタマイズから変更
  2. CSSを入れる

 

AFFINGER5の外観→カスタマイズから変更

 

こちらはまず、AFFINGER5の管理画面SNS設定に行き、「SNSボタンのカラーを優しい色にする」にお好みでチェックしてください。

AFFINGER5のSNS設定

そうすることで、少しの差ですがピカピカした感じが少し抑えられます。

 

ぼくの体感としてはチェックする方があまり悪目立ちせずに、サイトによくなじむと感じています。

リットン

 

次に色を細かく変えていく方法を紹介します。

 

外観カスタマイズオプションカラーSNSボタンと進んでください。

 

SNSボタンの色変更

 

ボタン背景色とアイコンの文字色をここで変更できます。カラーコードのサイトを参考にするか、自分で細かく調整してみてください。

 

CSSを追加する

 

実は先ほど紹介したやり方では、縁と背景を分けることができません。

 

しかし、CSSを追加することで

  • 縁→黒
  • 背景→白
  • アイコン→黒

のようにもう少し細かく設定できます。こちらのコードを追加CSSにコピペしてみてください。

 CSS
/* SNSボタン*/
 
.sns li a{
margin: 0;
border-radius: 50%;
box-sizing: border-box;
border:1px solid #2b2b2b;
font-size: 19px;
height: 40px;
width: 40px;
padding: 0;
 
}

するとSNSボタンの縁の色が黒になるはずです。

 

あとは先ほどのSNSボタンの設定と合わせることで

  • 縁→黒
  • 背景→白
  • アイコン→黒

のような色にすることができます。完成したイメージが当サイトのSNSボタンになります。

 

SNSボタンのアイコン

 

縁の色を黒ではなく別の色にしたい人はborder:1px solid #2b2b2b;#2b2b2bの部分をお好みの色に変更してみてください。

 

これにて、SNSボタンの色に関するカスタマイズは完了です。

 

AFFINGER5でSNSボタンの形を変える方法

 

こちらはAFFINGER5の管理画面SNSのところから設定できます。

AFFINGER5のSNS設定

 

 

作業は簡単で、「SNSボタンをシンプルにする」をチェックすると四角型のSNSアイコンの文字部分が非表示になり、小さく正方形のようになります。

 

当サイトは四角のままにしています
リットン

 

また、丸い形にしたい人はそのままSNSボタンを丸くするにチェックを入れましょう。

 

こちらもお好みでしてみてください。
リットン

 

以上でAFFINGER5のSNSボタンの形に関する設定は終了です。

 

AFFINGER5のSNSボタンの位置に関する設定

 

AFFINGER5では通常SNSボタンが記事の一番下に来ることになっています。

 

これを記事の上に持っていきたい方は、先ほどと同じAFFINGER5の管理画面SNS設定の1「投稿ページの上にSNSボタンを表示する」にチェックを入れましょう。

 

そうすることで、以下のように変わります。

SNSボタントップ

このサイトではやっていませんが、こちらも自分の好みやセンスに合わせて設定してください。

 

感覚的には記事下が圧倒的に多い気がします。
リットン

 

SNSボタンに関する設定のその他

 

SNSボタンに関する他の設定として、重要と考えられるのが不必要なSNSボタンの非表示です。

 

こちらも先ほどと同じようにSNS設定に進み、「非表示設定」で使ってないSNSをチェックしましょう。

AFFINGER5のSNS設定

 

このサイトでは一度Twitter以外を非表示にしたのですが、少なくなりすぎてダサくなったので、使ってないSNSも非表示にせずに残しています。

 

まとめ:AFFINGER5を細部まで設定して少しでもおしゃれにしよう

 

今回はSNSボタンに関する設定方法に関して紹介しました。

 

AFFINGER5はカスタマイズ性がすさまじく、初心者にはなかなか扱いいづらいかもしれません。

 

逆に言うと、扱いこなせさえすればサイトは一気にあなた独自のものになり、差別化のきっかけにもなるでしょう。

 

大変ですが、細かいところまで追求することで、読者にとって居心地のいいサイトに仕上がります。

 

この記事は以上です。ありがとうございました。

関連記事AFFINGER5で引用ボックスをカスタマイズする方法【超簡単】

関連記事【AFFNGER5のレビュー】メリットとデメリットを使用者が解説

-AFFINGER

Copyright © Lytton Blog