AFFINGER BLOG SEO

AFFINGER5(アフィンガー5)SNSボタンの見た目を変更する方法を解説。

2020年9月26日

Affinger5でSNSボタンのカスタマイズがしたい。色やデザインの変更方法がわからない

本記事ではこのような疑問を解決します。

本記事の内容
  • SNSボタンのデザイン変更方法
  • 投稿ページでの表示設定
  • SNSボタンを非表示にする方法

 

本記事ではAffinger5を使用してサイトのカスタマイズを行いたい人向けに、SNSボタンに関するカスタマイズ方法を紹介しています。

 

SNSボタンの色を変更したりすることでサイト全体の雰囲気を統一できるのでおすすめです。




SNSボタンのデザインを変える

 

それでは早速カスタマイズ方法を見ていきましょう。

 

最初にSNSボタンの形や表示するデザインの変更の仕方について紹介していきます。

少しアレンジを加えるだけで、かなり違った印象を得られるのでぜひ試してみてください。

 

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

 

それではSNSボタンボタンをシンプルにする方法を紹介します。

 

ダッシュボード→AFFINGER5管理→SNS設定からカスタマイズをしましょう。

 

SNSボタンをシンプルにするのボタンを選択します。

 

完成後のイメージは下記のようになります。

 

※タブで切り替えをできます

 





 

文字が消えるので、とてもシンプルに表示させることができます。

 

なお、当サイトでは白黒のSNSボタンの設定していますが、それについてはまた後で説明したいと思います!

 

②:SNSボタンを丸くする

次にSNSボタンを丸いデザインに変更する方法について紹介します。

 

ダッシュボード→AFFINGER5管理→SNS設定の順にカスタマイズします。

 

「SNSボタンをシンプルにする」を選択していないと、丸く表示できないので注意が必要です。

 

完成後のイメージは下記のようになります。

 





個人的に丸いデザインのほうが好印象だと思いました。

ぜひ参考にしてみてください!

 

投稿ページの設定

次に紹介するのは投稿ページの設定についてです。

 

投稿ページと固定ページは違うものなので、その点に注意が必要です。

自分の好みの色にSNSボタンを設定する方法や、SNSボタンの表示位置を変更する方法についてみていきましょう!

 

①:色を変更する

 

カラー変更WordPressやする方法は大きく分けて2つあります。

 

  1. AFFINGER5管理から変更すると、細かい色の設定はできませんがサイトが自動で優しい色にしてくれます。
  2. 外観からカスタマイズするをする場合はより細かく、パレットから好きな色に設定することができます。

 

それではそれぞれ見ていきましょう。

 

AFFINGER5管理からカスタマイズ

それではAFFINGER5管理からカスタマイズをする方法についてみていきましょう。

ダッシュボード→AFFINGER5管理→SNS設定と進んでください。

「SNSボタンのカラーを優しい色にする」を選択しましょう。

 

これを変更すると下記のようなイメージになります。

 





変化したところが分かりにくいかもしれませんが、少し淡い色に変わっています。

光沢が抑えられて落ち着いた雰囲気になるのでぜひ試してみてください。

 

外観からカスタマイズ

それでは外観からSNSボタンの色を細かく設定する方法を解説します。

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

 

そうするとこのような画像が表示されます。

あとは自分の好みの色をパレットから選択するか、カラーコードを使うかのどちらかです。

ちなみに当サイトで使っているカラーコードについてはこんな感じです。

 

  • ボタン背景色:#565656
  • アイコンと文字色:#RRGGBB

変更した後のイメージについても載せておきます。





黒基調にするだけで、一段とおしゃれになるのでおすすめです。

カスタマイズ自体も2分ほどで終わると思うので、まだ変更していない人は試してみてください。

 

②:表示位置を変更する

つぎはSNSボタンの表示位置を変更するカスタマイズについてみていきましょう。

 

通常、カスタマイズ前は記事の一番下のみにSNSボタンが表示されますが、このカスタマイズを使うとアイキャッチ画像の上に表示させることができます。

 

ダッシュボード→AFFINGER5管理→SNS設定の順に移動しましょう。

 

 

すると「投稿ページの上にSNSボタンを表示する」と出てきます。

 

これを選択することで、アイキャッチ画像の上にSNSボタンが表示できます。

 

ただ、そのままSNSボタンをアイキャッチ画像の上に入れてしまうと上記のように、おかしな表示がされてしまいます。

 

「SNSボタンをシンプルにする」の項目にチェックが入っているか確かめよう。

 

 

きちんと設定をすると、このようにすっきりとした表示がされます。

 

なおこのSNSボタンの形は四角でも表示をすることができるので、試してみてください。

SNSボタンを非表示にする

それでは最後に、SNSボタン自体を表示させたくない人向けに非表示にする設定方法をお伝えしたいと思います。

この機能を使えば、「記事のタイトルをコピー」ボタンを独立させて表示することができます。

それではみていきましょう。

①:個別非表示設定

個別非表示設定では「表示させるもの」と「表示させないもの」に分けることができます。

どういうことかというとTwitterのSNSボタンとピンタレストのSNSボタンは表示するけど、FacebookのSNSボタンは表示させたくないようなときに使うと便利です。

 

ダッシュボード→AFFINGER5管理→SNS設定の順に進みます。

 

 

SNS設定に進むと、上記のような画面が表示されるので自分が選びたいSNSボタンを選択します。

 

この時も、SNSボタンをシンプルにしておかないとおかしな表示になるので注意!!

 

完成後はこのようなイメージになります。タブで確認してみてください。

 





 

表示されるアイコンが減ったのでよりすっきりしましたね。

 

使わないSNSボタンはぜひ非表示にしましょう。

 

②:タイトルコピーボタンを非表示

タイトルコピーボタンを非表示にする方法です。

どういう機能かというと、Webで気になる記事を見つけたときに記事のURLをこのボタン一つでコピーするというものです。

 

一見あまり使わない機能にも見えますが、案外使い勝手がいいです。

 

ダッシュボード→AFFINGER5管理→SNS設定の順に進みましょう。

 

 

すると非表示設定に、上記のような項目がでてくるのでそれをチェック。

 

これでタイトルコピーボタンを独立表示できるようになりました。

 

今回紹介したカスタマイズ方法

  1. SNSボタンのデザインを変えて、四角や丸の形にする
  2. アイキャッチ画像の上にボタンを入れる
  3. SNSボタンを非表示にする設定

以上のカスタマイズにぜひ取り組んでみてください。




-AFFINGER, BLOG, SEO

© 2021 HYON BLOG Powered by AFFINGER5