WORDPRESS

AFFINGER6「プロフィールカード(サイドバー)」の作り方とカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

AFFINGER6「プロフィールカード(サイドバー)」の作り方とカスタマイズ方法
 

あずきです🐥

 

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

「プロフィールカード(サイドバー)」の作り方とカスタマイズ方法

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

 

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

 

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

 

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

赤枠で囲ったとこ!
 

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

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

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

 

 

AFFINGER6「プロフィールカード(サイドバー)」の作り方とカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

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

WordPress ヘッダー b-01

 

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

ユーザー > プロフィール

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

 

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

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

↑ ニックネーム(必須) という項目で、プロフィールカードに掲載される「ニックネーム」を指定し、さらに…

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

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

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

注意

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

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

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

 

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

第三者に見られても問題ない名称

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

 

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

WordPressの「ニックネーム設定」変更方法
【2021年】WordPressの「ニックネーム設定」変更方法を初心者向けに解説【ユーザー名の漏洩対策】

続きを見る

 

また、Twitterをやっている場合は…

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

↑ twitter(URL) という項目に、Twitterアカウントの【プロフィールURL】である…

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

を入力すると、プロフィールカードに「Twitterリンクボタン」も追加することができます

●●●●●の部分には、Twitterアカウントの「ユーザー名」を入れればOK!(ただし先頭の「@」は入れないよ!)
 

ということで…

 

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

 

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

WordPress ヘッダー b-02

 

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

外観 > ウィジェット

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

 

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

11_STINGERプロフィールカード

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

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

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

 

これで、画面の【右側】エリアにある…

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

↑「サイドバーウィジェット」という場所に、【11_STINGERプロフィールカード】のウィジェットが追加されたことを確認しましょう

 

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

AFFINGER6「プロフィールカード(サイドバー)」の作り方とカスタマイズ方法 1-2-03

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

今回は例として、【検索】と【最近の投稿】の間に入れてみるよ!
 

ということで、【ステップ2】もこれで完了です🐥

 

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

WordPress ヘッダー b-03

 

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

外観 > カスタマイズ

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

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

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

 

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

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

↑ こちらの…

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

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

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

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

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

 
 

つづいて、その下側に…

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

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

 

今回の記事はこちらの章に属しています

 第6章 デザイン 編          

次の章はこちらからどうぞ

 第7章 記事投稿 編          

全9章のTOPページです

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

 

-WORDPRESS