AFFINGER5

AFFINGER5でプロフィールカードを作成する方法【誰でも簡単】

AFFINGER5でプロフィールカードを作成する方法【誰でも簡単!】
AFFINGER5(アフィンガー5)をインストールしたけどプロフィールカードの作り方が分からない
他のAFFINGER5を使っているサイトとプロフィールカードのデザインが違う!

今回はこういった悩みを解決していきます。

みなさんもお気づきの通り、AFFINGER5のプロフィールには「デフォルトデザインのプロフィール」「カード化したプロフィール」の2種類があります。

デフォルトのプロフィールカード

デフォルトのプロフィール

カード化したプロフィール

カード化したプロフィール

ご覧のように初期状態のデザインはオシャレさに欠けるので、多くのAFFINGER5ユーザーは「カード化したデザイン」にカスタマイズしています。

そこで今回はAFFINGER5(アフィンガー5)を使ってプロフィールカードを簡単にカスタマイズする方法をご紹介します。

今回のテーマはこちら!

  • AFFINGER5でプロフィールカードを作成する方法
  • 作成したプロフィールカードを設置する方法
  • プロフィールカードが表示されない時の対処法

当サイトではウェブサイトやブログに関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

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

AFFINGER5の詳細を見る

AFFINGER5(アフィンガー5)で作成するプロフィールカードの完成形

AFFINGER5(アフィンガー5)で作成するプロフィールカードの完成形

まずはAFFINGER5で作成したプロフィールカードの完成図をご覧ください。

カード化したプロフィール

カード化したプロフィール

SNSのプロフィールみたいでオシャレですね!!

このようにAFFINGER5なら、シンプルで見やすくてオシャレなプロフィールカードを作成できます。

AFFINGER5でプロフィールカードを作成する方法

AFFINGER5でプロフィールカードを作成する方法

それでは早速AFFINGER5を使ってプロフィールカードを作成する方法を見ていきましょう。

手順は以下の通りです。

プロフィールカード作成手順

  1. プロフィール画像・ヘッダー画像の設定
  2. プロフィールカードのボタン設定
  3. SNSボタン設定
  4. 自己紹介文の設定
  5. プロフィールカードに影を付ける方法

詳しく見ていきましょう。

1. プロフィール画像・ヘッダー画像の選択

外観カスタマイズ

まずはWordPress管理画面から「外観」→「カスタマイズ」に移動します。

サイト管理者紹介

次に「オプションカラー」→「サイト管理者紹介(プロフィールカード)」へと移動しましょう。

サイト管理者紹介(プロフィールカード)

するとこんな画面が表示されるはずです。

まずは「プロフィールカードに変更」にチェックを入れましょう。

これで「デフォルトのプロフィール」から「オシャレなプロフィールカード」に変更されます

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

アバター画像はサイズの大きい正方形の画像、ヘッダー画像は横長の画像にしましょう。

「サイト管理者紹介(プロフィールカード)」設定では色に関する設定がいくつかありますがデフォルトのままで問題ありません。

実際の画面を見て「もっと修正したい」と思ったら適宜変更することをオススメします。

設定が完了したら「公開」ボタンを押して設定を保存しましょう。

設定完了画面

画像を設定するとこんな画面になるはずです。

2. プロフィールカードのボタン設定

サイト管理者紹介(プロフィールカード)

次にプロフィールカード下部のボタンをカスタマイズします。(上画像の赤枠の部分です)

ボタンカスタム

先程の「サイト管理者紹介(プロフィールカード)」設定の下の方に、ボタンに関する設定があるはずです。

各項目の概要は以下のようになります。

設定項目概要
ボタンURLボタンを押した時の移動先のURL
ボタンテキストボタンに表示する文字
ボタンテキスト色(プロフィールカード)ボタンに表示されている文字の色
ボタン上部背景色(プロフィールカード)ボタンの上部分の色(グラーデーションボタンにしたい時は上部と下部で色を分けます)
ボタン下部背景色(プロフィールカード)ボタンの上部分の色(グラデーションボタンにしたい時は上部と下部で色を分けます)
ボタン影色(プロフィールカード)ボタンの影の色

ボタンの移動先はどこでも構いませんが、やはりプロフィールカード内のボタンですのでプロフィールページに移動させるのが一般的でしょう。

参考までに当ブログで設定している値をご紹介しておきます。

設定項目当ブログで設定している値
ボタンURLhttps://wagtechblog.com/others/profile.html
ボタンテキストプロフィール詳細
ボタンテキスト色(プロフィールカード)#ffffff(白)
ボタン上部背景色(プロフィールカード)#4c84bc(濃い青)
ボタン下部背景色(プロフィールカード)#4c84bc(濃い青)
ボタン影色(プロフィールカード)#d8d8d8(薄い灰色)
ぜひ参考にしてみてください!

設定が完了したら「公開」ボタンを押して設定を保存しましょう。

3. SNSボタン設定

SNSボタン

次にプロフィールカードのSNSボタンを設定していきます。

SNSボタンは最大7個設置できます

まずはWordPress管理画面の「ユーザー」→「あなたのプロフィール」に移動しましょう。

するとページの真ん中のあたりの「連絡先情報」という項目に各SNSのURLを入力できる場所があるはずです。

SNSボタン設定

それぞれご自身のアカウントのプロフィールページのURLを入力しましょう

枠に入力したメディアだけプロフィールカードに表示されます。

アカウントがない・表示させたくない場合は無記入にしておきましょう。

