AFFINGER5

アフィンガー5で\Follow me/をプロフィールのSNSボタン上に表示する方法

アフィンガー5で\Follow me/をプロフィールのSNSボタン上に表示する方法

 

こまりくん
アフィンガー5を使っているけど、プロフィールカードのところにあるSNSボタンの上に\Follow me/を表示させてみたいなあ

 

こんな風に思っている方は必見!

 

今回の記事では、アフィンガー5でプロフィールSNSボタンの上に\Follow me/を表示する方法を誰でも設定できるようご紹介いたしますね。

 

ちなみに設定するとこんな感じになります。

設定が完了した画像

 

記事の信頼性

・当ブログもワードプレステーマ「アフィンガー」を使用。
・実際に記事内の方法で設定し、現在も適用しています。

 

設定の前に

今回の記事は、アフィンガー5でサイドバーにプロフィールカードの設定をしていることが前提条件です。

 

もしプロフィールカードを設定していない場合は、下の記事に書いてある「サイドバー用(アイコンの下にテキスト)のプロフィールカードの表示・設定方法」を参考に設定してみてください。

 

CHECK
【アフィンガー5】プロフィールカード3種類の設定方法【有効活用法も教えます】
【アフィンガー5】プロフィールカード3種類の設定方法【有効活用法も教えます】

続きを見る

 

 

アフィンガー5で\Follow me/をプロフィールSNSボタンの上に表示する方法

アフィンガー5でプロフィールSNSボタンの上に\Follow me/を表示する方法

 

アフィンガー5でプロフィールSNSボタンの上に\Follow me/を表示する方法は、下の手順に沿って進めればOK。

 

設定の流れ

  1. 【WordPress管理画面】から【テーマエディター】へ進む
  2. 編集するテーマとファイルを選択する
  3. コードを追加して保存する

 

続きで各手順について詳しくご説明します。

 

 

設定の流れその①【WordPress管理画面】から【テーマエディター】へ進む

 

まずはワードプレス管理画面へ進み【外観】→【テーマエディター】をクリックしましょう。

 

ワードプレス管理画面へ進み【外観】→【テーマエディター】をクリック

 

トモキ
人によってはテーマエディターをクリックした際に警告文が出てくるけど「理解した」を押すと中のファイルを編集することができるようになるよ!

 

 

設定の流れその②編集するテーマとファイルを選択

 

「テーマの編集」という画面になったら、【編集するテーマを選択:】を「WING-AFFINGER5」にして、すぐ横の【選択】ボタンを押しましょう。

 

【編集するテーマを選択:】を「WING-AFFINGER5」にして、すぐ横の【選択】ボタンを押す

 

トモキ
【編集するテーマを選択:】のところは「WING-AFFINGER5 Child」を間違えて選択しないように気をつけよう!

 

無事できたら、次は【テーマファイル】のところで「st-author-master-profile.php」を選択してクリックしてください。

 

「st-author-master-profile.php」を選択

 

 

設定の流れその③コードを追加して保存する

 

ここまで無事に手順を進めることができたら、次はコードを書き加える作業に入ります。

 

動作不良が起きた時のために、念のため「st-author-master-profile.php」のバックアップをとっておくことを推奨します。

 

準備ができたら「st-author-master-profile.php」内から下記のコードを探して下さい。

 

 html
<div class="sns">

 

無事見つけることができたら、このコードの上に、下記のコードを追加しましょう。

 

 html
<p class="follow">\ Follow me! /</p>

 

書き換えたら下の方にある【ファイルを更新】を押すと、問題なければ下の画像のようにプロフィールカードのSNSボタンの上に「\ Follow me! /」が追加されているはずです。

 

「\ Follow me! /」が追加されている画像

 

これだけじゃ味気ないなあ...文字の色とか変更したい!という方は、続きで設定方法をご紹介するのでぜひ見てみましょうね!

 

 

\Follow me/の文字のカスタマイズ方法

\Follow me/の文字のカスタマイズ方法

 

無事表示することができたら、次は興味のある方は色や太字にするなどのカスタマイズを行ってみましょう。

 

方法はとっても簡単!

 

カスタマイズする手順

  1. 【WordPress管理画面】に進む
  2. 【外観】→【カスタマイズ】をクリック
  3. 【追加CSS】をクリック
  4. コードを追加して【公開】する

 

③の追加するコードはこちら。

 

 css
p.follow{
margin-bottom:10px!important;
font-weight:bold;
color: #0093e8;
}

 

【margin-bottom:10px!important;】は、下に追加する余白の幅を表しています。
今回は10pxでご紹介しておりますが、お好きな数値で設定してみましょう。

 

