この記事には広告が含まれています。

AFFINGER6:プロフィールカードの作成方法【初心者向け】

AFFINGER6(アフィンガー6)プロフィールカードの作成方法【初心者向け】

この記事がお勧めな方

  • AFFINGER6でプロフィールカードの作成方法を知りたい方
  • AFFINGER6のプロフィールカードがどんな感じか知りたい方
  • プロフィールカード用のアイコン画像を用意する方法を知りたい方

プロフィールカードはブログを見に来てくださった方向けに自分を紹介するカードのことです。

こんな感じのプロフィールカードです。

AFFINGER6:プロフィールカード

プロフィールカード作成方法

プロフィールカードの作成する手順は次の通りです。

  • プロフィールカード用の画像を準備する
  • プロフィールカードをサイドバーに設置する
  • プロフィール画像を設定する
  • ヘッダー画像を設定する
  • 固定ページへのボタンを設定する
  • プロフィールカードのデザインを設定する
  • プロフィールカード内の自己紹介文を作成する

STEP.1 プロフィールカード用の画像を準備する

まずはプロフィールカード用のアイコンやヘッダー画像を準備します。

ハムタ
ハムタ

プロフィール画像はどうやって用意するの?

プロフィール用画像を用意する方法

プロフィール用画像を用意するには次のような方法があります。

  • 無料のイラスト素材サイトを利用する
  • 有料でオリジナルアイコン画像を作成してもらう
  • 自分で作成する

① 無料のイラスト素材サイトを利用する

プロフィール用画像を用意する一番簡単な方法は無料のイラスト素材サイトなどを利用することです。

お勧めの無料イラスト素材サイトをご紹介します。

② 有料でオリジナルアイコン画像を作成してもらう

また、有料になってしまいますがオリジナルのアイコン画像を作成してもらうのもお勧めです。

私の場合、オリジナルのアイコン画像というだけでブログ作成のモチベーションアップにも繋がっています。

オリジナルのアイコン画像は「ココナラ」でイラストレーターさんに依頼して作成してもらうのがお勧めです。

私も「ココナラ」でプロフィール用のアイコン画像を作成してもらいました。

「ココナラ」でアイコンを作成してもらう流れについてはこちらの記事をご覧になってください。

関連記事

③ 自分で作成する

イラストレーターなどを使える方なら自分でアイコン画像を作成することも可能です。

また、現在ではAIによる画像作成がとても簡単にできる時代になりました。

AI画像作成サイトやアプリなどで自分のアイコンを作成することも可能ですが、AIによる画像作成に関しては著作権の問題で今後どのような扱いになるのか不透明なところがあります。

AIによって作成したアイコン画像を使用する際は著作権について注意するようにしましょう。

AI画像の著作権について文化庁の見解・参考資料を確認することができます。

いくつか参考になるような項目をまとめておきます。

  • AI画像もAIを利用せずに絵を描いた場合と同様の著作権が適応される
  • AI生成物が既存の著作物と「類似性」と「依拠性」が認められる場合はNG,
  • 「類似性」と「依拠性」が認められる場合でも権利者から許可があればOK
  • 私的鑑賞での生成物はOK
  • 授業目的の複製はOK

何か難しくてAI画像の利用に不安を感じるかもしれないですね。

しかし、AI画像の利用がどんどん一般化しています。

著作権に注意しながらAI画像を積極的に利用していく時代になったのかなと感じています。

背景画像を用意する方法

ヘッダーに画像を使用したい場合はヘッダー用の画像も準備しておきます。

無料で使用できる写真素材サイトをいくつか紹介します。

【無料で利用できる写真素材サイト】

ヘッダー画像だけではないですが、ブログで使用する画像を作成するのに「Canva」がお勧めです。

→ Canva公式サイト

「Canva」は無料で利用できる「Canva」と有料(月額1,500円)の「Canva Pro」があります。

「Canva Pro」は使用できる素材の量が圧倒的に多いのでとてもお勧めなんですが、初心者の方は「Canva」で操作などに慣れてから「Canva Pro」に移行してもいいと思います。

余裕のある方は断然「Canva Pro」がお勧めなので、最初から有料バージョンを利用してみてください。

「Canva」の使い方についてはアイキャッチ画像の作成についての別記事が参考になると思いますのでご覧になってください。

アイキャッチ画像の設定方法【WordPress】
WordPress:アイキャッチ画像を設定する方法【初心者向け】

