広告 WORDPRESS

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

2023年5月25日

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

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

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

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

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

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

男前なひよこやな

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

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

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

Contents

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

【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」の「無効化」をクリック

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

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

外観　＞　ウィジェット

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

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

11_STINGERプロフィールカード

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

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

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

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

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

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

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

補足

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

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

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

補足

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

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

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

ということで…

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

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

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

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

外観　＞　カスタマイズ

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

オプション（その他）　＞　プロフィールカード

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

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

↑ こちらの…

ヘッダー画像（プロフィールカード）
アバター画像（プロフィールカード）

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

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

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

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

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

関連

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