WordPress

AFFINGER6のプロフィールカードを作成・設置する方法を解説

この記事で解決できるお悩み

  • アフィンガーでおしゃれなプロフィールを作りたい!
  • プロフィールの設置方法がわからない…
  • プロフィールカードの有効活用法が知りたい!
ザウルスくん
今回は上記のお悩みを解決する記事を書きました!

実際にアフィンガーを使用して、当初つまずいたポイントです。


ご紹介する「AFFINGERのプロフィールカードの設置方法」を実施すれば、おしゃれなプロフィールを設置することができますよ!

まずは「AFFINGERのプロフィールカードの作成方法」を画像つきで紹介していますので、サクッと作成してくださいね。


「すぐにプロフィールカードを設置させたい!」という方は、「AFFINGERのプロフィールカードの設置方法」へ進んでください。

AFFINGERのプロフィールカードの作成方法


まずはプロフィールカードを作成しましょう。

プロフィールカードの作成は4ステップで完了します。

プロフィール作成の4ステップ

  • 自己紹介文を設定
  • SNSボタンの表示設定
  • プロフィール画像・背景画像の設定
  • プロフィールカードのボタン設定


1:自己紹介文の設定


まずはユーザー名と自己紹介文を設定しましょう。

自己紹介文は以下の画像の箇所です。

アフィンガー プロフィールカード①



まずWordPressの管理画面にログインし、管理画面内の「ユーザー」から「プロフィール」のページへ移動しましょう。

その後、プロフィールページ内の名前の段落にあるニックネームを入力します。


入力が完了したら、ブログ上の表示名で入力したニックネームを選択してくださいね。

ワードプレス プロフィール



続いて、自己紹介の文章を作成します。

プロフィールのページ内にあるあなたについてという段落のプロフィール情報の箇所に自己紹介の文章を入力します。

表示される際は改行されず、つながった文章になるため、プロフィール情報内でも改行せずに記載して問題なしです。

WordPress プロフィール情報



「自己紹介文の書き方がわからない...」という方は、「プロフィールに何を書けば良いかわからないあなたへ」をチェックしてみてくださいね。


最後に、プロフィールの文章を改行したい場合の方法を紹介しますね。

プロフィールの文章を改行したいときは?


アフィンガー プロフィールカード②



プロフィールの文章は少しだけカスタマイズをすることで、改行が可能です。

改行したほうが読みやすくなるので、こちらは実施しておくのがベターですね。


改行する方法としては、管理画面に入り、「AFFINGER設定」⇒「投稿・固定記事」⇒「この記事を書いた人」に進んでください。


「この記事を書いた人」の段落内にある「プロフィール情報にhtmlタグを許可する」にチェックを入れます。


これで準備は完了です。

アフィンガー設定 プロフ改行



次に「ユーザー」⇒「プロフィール」と進み、先ほどご紹介した「あなたのプロフィール」の箇所で改行させてたいポイントに<br>を入力するだけです。

これでプロフィール文が改行したいポイントで改行され、読みやすくなりましたね。

アフィンガープロフィール文改行



2:SNSボタンの表示設定


次にSNSボタンの表示設定をしましょう。

SNSボタンとは下図の赤枠の部分です。

アフィンガープロフィールSNSボタン



それぞれのボタンを表示させるために、先ほど自己紹介文を書いたページ「プロフィール」へ進みます。

プロフィール内に「連絡先情報」という段落があり、メールアドレスとリンクを入力する箇所があります。

自身が利用しているSNSのアカウントのURLを入力しましょう。

参考 プロフィール欄に表示されるSNSボタンは、URLを入力したSNSのみになります。


アフィンガー SNS



SNSボタンの色をカスタマイズしたい場合は、管理画面内の「外観」⇒「カスタマイズ」を選択します。

カスタマイズのページへ移行したら、「オプション(その他)」⇒「SNSボタン」へ進むとボタンの背景色やアイコンの色を変更することが可能です。


自分のブログに合った色にしてみてくださいね!

3:プロフィール画像・背景画像の設定


プロフィール画像と背景画像を設定していきましょう。

まず、管理画面内の「外観」⇒「カスタマイズ」へ移動します。

その後、「オプション(その他)」⇒「プロフィールカード」へ進みます。

アフィンガープロフィールカード


表示されたページにある「旧プロフィールカードに変更する」にはチェックを入れないでくださいね!


次にヘッダー画像とアバター画像を設定します。

ヘッダー画像は横長の画像、アバター画像は150×150px以上の正方形の画像が望ましいです。


プロフィールカード内では、あらゆる箇所の色をカスタマイズすることが可能ですが、当初はデフォルトのままで問題ありません。

実際の画面を見て、適宜修正を加えていくとがよいでしょう。

ワンランク上へ

画像を登録した後、プロフィールカード内にある「アバター画像に影をつける(プロフィールカード)」や「影をつける(プロフィールカード)」、「角丸にする(プロフィールカード)」にチェックを入れると、よりオシャレなプロフィールカードができあがりますよ!


