広告

AFFINGER6「ちょっとオシャレな!」プロフィールカードの作り方

11534_affinger6-profile-card-1

こんにちは "osaboo"です。"@osaboo_Bot"

Question

プロフィールカードを入れて自分をアピールしたいけど…どうやる?
プルフィール文章も綺麗に入れたいけど…

このような「疑問を解決する」お手伝いをします!

AFFINGER6なら簡単おしゃれにすぐできるよ!^^

osaboo

ポイント

  1. プロフィール背景用の画像を用意する。 ▶︎ https://pixabay.com/ja/ 『高画質なフリー画像素材』
  2. アバター用の画像を用意する。
  3. プロフィール文を考えておく。

上記の準備をして置くとスムーズにプロフィールカードが作れます。

記事の概要

  • プロフィールカードとは…
  • AFFINGER6で作る!プロフィールカード作成基本手順
    1. プロフィールの設定 ◀︎ ニックネーム・SNS・テキスト
    2. プロフィールカードの設定 ◀︎ ヘッダー・アバター画像
    3. サイトへの表示設定
  • プロフィールを ちょっと見やすく!
    1. AFFINGER管理の設定
    2. WordPress管理の設定
  • まとめ!

プロフィールカードとは…

11534-101

プロフィールカードとは、「筆者の経歴・趣味・特技・好み」等のプロフィールをカード型に表記したものを指します。多くの個人ブログの場合、サイドバーの上部・中部に設置されています。当ブログでも同様にサイドバーの上部に設置しています。

11534-1

◀︎ 当サイトのプロフィールはこんな感じです。

自分の個性(キャリア)等をアピールするために表示するのはとても重要!

作り方は簡単なので「是非」作りましょう。

基本作業内容は以下です。

  1. ニックネームを決める
  2. SNSボタンの表示選択
    • ボタン設定URL等
  3. プロフィール情報(文)を書く
  4. プロフィール背景用の画像の設定
  5. アバター用の画像の設定
  6. ボタン設定(除外)

\ それでは手順をご紹介します。/

AFFINGER6で作る!プロフィールカード作成基本手順

11534-102

この章では、「プロフィールの設定」▶︎「プロフィールカードの設定」▶︎「サイトへの表示方法」の順序で説明します。

プロフィールの設定 ◀︎ ニックネーム・SNS・テキスト

『WordPress管理画面』よりプロフィールカードに表示される項目を記入します。

『WordPress管理>ユーザー>プロフィール』をクリックします。

11534-2

以下の画面が表示されたら『ニックネーム』が表示されるまで、下側にスクロールします。

11534-3

ニックネームは、プロフィールカードのアバターの下に表示されます。

①『ニックネーム』を記入します。(※ 必須項目は全て入力します。)

11534-4c

少し下にスクロールします。

②『SNSボタン』プロフィールカードの下部に表示されます。
③『プロフィール情報』ニックネームの下に表示されます。◀︎ 表示変更方法はこちらで!

②と③を入力します。

11534-5-1a

All in One SEO プラグインを利用している場合、以下の画面のように項目が増えているので注意が必要です。赤枠部のところに各々の「ID」入れます。

注)All in One SEO プラグインを利用している場合の参考画面です。

11534-5-2

SNSボタン記入方法▶︎補足

All in One SEO プラグインを使用している場合は 2. 3. を入力します。
通常は、4. 5. 6. の各々の(URL)を入力します。

  1. サイト ▶︎ https://●●●●/
  2. Twitter ▶︎ @●●●(AII in One SEOを利用している場合)
  3. Facebook ▶︎ ●●●(AII in One SEOを利用している場合)
  4. twitter(URL)▶︎ https://twitter.com/●●●●
  5. facebook(URL)▶︎ https://www.facebook.com/●●●●
  6. instagram(URL)▶︎ https://www.instagram.com/●●●●/

最下部までスクロールします。

必要事項の入力が完了したら『プロフィールを更新』をクリックします。

11534-6

11534-1-1

①②③の表示位置は左の画面の様になります。

  • ①『ニックネーム』
    • 『ブログ上の表示名』の白枠部にも「ニックネーム」を入れた方が分かりやすいです。
  • ②『SNSボタン』
    • アカウント名・URL を入力します。
    • ホームボタンは『サイト』の白枠部に「サイトURL 」を入力します。
  • ③『プロフィール情報』
  • 完了
