広告 WORDPRESS

【2023年】AFFINGER6「プロフィールカード」の作り方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.12】

AFFINGER6「プロフィールカード」の作り方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.12】
 

専業ブロガー6年目のあずき猫です

 

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

「プロフィールカード」の作り方&カスタマイズ設定方法

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 



 

まず、ACTION AFFINGER6における「プロフィールカード」というのは…

AFFINGER6「プロフィールカード」の作り方&カスタマイズ設定方法 top-01

↑ このようなデザインのプロフィールを指します

男前なひよこやな
 

そんなWordPressにおける【プロフィールカード】の作り方とカスタマイズ方法について、3つのステップで丁寧に解説していきます

  1. 「プロフィール設定」を行う
  2. 「ウィジェット設定」を行う
  3. 「カスタマイズ設定」を行う

さっそく見ていきましょー🐥

 

【2023年】AFFINGER6「プロフィールカード」の作り方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.12】

ACTION AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法【ステップ1】プロフィール設定を行う

WordPress ヘッダー b-01

注意

当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数も膨大であることから「情報もググりやすい」ので断然おすすめです)

 

そのため、お手元のWordPress環境が…

  • 無料プラグイン「Classic Editor」を有効化していない!
  • 代わりに、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している!

という状態だと、画面のデザインや設定方法が(当ページの内容と)異なる可能性がありますのでご注意ください

 

▼ 「Classic Editor」を有効化する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > 新規追加 をクリック
  2. 右上の検索フォームに Classic Editor と入力し、表示された「Classic Editor」の インストール > 有効化 を順にクリック 

▼ 「Gutenbergプラグイン2」を停止する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > インストール済みプラグイン をクリック
  2. 表示された一覧のなかから、「Gutenbergプラグイン2」の「無効化」をクリック
 

関連

「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらで1から解説しています ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド【2023年】
WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド

続きを見る

 

まずは、WordPress管理画面の左側一覧から…

ユーザー > プロフィール

をクリックして、「プロフィール」設定画面を開きましょう

 

「プロフィール」設定画面を開いたら、そのなかに表示されている…

AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法 1-1-01

↑ ニックネーム(必須) という項目で、プロフィールカードに表示される任意の「ニックネーム」を入力し、さらに…

AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法 1-1-02

↑ プロフィール情報  という項目で、プロフィールカードに掲載される「プロフィール文」を入力します

その下の【プロフィール写真】については別のとこで設定できるから、ここでは「そのまま」でOKだよ!
 

注意

「プロフィール」設定画面の【ニックネーム】と、そのすぐ下にある【ブログ上の表示名】という項目は、いずれも初期状態で…

ログイン時に使用する「ユーザー名」

と同じ文字列に設定されてしまっています

 

つまり初期状態のままだと「実際の画面上で大切なユーザー名が漏洩してしまう」という恐れがあるので、この2項目についてはWordPressでブログを開設したら…

第三者に見られても安全な名称

に変更しておくのが定石です

 

くわしくは、第2章「ブログ開設後の初期設定」編のこちらの記事にて1から解説しています ↓

WordPressの「ニックネーム設定」変更方法をブログ初心者向けに優しく解説【ユーザー名(ログインID)の漏洩対策】
WordPressの「ニックネーム設定」変更方法をブログ初心者向けに優しく解説【ユーザー名(ログインID)の漏洩対策】

続きを見る

 

また、「Twitter」や「YouTube」などの各種SNSをやっている場合は…

AFFINGER6「プロフィールカード」の作り方&カスタマイズ設定方法 1-1-03-a

↑ このように、各SNSアカウントの「プロフィールURL」や「チャンネルURL」を入力することで、プロフィールカード内に…

AFFINGER6「プロフィールカード」の作り方&カスタマイズ設定方法 1-1-03-b

↑ このような「SNSリンク」ボタンが自動で挿入されます

 

補足

Twitterの場合、「プロフィールURL」は…

https://twitter.com/●●●●●

という形で、 ●●●●● にはご自身のアカウントの「ユーザー名」が入ります(先頭の「@」は入れなくてOK!)

 

ということで…

 

ここまで設定できたら画面下部の「プロフィールを更新」ボタンをクリックして、【ステップ1】は完了です🐥

 

ACTION AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法【ステップ2】ウィジェット設定を行う

WordPress ヘッダー b-02

まずは、WordPress管理画面の左側一覧から…

外観 > ウィジェット

をクリックして、「ウィジェット」設定画面を開きましょう

 

つづいて、画面の【左側】エリアから…

11_STINGERプロフィールカード

というウィジェットを見つけて右側の ▼(開くボタン) をクリックし、開いたメニュー内から…

AFFINGER6「プロフィールカード」の作り方&カスタマイズ設定方法 1-2-01

↑「サイドバーウィジェット」を設置先として選択し、「ウィジェットを追加」ボタンをクリックします

 

これで、画面の【右側】エリアにある「サイドバーウィジェット」という場所に…

AFFINGER6「プロフィールカード」の作り方&カスタマイズ設定方法 1-2-02

↑【11_STINGERプロフィールカード】のウィジェットが追加されたことを確認しましょう(タイトル欄は、入力しないままでOK!)

 

ちなみに、この【11_STINGERプロフィールカード】というウィジェットは…