ボタンのデザインやレイアウトはAFFINGER5の方で自動で設定されます。

4. 自己紹介文の設定

プロフィールカードのプローフィール情報

最後にユーザー名と自己紹介文の設定をしていきます。

先程と同じくWordPress管理画面の「ユーザー」→「あなたのプロフィール」に移動しましょう。

ユーザー名

ニックネーム

ニックネームの項目は「名前」という段落にあります。

プロフィールカードに表示させたいニックネームを入力しましょう。

自己紹介文

プロフィール情報

プローフィール情報の項目は「あなたについて」という段落の「プロフィール情報」という項目にあります。

ここに簡単な自己紹介文を入力しましょう。

上画像では改行を使っていますが、実際には改行されずに繋がった文章になりますので注意しましょう。

ポイント

自己紹介文はあなたを理解してもらうための一番重要な部分です。

あなた自身を知ってもらうためには分かりやすく、読みやすく、親近感の湧くような文章を心がけましょう。

5. プロフィールカードに影を付ける方法

当ブログのプロフィールカードには影がついています

人によっては必要ないかもしれませんが、個人的にはオシャレだと思ってそうしています。

ということで、ここからは作成したプロフィールカードに影を付ける方法をご紹介します。

まずはWordPress管理画面から「外観」→「カスタマイズ」→「追加CSS」に移動しましょう。

ここでは追加で設定したいCSSコードを入力することでデザインをカスタマイズ出来ます。

ここに、プロフィールカードに影をつけるCSSコードを入力します。

追加するのはたった1行!

このCSSコードを入力したら「公開」ボタンを押して設定を保存しましょう。

AFFINGER5(アフィンガー5)のプロフィールカードを設置

AFFINGER5(アフィンガー5)のプロフィールカードを設置

さてプロフィールカードの作成は完了したので、早速設置していきます。

設置場所としてはユーザーの目に止まりやすいサイドバーやスマホスライドメニューをおすすめします。

プロフィールカードの設置はWordPress管理画面の「外観」→「ウィジェット」ページから行います。

ウィジェット

当ブログでは「サイドバートップ」と「スライドメニュー」の2箇所に設置しています

ウィジェットページの構成としては画面左側が設置するウィジェット画面右側が設置する場所、がそれぞれ一覧になっています。

ウィジェットが書かれた枠を設置したい場所にドラッグすることで設定できます。

プロフィールカードは「11_STINGERサイト管理者紹介」というウィジェットです。

ということで上画像のように「11_STINGERサイト管理者紹介」のボックスをお好みの場所にドラッグしてあげましょう。

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

あらためてサイトで確認してみましょう。

プロフィールカードの設置が反映されないときの対処法

プロフィールカードの設置が反映されない?

たまに「プロフィールカードを設置したのに表示されない」なんてことがあります。

プロフィールカードの設置が反映されていない場合、以下の原因が考えられます。

プロフィールカードが表示されない原因と対処法

  • 保存し忘れ
    →設定が保存されているか確認しよう
  • キャッシュが有効になっている
    →ブラウザで「ハード再読み込み」をしよう

プラグイン設定などでブラウザのキャッシュが有効になっている場合、通常の再読み込みでは結果が反映されません。

Chromeを使用している方は「Shift」+「command」+「R」でハード再読み込みをすれば新しい画面が表示されるはずです。

まとめ:AFFINGER5(アフィンガー5)のプロフィールカードを活用しよう!

まとめ:AFFINGER5(アフィンガー5)のプロフィールカードを活用しよう!

まとめ

  • AFFINGER5では「デフォルトのプロフィール」と「カード化したプロフィール」の2種類がある
  • プロフィールカードの作成はとっても簡単!
  • AFFINGER5に用意されていないデザインを作りたい時は「追加CSS」から設定できる

今回はAFFINGER5(アフィンガー5)を使ったプロフィールカードの作り方や設置方法について解説しました。

プロフィールカードを作成すれば、ユーザーの親近感が湧いて、ユーザー滞在時間が長くなる可能性が高くなります。

特にAFFINGER5なら、クリックのみの簡単操作でプロフィールカードを作成できるので非常におすすめです。

あなたのウェブサイトにもプロフィールカードを設置してみましょう!

わからない部分があればTwitterのDMで質問して貰えばすぐにお答えします。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

AFFINGER5のカスタマイズ方法のまとめはこちら

AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ
AFFINGER5(アフィンガー5)のカスタマイズ方法まとめ

続きを見る

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

AFFINGER5の詳細を見る

AFFINGER5関連の記事はこちら

All in One SEO Packの導入手順
AFFINGER5を使ってみた感想【良かった点と悪かった点】

続きを見る

AFFINGER5(アフィンガー5)でお問い合わせフォームを簡単に設置する方法
AFFINGER5(アフィンガー5)でお問い合わせフォームを設置する簡単な方法

続きを見る

AFFINGER5(アフィンガー5)でオシャレな目次を作成する方法
AFFINGER5(アフィンガー5)でオシャレな目次を作成する方法

続きを見る

AFFINGER5で内部・外部リンクのブログカードを作る方法
AFFINGER5で内部・外部リンクのブログカードを作る方法

続きを見る

AFFINGER5(アフィンガー5)に関する記事一覧はこちら→

▼最新映画や漫画が無料で見れちゃう▼
▼最新ドラマや漫画が無料で見れちゃう▼

-AFFINGER5

Copyright © wagtechblog All Rights Reserved.