アフィンガープロフィール画像設定


ヘッダー画像の透明度を変更するには?


「ヘッダー画像の透明度を変更したい」や「プロフィールカードを作成したい」場合は、画像編集ツールを利用すると良いです。

当ブログの画像は主にCanvaで作成しています。

無料で利用できる画像編集ツールで、さまざまな画像素材もあるため、アイキャッチ画像を作成するときにも利用できます。

\無料で30日間CanvaProが利用できる!/

無料でCanvaに登録する


4:プロフィールカードのボタン設定


アフィンガープロフィールカード



最後にプロフィールカード下部にあるボタンをカスタマイズしていきます。
(※上部にある画像の赤枠部分です。)


先ほど画像を登録した「プロフィールカード」の下部にあります。

ボタンのリンク先はどこでもOKですが、プロフィール詳細ページやお問い合わせページのリンクが一般的でしょう。

アフィンガープロフィールカードボタン設定



参考までに当ブログの設定を紹介しておきますね!

設定が完了したら、「公開」を押し忘れないように注意です。

設定項目当ブログの設定
ボタンURLhttps://mikitydazeblog.com/contact-form/
ボタンテキストお問い合わせはこちら
ボタンテキスト色(プロフィールカード)#ffffff(白色)
ボタン上部背景色(プロフィールカード)#3dc2ff(水色)
ボタン下部背景色(プロフィールカード)#28d9fc(薄めの水色)
ボタン影色(プロフィールカード)#c1c1c1(薄いグレー)


AFFINGERのプロフィールカードの設置方法


プロフィールの作成が完了したところで、自分のページにプロフィールカードを設置しましょう。

設置場所としてはサイドバーがおすすめです。

サイドバーへの設置方法は管理画面内にある「外観」⇒「ウィジェット」へ移動してくだい。

ウィジェットのパーツに「11_STINGERプロフィールカード」があるので、サイドバートップへ追加します。


サイドバーにプロフィールカードが表示されていたら完了です。

アフィンガープロフィール設置


プロフィールカードが表示されないときには?


以下では、プロフィールカードを設置したのにも関わらず表示されないときの対処法をご紹介します。

表示されないときに考えられる原因は主に3つあります。

プロフィールカードが表示されない主な原因3つ

1. キャッシュが有効になっている
2. 保存することを忘れてしまった
3. プロフィールを表示したいユーザーと表示させるユーザーのIDが異なっている


1の対処法は、Chromを利用しているMacの場合『Shift+command+R』、Windowsの場合は『Shift+Ctrl+R』でページを再読み込みすることで解決します。

2は再度入力することで解決します。(面倒くさいので保存することは忘れずに!


1、2のパターンで解決できなかった場合は、3の可能性があります。


3の場合の対処法はこちらの記事で解説していますので、1、2を確認しても表示されない場合はチェックしてくださいね!


プロフィールに何を書けば良いかわからないあなたへ


プロフィールを書けと言われると、何から書けば良いのかがわからなくなってしまいますよね。

プロフィールに何を書けばよいかわからない方は、以下の3点を書けばOKです。

プロフィールに書くべき3つのこと

1. 簡単な自己紹介(経歴など)
2. 今までの実績
3. 誰に向けて何を発信しているブログか


実績と聞くと、「ブログで月10万」などといったすごいことを書かなければいけないと感じてしまいますよね…

発信をしていると、「すごい結果を出している人」と比べてしまいがちです。


実績は、過去の自分なら書くことができなかったが、今なら書けることを書けばOK!


例えば、「ブログ継続○ヶ月」や「ブログ2ヶ月目の収益は〇〇円」、「インスタフォロワー〇〇人」などです。


あまり深く考えすぎず、過去の自分から進んだことを書けば魅力的なプロフィールになりますよ!

AFFINGERのプロフィールカードを活用しよう!


ご紹介した方法でプロフィールカードを作成、設置することで、より魅力的なサイトになること間違いなしです!

最後のご紹介した内容をおさらいしておきます。

プロフィールカードを活用するには

  • プロフィールカードを4ステップで作成する
  • プロフィールカードをサイドバーに設置する
  • 表示されない場合は3つの原因に当てはまるかチェック
  • サイドバーに表示されたら完了


プロフィールカードはユーザーに親近感を持っていただくことができるので、設置するのを忘れないようにしましょう。

  • この記事を書いた人

みきてぃー

『日々の話題をアップデート』をテーマに明日誰かに話したくなることを発信中です。
24歳 │ ブログ継続1年 │ ブログ初月の収益472円 │ 筋トレ・パワーリフティング⇒BIG3:505kg(BP:145kg DL:190kg SQ:170kg) │ 簿記2級 │ 旅(45都道府県制覇。残り秋田・高知) │
※ザウルス系の顔とよく言われます。

-WordPress
-, ,