2024/7/13    ,

この記事がお勧めな方 アイキャッチ用の画像を準備する方法を知りたい方 記事にアイキャッチ画像を設定する方法を知りたい方 アイキャッチ画像の設定手順 アイキャッチ画像を設定する手順は次の通りです。 アイ ...

【Canva】アイキャッチ画像の作成方法
「Canva」でアイキャッチ画像を作成する方法【初心者向け】

2024/7/13    ,

この記事がお勧めな方 この記事は次のような疑問を解決したい方にお勧めになっています♪ アイキャッチ画像を作成したいけど、どうしたらいいの? アイキャッチ画像のサイズはどれくらいがいいの? 「Canva ...

パパくま
パパくま

プロフィールカード用のアイコン画像や背景画像の準備ができたらSTEP.2に進もう!

STEP.2 プロフィールカードをサイドバーに設置する

プロフィールカードは「外観」→「カスタマイズ」から編集することができます。

「カスタマイズ」ではブログの実際の表示を確認しながら、色々な設定をすることができます。

「外観」→「カスタマイズ」を選択してみます。

カスタマイズ画面【アフィンガー6】
ハムタ
ハムタ

あれ?プロフィールカードが表示されてないよ?

まず、プロフィールカードをサイドバーに設置しないと「カスタマイズ」の画面には表示されません。

パパくま
パパくま

なので、プロフィールカードをサイドバーに設置します。

※ プロフィールカードはサイドバー以外にも設置可能ですが、サイドバーに設置するのがお勧めです。

プロフィールカードをサイドバーに設置する手順

「外観」→「ウィジェット」を選択します。

「STINGERプロフィールカード」をクリックします。

「サイドバーウィジェット」を選択します。

「ウィジェットを追加」をクリックします。

外観→ウィジェットでSTINGERプロフィールカードをサイドバーウィジェットに追加する。

サイドバーウィジェット内に「プロフィールカード」が表示されます。

外観→ウィジェットでSTINGERプロフィールカードをサイドバーウィジェットに追加した画面

再度「外観」→「カスタマイズ」を選択してみましょう。

プロフィールカードを確認することができるようになりました。

外観→カスタマイズでプロフィールカードを確認する

STEP.3 プロフィール画像を設定する

「カスタマイズ」画面のまま作業をしていきます。

「オプション(その他)」を選択します。

カスタマイズのオプション(その他)を選択

プロフィールカードを選択します。

カスタマイズのプロフィールカードを選択

アバター画像の「画像を選択」をクリックします。

アバター画像の「画像を選択」をクリックする。

アバター画像として使用したいプロフィール画像ファイルを選択します。

アバター画像として使用したいプロフィール画像ファイルを選択してアップロードする。

プロフィール画像が表示されたのが確認できたと思います。

プロフィールカードにプロフィール画像が表示された状態

STEP.4 ヘッダー画像を設定する

ヘッダー画像は特に設定する必要はないですが、ちょっとオシャレにしたいと思った方は設定してみてください。

ヘッダー画像から「画像を選択」をクリックします。

ヘッダー画像に使用したい画像ファイルを選択すればOKです。

ヘッダー画像のサイズは横500px×縦150px程度がお勧めです。

実際にヘッダー画像を設定するとこんな感じになります。

プロフィールカードにヘッダー画像が表示された状態

STEP.5 固定ページへのボタンを設定する

自分のプロフィールやお問い合せの固定ページがある場合、そのページにリンクするボタンをプロフィールカードに設置しいる方も多いです。

ボタンを設置するには

① 「ボタンURL」に固定ページのURLを入力する

② 「ボタンテキスト」にボタンに表示させたいテキストを入力する

③ ボタンの色などデザインを設定する

プロフィールカードにボタンを設置する手順

ボタンを設定するとこんな感じになります。

プロフィールカードにボタンを設置した画像

STEP.6 プロフィールカードのデザインを設定する

プロフィールカードのボーダー色や背景色などを変更することもできます。

また、プロフィールカードに影をつけたり、角丸にしたりすることもできます。

実際に操作して試してみてください。

プロフィールカードのデザインを設定する画面

これでプロフィールカードのデザイン系はとりあえずOKなので、いったん左上の「公開」ボタンをクリックします。

STEP.7 プロフィールカード内の自己紹介文を作成する