osaboo

次の章で…
「背景とアバター」の画像を設定していくよ。^^

プロフィールカードの設定 ◀︎ ヘッダー・アバター画像

『WordPress管理>外観>カスタマイズ』をクリックします。

11534-7

カスタマイズメニューが表示されたら『オプション(その他)>プロフィールカード』の順にタブメニューを開きます。

11534-8
11534-9

以下の赤枠部で画像の選択・変更・削除を行います。

11534-12
画像設定前

画像は設定手順

  • 『プロフィールカード』のタブメニューが左の様に表示されます。
  • 『ヘッダー画像(プロフィールカード)』
    • 『画像を選択』をクリックして画像を選びます。
  • 『アバター画像(プロフィールカード)』
    • 『画像を選択』をクリックして画像を選びます。
  • 『公開』をクリックします。

11534-10
11534-11

『選択・変更・削除』を終え確認したら『公開』をクリックして完了です。

サイトへの表示設定

『WordPress管理>外観>ウイジェット』をクリックします。

11534-13

以下の画面が表示されたら「利用できるウィジェット」の項目から『11_STINGERプロフィールカード』をクリックします。

11534-14

以下のプルダウンメニューが表示されるので『サイドバートップ』を選択して『ウィジェットを追加』をクリックします。

11534-15

今回の説明では『サイドバートップ』にウィジェットを追加します。◀︎ サイトに適した追加場所を選択してください。

追加されると以下の様に表示されます。◀︎ 表示される上下位置がドラッグ&ドロップで移動できます。

11534-16a

以上で、プロフィールカードがサイドパーのトップ領域に表示されます。

\ 初心者でも安心」!コスパ最強の洗練されたWordPressテーマ /

AFFINGER6 購入 ▶︎ 詳しくはこちら

プロフィールを ちょっと見やすく!

11534-104

アバター画像・プロフィール情報の表示 等少しだけ見栄えが良くなるおすすめの設定をご紹介します。

AFFINGER管理画面とWordPress管理画面の両方での設定です。

AFFINGER管理の設定

AFFINGER管理の設定を変更します。

  1. アバター画像を丸くします。◀︎(チェックを入れる)
  2. プロフィール情報にhtmlを許可します。◀︎(チェックを入れる)

『AFFINGER管理>投稿・固定記事>この記事を書いた人』をクリックします。

11534-17

以下の2箇所にチェックを入れます。

11534-18

補足

アバター画像を丸くする(※コメント欄のアバター画像含む)◀︎ おすすめです。

プロフィール情報にhtmlタグを許可する ◀︎ 「幅・振り分け・改行」等の自由度が広がります。

例えば:
<br> を入れて「改行」する。
<p class="●●”>テキスト</p> で、「センター振り分け・強調」等のテキスト変更する。
など色々できる様になるので試してください。

created by Rinker
¥2,486 (2022/10/04 10:24:24時点 楽天市場調べ-詳細)

設定変更が完了したら『Save』をクリックします。

『403 Error』で困ったらこちらをご覧ください。

2120_affinger6-403error-1
AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!

ロリポップ!レンタルサーバーを使用してAFFINGER6(ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない! こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ!

ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!


WordPress管理の設定

設定メニューと変更される部位は以下の様になります。(参考)

『WordPress管理>カスタマイズ>オプション(その他)>プロフィールカード』順にタブメニューを開きます。

11534-19a

以上で、プロフィールカードの作り方は終了です。お疲れ様でした。

「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

価格:14,800円(税込)

今なら漏れなく特典付き!!

AFFINGER6 購入 ▶︎ 詳しくはこちら

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

まとめ!AFFINGER6「ちょっとオシャレな!」プロフィールカードの作り方

AFFINGER6で「ちょっとオシャレな!」プロフィールカッドの作り方を初心者目線でお届けしました。トップページ・記事ページのサイドバー等に配置してサイトアピールをしてください。当サイトで使用しているパターンをベースにご紹介しましたが…ご覧頂いた方のサイトに合った形にアレンジしてよりオシャレなプロフィールカードを作ってください!!^^

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。