【font-weight:bold;】は太字にする意味合いがあります。
太字にしたくない場合はこの1行をまるごと削除しましょう。

 

【color: #0093e8;】は文字の色を表しています。
変更したい場合は、#0093e8をお好きな色のカラーコードにしましょう。

 

カラーコードは下記のサイトを利用するとすぐに探すことが可能ですよ。

 

 

アフィンガー5で\Follow me/をプロフィールSNSボタン上に設定するデメリット

アフィンガー5で\Follow me/をプロフィールSNSボタン上に設定するデメリット

 

アフィンガー5で\Follow me/をプロフィールSNSボタン上に表示するデメリットは一つ。

 

「テーマのアップデートの際に、設定が消える」です。

 

この原因は、親テーマにコードを追記しているから。
もしアップデートを行ったとしたら、親テーマの修正により上書きされ消えてしまう可能性が高いです。

 

ただ、そうなった場合でもまた「st-author-master-profile.php」にコードを追記するだけですぐに調整は完了しますよ。

 

トモキ
時間にすると1分で設定が完了するレベルなので、そんなに手間もかからないね!

 

 

アフィンガー5で\Follow me/をプロフィールSNSボタン上に表示するメリット

アフィンガー5で\Follow me/をプロフィールSNSボタン上に表示するメリット

 

アフィンガー5で\Follow me/をプロフィールSNSボタン上に表示するメリットは次の2点。

 

設定するメリット

  • 見た目が良くなる
  • クリックを誘導できる

 

単純にこれです。

 

見た目がよくなるという点については完全に個人差なので、設定してみて「やっぱり無いほうがいいな...」と思ったら追加したコードを削除してもとに戻しましょう。笑

 

クリックを誘導できるという点については、単純に設定前よりも目立つことになるし、SNSボタンでフォローを促す文言「\Follow me/」を追加するので、効果が見込めます。

 

トモキ
個人的には、ないよりはあったほうがいいかな?といった感じなので、興味がある人はぜひ設定してみよう!

 

 

アフィンガー5は様々なカスタマイズが可能!テーマの力を最大限に引き出そう!

アフィンガー5は様々なカスタマイズが可能!テーマの力を最大限に引き出そう!

 

今回ご紹介した\Follow me/をプロフィールSNSボタン上に表示する方法は、コードを書き加えるなどちょっと特殊な設定をしましたが、アフィンガーは本来もっと簡単に色々カスタマイズが可能です。

 

そんなカスタマイズ方法についてはアフィンガー5の目的別カスタマイズ方法を完全紹介【初心者必見・だれでも設定可能】の記事内にまとめたので、サイトをよりよくしたい方はぜひ参考に読んでみていただける

アフィンガー5の目的別カスタマイズ方法を完全紹介【初心者必見・だれでも設定可能】
アフィンガー5の目的別カスタマイズ方法を完全紹介【初心者必見・だれでも設定可能】

続きを見る

 

 

また、アフィンガーを導入しておらず今回の記事で興味を持っていただけた方は、参考までに判断材料の一つとしてAFFINGER5の正直なレビューとお得な限定特典の入手方法の記事を是非読んでもらえると嬉しいです!

 

CHECK
【最新】AFFINGER5の特典付きレビュー!正直な感想やお得な入手方法もご紹介!
AFFINGER5の正直なレビューとお得な限定特典の入手方法

続きを見る

 

上記のレビュー記事にも書いてありますが、ただいま当サイトよりアフィンガーを購入された方限定で7つの素敵な特典をプレゼントさせていただいております!

 

\今なら当サイト限定特典付き/

AFFINGER5の詳細や購入はこちら

 

是非内容などをチェックしてみてくださいね。

 

また、アフィンガーの購入は少し複雑なので戸惑う方も多いです。

 

これから購入したいと考えている方はアフィンガー5の購入〜インストール方法を徹底解説を参考に手順通り進めると失敗せずに安全ですので、よろしければこちらもどうぞ。

 

CHECK
【絶対できる】アフィンガー5の購入手順とダウンロード・インストール方法を徹底解説!
【絶対できる】アフィンガー5の購入手順とダウンロード・インストール方法を徹底解説!

続きを見る

 

この記事が参考になれば幸いです。

 

 

関連記事AFFINGER5の正直なレビューと特典の入手方法をご紹介!

関連記事アフィンガー5の購入〜インストールまでの方法を徹底解説

 

-AFFINGER5
-

Copyright © TOMOKIBLOG , All Rights Reserved.