プロフィールカード内の自己紹介文はWordpressメニューの「ユーザー」→「プロフィール」から行います。

プロフィール情報欄に簡単な自己紹介を入力しましょう。

プロフィール情報の入力欄

また、プロフィール情報入力欄の上にSNSのURLが入力できる欄があります。

ツイッターなどのSNSがあるなら、登録しておきましょう。

SNSのURL入力欄

入力が終了したら、画面下の「プロフィールを更新」をクリックして保存します。

再度「外観」→「カスタマイズ」を選択して確認してみます。

自己紹介文がプロフィールカードに表示されているのが確認できたと思います。

プロフィールカードに自己紹介文が掲載された状態
ハムタ
ハムタ

自己紹介文で改行したいところがあるんだけど?

自己紹介文はそのままでは改行されずに表示されてしまいます。

改行したいなぁと思う方もいると思いますので改行する方法を説明します。

プロフィールカードの自己紹介文を改行する方法

「AFFINGER管理」→「投稿・固定記事」→「この記事を書いた人」を選択します。

「AFFINGER管理」→「投稿・固定記事」→「この記事を書いた人」を選択

「プロフィール情報にhtmlタグを許可する」にチェックを入れて保存します。

「プロフィール情報にhtmlタグを許可する」にチェックを入れて保存する

「プロフィール」の自己紹介入力欄で改行したいところに「<br>」と入力します。

入力が終わったら下の「プロフィールを更新」をクリックして保存してください。

プロフィール情報入力欄で改行したい場所に<br>と入力する

「外観」→「カスタマイズ」で確認すると自己紹介文が改行されているのが確認できると思います。

プロフィールカードで自己紹介文が改行された状態
ハムタ
ハムタ

自己紹介文を左寄せにしたいんだけど?

プロフィールカードの自己紹介文を左寄せにする方法

自己紹介文はそのままでは中央寄せの表示になります。

左寄せにするには「プロフィール」の自己紹介入力欄の最初に「<p style="text-align:left">」最後「</p>」と入力します。

入力が終わったら下の「プロフィールを更新」をクリックして保存してください。

プロフィール」の自己紹介入力欄の最初に「<p style="text-align:left">」最後「</p>」と入力する

「外観」→「カスタマイズ」で確認すると自己紹介文が左寄せになっているのが確認できると思います。

プロフィールカードで自己紹介文が左寄せされた状態

以上がAFFINGER6(アフィンガー6)のプロフィールカード作成方法の解説になります。

ブログの記事を書くのにAIライティングツールを利用すると効率を上げることができます。

ハムタ
ハムタ
パパくま
パパくま

現在は多くのAIライティングツールがあります。

そのほとんどが無料お試しでの利用が可能です。

お試し期間が限定のツールもありますが、中には機能制限はありますがずっと無料で利用できるツールもあります。

無料お試しがずっと可能なAIライティングツールをまとめてみたので、是非試してみてください。

関連記事
AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説
AFFINGER6で出来ること【まとめ】-AFFINGER6を徹底解説

2024/11/28  

AFFINGER6を使ってみたい!気になる!という方向けに AFFINGER6ってどんなテーマ? AFFINGER6でどんなことができるの? AFFINGER6を使うにはどうすればいいの? といった内 ...

(通常版)AFFINGER6と(上位版)AFFINGER6 EXの違い【まとめ】
(通常版)AFFINGER6と(上位版)AFFINGER6 EXの違い【まとめ】

AFFINGER6を購入しようと検討している方や既に通常版のAFFINGER6を使用している方で、その違いが気になる方も多いと思います。 そこで、この記事では(通常版)AFFINGER6と(上位版)A ...

『SWELL』ってどうなの?-実際に利用したメリットとデメリットをガチレビュー!
『SWELL』ってどうなの?-実際に利用したメリットとデメリットをガチレビュー!

2024/11/28    

SWELLはとても人気の高いテーマです。 この記事はSWELLが気になる方向けにメリットとデメリットを紹介しています。 価格 17,600円(税込み) シンプル&高機能なWordPressテーマ! 最 ...

AFFINGER6は初心者が購入しても大丈夫?-初心者にお勧めの理由
AFFINGER6は初心者が購入しても大丈夫?-初心者にお勧めの理由

AFFINGER6を購入しようと思っている初心者の方は、解らないことが多いからこそ購入に対して不安を感じるかもしれません。 この記事は、実際に知識ゼロからAFFINGER6を使用した私が断言できる内容 ...

AFFINGER6の購入とインストール方法

AFFINGER6の購入方法と購入プランの選び方
【知っておくべき!】AFFINGER6の購入方法と購入プランの選び方-⑤種類から最適を選択!

AFFINGER6を使ってみたい! という方に ちょっと待ってください! AFFINGER6を購入する際には複数のプランが存在しますので、自分の取り組み方に合った購入方法を選択した方がお得に購入できま ...

AFFINGER6(アフィンガー6)のインストール方法【画像付き!詳細解説】
AFFINGER6(アフィンガー6)のインストール方法-初心者でも安心!購入プランから徹底解説!

初心者でも大丈夫! AFFINGER6の購入からインストールして使えるようにするまでの手順や注意点を詳しく解説しています。 AFFINGER6を使うまでの手順 AFFINGER6を利用する手順は次のよ ...

AFFINGER6(アフィンガー6)EX版の購入とアップグレードの方法
AFFINGER6(アフィンガー6)EX版の購入とアップグレードの方法

この記事ではAFFINGER6の上位版である「AFFINGER6EX」へのアップグレード方法を解説しています。 AFFINGER6EX版にアップグレードする為の条件 AFFINGER6からEX版にアッ ...

AFFINGER6の設定関係

AFFINGER6導入後にまず何をしたらいいの?-初心者にお勧めの初期設定4項目
AFFINGER6導入後にまず何をしたらいいの?-初心者にお勧めの初期設定4項目

「ブログで稼ぎたい!」 って思いブログを始めた初心者の方も多いと思います。 収益化するには何より記事を作成しなければ話になりません。 この記事ではAFFINGER6を始めたばかりの初心者の方向けに、い ...

WordPressお勧めプラグイン【アフィンガー6】
AFFINGER6(アフィンガー6)にお勧めのプラグイン【初心者向け】

AFFINGER6にお勧めのプラグインを9つ紹介しています。 初心者の方は何を導入すればいいのか解らないと思いますので、是非参考にしてみてください。 プラグインとは? 「プラグイン」とはワードプレスを ...

AFFINGER6のアップデート方法(2パターンを解説)
AFFINGER6のアップデート方法(2パターンを解説)

この記事がお勧めな方 AFFINGER6のアップデート方法を知りたい方 AFFINGER6の手動でのアップデート方法が知りたい方 AFFINGER6で自動更新のお知らせを設定する方法を知りたい方 AF ...

AFFINGER6(アフィンガー6)でグーグルアナリティクスを導入する方法
AFFINGER6(アフィンガー6)でGoogleアナリティクスを導入する方法

ここではAFFINGER6(アフィンガー6)でGoogleアナリティクスを導入する方法を初心者向けに解説しています。 AFFINGER6(アフィンガー6)では簡単にGoogleアナリティクスを導入して ...

AFFINGER6:Googleサーチコンソールへの登録方法
AFFINGER6:Googleサーチコンソールへの登録方法

Googleサーチコンソールではあなたのサイトが「どんなキーワードで表示されたのか」を確認することができたり、あなたのサイトのページが「どれくらいインデックスされているか」などを調べることができます。 ...

AFFINGER6のステマ規制対策-広告表記を表示させる方法
AFFINGER6のステマ規制対策-広告表記を表示させる方法

この記事ではステマ規制対策としてAFFINGER6(アフィンガー6)で記事に「広告」表記を表示させる方法を解説しています。 ステマ規制とは2023年10月から開始された「ステルスマーケティング」に対す ...

AFFINGER6の使い方

AFFINGER6の使い方
AFFINGER6の使い方【まとめ】-初心者向けガイド-

この記事はAFFINGER6(アフィンガー6)の使い方を初心者向けに詳しく解説しています。 見出しの作成方法 記事作成の基本!見出し作成や見出しについての記事です。 カテゴリーの作成とカテゴリーページ ...

    AFFINGER6のデザインカスタマイズ

    AFFINGER6:カスタマイズ方法
    AFFINGER6のカスタマイズ方法-初心者向けガイド-

    この記事ではAFFINGER6のカスタマイズ方法を初心者向けに詳しく解説しています。 デザインカードプラグインでサイトデザインを変更する方法 プラグインでサイトデザインを簡単に変更できるようになりまし ...