お知らせ!AFFINGER6・EX・タグマネージャー4 を当サイトよりご購入いただいた方! \限定オリジナル特典/ 『 当サイトの初期設定をすべて公開!! 他 』をお付け致します!

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

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

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

Question

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

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

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

osaboo

ポイント

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

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

 本記事の概要

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

action-affinger6-ex-1

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

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

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

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

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

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

プロフィールカード

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

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

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

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

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

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

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

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

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

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

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

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

WordPress管理-ユーザー-プロフィール

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

WordPress管理-ユーザー-プロフィール-2

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

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

WordPress管理-ユーザー-プロフィール-3

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

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

②と③を入力します。

WordPress管理-ユーザー-プロフィール-4

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

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

WordPress管理-ユーザー-プロフィール-5

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/●●●●/

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

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

WordPress管理-ユーザー-プロフィール-6

プロフィールカード-2

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

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

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

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

プロフィールカードに表示するヘッダー部の画像とアバター画像を設定します。

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

WordPress管理-外観-カスタマイズ

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

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

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

オプション(その他)-プロフィールカード-3
画像設定前

画像は設定手順

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

当サイトでは、以下のようになります。

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

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

サイトへの表示設定

次に、設定したプロフィールカードをサイトへ表示するための設定をします。

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

WordPress管理-外観-ウィジェット

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

WordPress管理-外観-ウィジェット-2

以下のプルダウンメニューが表示されます。

『サイドバートップ』を選択して『ウィジェットを追加』をクリックします。

11_STINGERプロフィールカード

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

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

サイドバートップ

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

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

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

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

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

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

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

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

AFFINGER管理の設定

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

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

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

AFFINGER管理-投稿・固定記事

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

この記事を書いた人

補足

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

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

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

created by Rinker
¥2,486 (2023/01/27 22:56:34時点 楽天市場調べ-詳細)

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

\おすすめレンタルサーバーとドメイン /


WordPress管理の設定

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

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

プロフィールカード設定概要

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

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

action-affinger6-ex-1

ACTION / AFFINGER6

コスパ最強のWordPressテーマ

価格:14,800円(税込)

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

AFFINGER6 ▶︎ 購入はこちら

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

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

AFFINGER6で「ちょっとオシャレな!」プロフィールカッドの作り方を初心者目線でお届けしました。トップページ・記事ページのサイドバー等に配置してサイトアピールをしてください。

当サイトで使用しているパターンをベースにご紹介しましたが…ご覧頂いた方のサイトに合った形にアレンジしてよりオシャレなプロフィールカードを作ってください!!^^

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