専業ブロガー６年目のあずき猫です
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
「プロフィールカード」の作り方＆カスタマイズ設定方法
について、ブログ初心者さん向けに１からわかりやすく解説していきます
まず、ACTION AFFINGER6における「プロフィールカード」というのは…
↑ このようなデザインのプロフィールを指します
そんなWordPressにおける【プロフィールカード】の作り方とカスタマイズ方法について、３つのステップで丁寧に解説していきます
- 「プロフィール設定」を行う
- 「ウィジェット設定」を行う
- 「カスタマイズ設定」を行う
さっそく見ていきましょー🐥
Contents
【2023年】AFFINGER6「プロフィールカード」の作り方＆カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド／第６章／No.12】
ACTION AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法【ステップ１】プロフィール設定を行う
注意
当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…
クラシックエディタ
の前提で解説しています（圧倒的に使いやすく、またユーザー数も膨大であることから「情報もググりやすい」ので断然おすすめです）
そのため、お手元のWordPress環境が…
- 無料プラグイン「Classic Editor」を有効化していない！
- 代わりに、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している！
という状態だと、画面のデザインや設定方法が（当ページの内容と）異なる可能性がありますのでご注意ください
▼ 「Classic Editor」を有効化する手順 ▼
- WordPress管理画面の左側一覧から、 プラグイン ＞ 新規追加 をクリック
- 右上の検索フォームに Classic Editor と入力し、表示された「Classic Editor」の インストール ＞ 有効化 を順にクリック
▼ 「Gutenbergプラグイン2」を停止する手順 ▼
- WordPress管理画面の左側一覧から、 プラグイン ＞ インストール済みプラグイン をクリック
- 表示された一覧のなかから、「Gutenbergプラグイン2」の「無効化」をクリック
関連
「クラシックエディタとグーテンベルグってなに…？」という場合は、こちらで１から解説しています ↓ ※重要です
-
WordPressクラシックエディタとグーテンベルグとは？Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド／第４章／No.6】
続きを見る
まずは、WordPress管理画面の左側一覧から…
ユーザー ＞ プロフィール
をクリックして、「プロフィール」設定画面を開きましょう
「プロフィール」設定画面を開いたら、そのなかに表示されている…
↑ ニックネーム（必須） という項目で、プロフィールカードに表示される任意の「ニックネーム」を入力し、さらに…
↑ プロフィール情報 という項目で、プロフィールカードに掲載される「プロフィール文」を入力します
注意
「プロフィール」設定画面の【ニックネーム】と、そのすぐ下にある【ブログ上の表示名】という項目は、いずれも初期状態で…
ログイン時に使用する「ユーザー名」
と同じ文字列に設定されてしまっています
つまり初期状態のままだと「実際の画面上で大切なユーザー名が漏洩してしまう」という恐れがあるので、この２項目についてはWordPressでブログを開設したら…
第三者に見られても安全な名称
に変更しておくのが定石です
くわしくは、第２章「ブログ開設後の初期設定」編のこちらの記事にて１から解説しています ↓
-
【2023年】WordPressの「ニックネーム設定」変更方法。ユーザー名の漏洩対策【ワードプレスブログ完全初心者ガイド／第２章／No.3】
続きを見る
また、「Twitter」や「YouTube」などの各種SNSをやっている場合は…
↑ このように、各SNSアカウントの「プロフィールURL」や「チャンネルURL」を入力することで、プロフィールカード内に…
↑ このような「SNSリンク」ボタンが自動で挿入されます
補足
Twitterの場合、「プロフィールURL」は…
https://twitter.com/●●●●●
という形で、 ●●●●● にはご自身のアカウントの「ユーザー名」が入ります（先頭の「@」は入れなくてOK！）
ということで…
ここまで設定できたら画面下部の「プロフィールを更新」ボタンをクリックして、【ステップ１】は完了です🐥
ACTION AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法【ステップ２】ウィジェット設定を行う
まずは、WordPress管理画面の左側一覧から…
外観 ＞ ウィジェット
をクリックして、「ウィジェット」設定画面を開きましょう
つづいて、画面の【左側】エリアから…
11_STINGERプロフィールカード
というウィジェットを見つけて右側の ▼（開くボタン） をクリックし、開いたメニュー内から…
↑「サイドバーウィジェット」を設置先として選択し、「ウィジェットを追加」ボタンをクリックします
これで、画面の【右側】エリアにある「サイドバーウィジェット」という場所に…
↑【11_STINGERプロフィールカード】のウィジェットが追加されたことを確認しましょう（タイトル欄は、入力しないままでOK！）
ちなみに、この【11_STINGERプロフィールカード】というウィジェットは…
↑ このようにドラッグ＆ドロップすることで、実際のブログ画面上での「並び順」を自由に変更することもできます
補足
上の画像例では、サイドバーウィジェットの初期状態から「いくつかの変更」を加えている状態です
具体的には、こちらをどうぞ ↓
-
【2023年】AFFINGER6「サイドバーウィジェット」の作り方・消し方＆カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド／第６章／No.8】
続きを見る
補足
上の画像例では、サイドバーエリアの「余白調整」用に【テキスト】というウィジェットを追加しています
サイドバーエリアの「余白調整」については、こちらから ↓
-
【2023年】AFFINGER6「サイドバーの余白サイズ」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド／第６章／No.9】
続きを見る
ということで…
この時点で、サイドバーエリアに「プロフィールカード」はもう設置できましたので、最後に「プロフィールカードのカスタマイズ設定」のやり方を見ていきましょう🐥
ACTION AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法【ステップ３】カスタマイズ設定を行う
まずは、WordPress管理画面の左側一覧から…
外観 ＞ カスタマイズ
をクリックして「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…
オプション（その他） ＞ プロフィールカード
というタブをクリックして開きましょう
「プロフィールカード」タブを開くと、そのなかに…
↑ こちらの…
- ヘッダー画像（プロフィールカード）
- アバター画像（プロフィールカード）
という項目があるので、それぞれ「画像を選択」ボタンから今回使用したい画像ファイルを選択し、WordPressにアップロードします
使用される画像素材についてはご自身でもちろん用意していただく形になりますが、参考までに当ブログで使用している各種プロフィールアイコンは、日本最大級のスキルマーケット「ココナラ 
」にて発注し有料で制作していただいています（無料の会員登録で、【300円の割引クーポン】もプレゼントされます）
関連
画像ファイルのアップロード手順と「代替テキスト」の設定方法については、こちらの記事で１から丁寧に解説しています ↓
-
AFFINGER6「画像」の貼り方＆カスタマイズ、代替テキスト（alt属性）の設定方法【ワードプレスブログ「完全初心者」ガイド／第７章／No.14】
続きを見る
※こちらは「記事内」における画像のアップロード手順ですが、「ファイルをアップロード」以降の手順については、今回の「カスタマイズ」設定画面でも同様です
つづいて、その下側に…
↑ プロフィールカードの「配色」や「デザイン設定」を行う項目が並んでいるので、こちらで任意の内容にカスタマイズしましょう
今回は例として…
↑ このような配色・デザインに設定してみました
- アバター画像に影をつける（プロフィールカード） → ON
- ボーダー色（プロフィールカード） → 空欄のまま
- 背景色（プロフィールカード） → #f7f7f7
- テキスト色（プロフィールカード） → #515151
- 影をつける（プロフィールカード） → OFF
- 角丸にする（プロフィールカード） → ON
ということで…
ここまで設定できたら、左上の「公開」ボタンを忘れずにクリックして「プロフィールカード」の基本設定は一旦おわりです🐣
実際のブログ上で確認してみると、画面右側のサイドバーエリアに…
↑ このようなプロフィールカードが表示されました🐣
補足
「プロフィールカードは設置できたけど、周りのサイドバーデザインや余白が画像例と違う…」という場合は、こちらをどうぞ ↓
-
【2023年】AFFINGER6「サイドバーウィジェット」の作り方・消し方＆カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド／第６章／No.8】
続きを見る
-
【2023年】AFFINGER6「サイドバーの余白サイズ」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド／第６章／No.9】
続きを見る
ちなみに、同じ設定画面内に表示されている…
↑ こちらの設定項目では、例えば…
↑ このように、任意の「ボタンURL・ボタンテキスト・ボタンの各種配色」を指定することで…
↑ このような、リンクボタン（オレンジのところ！）を追加させることも可能です
おしまい🐥
あわせてどうぞ
人気記事
あずきのワードプレスブログ「完全初心者」ガイド！
「全８章」の総合TOPページです
