Affinger5

【画像付きで解説】Affinger5でプロフィールカードを設定&Twitterアカウントを紐付ける方法

こんにちは、takuyaです。

今回は、「Affinger5を購入したけどプロフィールカードの設定がわからない」といった方へ向けて設定方法とTwitterアカウントを紐づける方法をご紹介します!

Affinger5は簡単に魅力的なプロフィールカードを作ることができます。

記事の信頼性を上げるためにもプロフィールは大事なので、Affinger5を使っている方はぜひこの記事を見て導入してみてください!

それでは行きましょう!

プロフィールの設定方法

1.プロフィール文の設定

WordPress管理画面のメニューからユーザー→プロフィールを選択し、プロフィール設定画面を開きます。

ここでは

  • プロフィールカードで表示させたい文

を設定していきます。


赤枠内にあたる部分で紹介したい文を書いてください。

そして内容が決まればプロフィールを更新を押します。

プロフィールをウィジェットに追加

先ほどのプロフィールを表示させたい箇所にウィジェットの追加を行います。

外観→ウィジェットを選択しウィジェット追加画面に行きましょう。


赤枠内の「STINGERサイト管理者紹介」をドラッグ&ドロップで表示させたい箇所に持っていきます。

今回は「サイドバートップ」に表示させます。

プロフィールカードを設定

次にメニューの外観→カスタマイズを選択してサイトカスタマイズの画面に行きます。


メニューからオプションカラーを選択します。


オプションカラーメニュー内のサイト管理者紹介(プロフィールカード)を選択します。


左側のプロフィールカードに変更のチェックボックスを選択します。


プロフィールカードに変更を押すと先ほどのプロフィール画面が切り替わります。

これでプロフィールカードの設定は完了です!

次は細かい設定方法を見ていきます。

ヘッダー画像(プロフィールカード)の設定

先ほどのプロフィールカードには、ヘッダー画像を入れることができます。

画像を選択して入れたい画像を入れていきましょう。

実際に入れるとこのように表示されます。アバター画像に半分かかるように表示されているので、ヘッダー画像とアバター画像2つでおもしろいプロフィールをつくるなんてこともできそうですね。

私はできませんが、、(笑)

アバター画像の設定

つぎはアバター画像の設定です。

ヘッダー画像と同じように入れたい画像を入れるだけですが、1つ注意点があります。

  • 150px以上の正方形画像

を推奨としています。あらかじめアバター画像で使いたいものは編集しておきましょう。

実際に入れるとこのようになります。これで画像の貼り付けは終了です!

Twitterアカウントを紐付ける方法

ここからはプロフィールカードにTwitterアカウントを紐付ける方法を紹介します。

方法としては2つあります。

  • WordPressのメニュー画面から(ユーザー→プロフィール
  • サイトカスタマイズ画面から(外観→カスタマイズ→オプションカラー→サイト管理者紹介

ではまずひとつめの方法からご紹介します。


WordPressメニュー画面から

WordPress管理画面の左側にあるメニューからユーザー→プロフィールを選択します。

すると下記の各SNS情報を載せる欄があります。そこにTwitterアカウントのURLを張り付けましょう。

最後にプロフィールを更新を押して完了です。

プロフィール画面に戻るとTwitterアカウントのボタンが追加されているのがわかるかと思います。

これが一つ目の方法です。

サイトカスタマイズ画面から

WordPress管理画面の左側にあるメニューから外観→カスタマイズを選択してサイトカスタマイズの画面に行きます。

次にオプションカラー→サイト管理者紹介(プロフィールカード)を選択します。

そしてボタンURLの部分にTwitterアカウントのURLを張り付け、ボタンに表示させたいテキストボタンテキスト欄に入力します。

今回はTwitterアカウントを紐付けるので「Twitter」と入れます。


するとこのように表示されます。

これでボタンの設置は完了です。

またボタンの色を自由に変更することができるので、お好みに調整しましょう。

わたしは落ち着きと見やすさを重視して青と白に統一しています。

以上がTwittetアカウントを紐付ける方法のご紹介でした!

まとめ

今回はAffinger5のプロフィールカードの設定とTwitterアカウントを紐付ける方法をご紹介しました。

ボタン一つで魅力的なプロフィールを作れてしまうAffinger5は控えめに言って最高ですよね、、

まだまだカスタマイズできる箇所がたくさんあるので随時ご紹介していきますのでよければ参考にしてください!

それでは今回はこれで以上となります。ありがとうございました!

                                                                                                                       

スポンサーリンク

-Affinger5

© 2021 Takuyablog Powered by AFFINGER5