AFFINGER6「プロフィールカード」の作り方&カスタマイズ設定方法 1-2-03

↑ このようにドラッグ&ドロップすることで、実際のブログ画面上での「並び順」を自由に変更することもできます

今回は例として「一番上」に移してみるよ!
 

補足

上の画像例では、サイドバーウィジェットの初期状態から「いくつかの変更」を加えている状態です

 

具体的には、こちらをどうぞ ↓

AFFINGER6「サイドバーウィジェット」の作り方・消し方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.8】
【2023年】AFFINGER6「サイドバーウィジェット」の作り方・消し方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.8】

続きを見る

 

補足

上の画像例では、サイドバーエリアの「余白調整」用に【テキスト】というウィジェットを追加しています

 

サイドバーエリアの「余白調整」については、こちらから ↓

AFFINGER6「サイドバーの余白サイズ」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.9】
【2023年】AFFINGER6「サイドバーの余白サイズ」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド/第6章/No.9】

続きを見る

 

ということで…

 

この時点で、サイドバーエリアに「プロフィールカード」はもう設置できましたので、最後に「プロフィールカードのカスタマイズ設定」のやり方を見ていきましょう🐥

プロフィールカードの完成例も、あわせて紹介するよ!
 

ACTION AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法【ステップ3】カスタマイズ設定を行う

WordPress ヘッダー b-03

まずは、WordPress管理画面の左側一覧から…

外観 > カスタマイズ

をクリックして「カスタマイズ」設定画面を開き、さらにそのなかの左側一覧から…

オプション(その他) > プロフィールカード

というタブをクリックして開きましょう

 

「プロフィールカード」タブを開くと、そのなかに…

AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法 1-3-01

↑ こちらの…

  • ヘッダー画像(プロフィールカード)
  • アバター画像(プロフィールカード)

という項目があるので、それぞれ「画像を選択」ボタンから今回使用したい画像ファイルを選択し、WordPressにアップロードします

ここで言う「ヘッダー画像」は背景で、「アバター画像」はアイコンのことだよ!
 

使用される画像素材についてはご自身でもちろん用意していただく形になりますが、参考までに当ブログで使用している各種プロフィールアイコンは、日本最大級のスキルマーケット「ココナラ 」にて発注し有料で制作していただいています(無料の会員登録で、【300円の割引クーポン】もプレゼントされます)

 

画像ファイルのアップロード手順

「画像を選択」 > 左上のタブが「ファイルをアップロード」になっていることを確認
 > 画面中央の「ファイルを選択」 > ご自身で用意した、任意の画像ファイルを選択
 > 画面右側の「代替テキスト」に、画像の簡単な説明を入力(例:プロフィールヘッダー)
 > 画面右下の「画像を選択」

 

関連

画像ファイルのアップロード手順と「代替テキスト」の設定方法については、こちらの記事で1から丁寧に解説しています ↓

AFFINGER6「画像」の貼り方&カスタマイズ、代替テキスト(alt属性)の設定方法【ワードプレスブログ「完全初心者」ガイド/第7章/No.14】
AFFINGER6「画像」の貼り方&カスタマイズ、代替テキスト(alt属性)の設定方法【ワードプレスブログ完全初心者ガイド】

続きを見る

※こちらは「記事内」における画像のアップロード手順ですが、「ファイルをアップロード」以降の手順については、今回の「カスタマイズ」設定画面でも同様です

 

つづいて、その下側に…

AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法 1-3-02-a

↑ プロフィールカードの「配色」や「デザイン設定」を行う項目が並んでいるので、こちらで任意の内容にカスタマイズしましょう

 

今回は例として…

AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法 1-3-02-b

↑ このような配色・デザインに設定してみました

  • アバター画像に影をつける(プロフィールカード) → ON
  • ボーダー色(プロフィールカード) → 空欄のまま
  • 背景色(プロフィールカード) → #f7f7f7
  • テキスト色(プロフィールカード) → #515151
  • 影をつける(プロフィールカード) → OFF
  • 角丸にする(プロフィールカード) → ON

ということで…

 

ここまで設定できたら、左上の「公開」ボタンを忘れずにクリックして「プロフィールカード」の基本設定は一旦おわりです🐣

 

実際のブログ上で確認してみると、画面右側のサイドバーエリアに…

AFFINGER6「プロフィールカード」の作り方&カスタマイズ設定方法 1-3-03

↑ このようなプロフィールカードが表示されました🐣

 
 

ちなみに、同じ設定画面内に表示されている…

AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法 1-3-04-a

↑ こちらの設定項目では、例えば…

AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法 1-3-04-b

↑ このように、任意の「ボタンURL・ボタンテキスト・ボタンの各種配色」を指定することで…

AFFINGER6「プロフィールカード」の作り方とカスタマイズ方法 1-3-04-c

↑ このような、リンクボタン(オレンジのところ!)を追加させることも可能です

 

おしまい🐥

ここまでお疲れさま!
 
 

人気記事

 

各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます

ワードプレスブログ「完全初心者」ガイド!

全8章の「総合TOP」ページです

ワードプレスブログ「完全初心者」ガイド

 
プロフィールカード bg-01
プロフィールカードアイコン main-02

あかね猫

専業ブロガー7年目 / 元アパレル(歴10年)/ 2024年からYouTubeも本格的に始めました!(旅行系チャンネル)

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS