【AFFINGER6】プロフィールカードを作成する方法【ブロよび。風カスタマイズ】

この記事は
【AFFINGER6】サイトデザイン完全マニュアル【ブロよび。風】
のプロフィール編の記事になります。

全ての工程を順番に進めることで「ブロよび。風」デザインが完全再現できるようになっています。

前回の作業が済んでいない方は、こちらの記事に戻ってから作業を進めてくださいね。
関連
＞＞新着記事のカスタマイズ方法【ブロよび風】

こんな人におすすめ

AFFINGER6でブログを運営している
シンプルでおしゃれなデザインにしたい
あれこれ考えるよりも手順通りに操作して完成を目指したい

それでは早速、プロフィールカードの作成方法を一緒にみていきましょう。

完成イメージは以下の通りです。

こんなデザインにしたいという方は手順通りに進めてみてください。

編集長F

「稼ぐ」に特化したおすすめテーマ
ACTION / AFFINGER6

＼当ブログも愛用してます／

AFFINGER6の詳細はこちら

／いますぐゲットする＼

プロフィールカードを作成しよう
プロフィールカードをサイドバーに設置しよう
実際のデザインを確認してみよう
まとめ（次章の内容）

プロフィールカードを作成しよう

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

ニックネームを決める
自己紹介文を書く
アイコンとヘッダーを設定する
改行して段落を整える
固定ページで詳しい自己紹介記事を書く（ボタンでリンクさせる）

参考：イメージ図

やることは多いですが、プロフィールは重要なコンテンツなので頑張りましょう。手順も丁寧に解説していくので安心してください。

それではひとつずつ見ていきましょう。

ニックネームを決めよう

まずはニックネームからです。ニックネームはWordPressの管理画面から設定できます。

手順

「WordPress管理画面」→「ユーザー」→「プロフィール」
「ニックネーム」を入力
「ブログ上の表示名」を選択する

※ブログ上の表示名はプルダウンして選択できます

自己紹介文を書いてみよう

ニックネームが付け終わったら、自己紹介文を書いていきましょう。今ほど作業したニックネーム欄から少し下にスクロールすると、「プロフィール情報」という項目があります。そこに自己紹介文を記載しましょう。

手順

「WordPress管理画面」→「ユーザー」→「プロフィール」
「プロフィール情報」を入力する

特に決まりはありませんが、自己紹介文は以下の内容を入れると良いでしょう。

参考

ブログの内容
誰に向けて発信しているのか（ペルソナの設定）
経歴や実績（あれば）
目標

※あくまで一例です。基本的に何を書いてもOKです！

アイコンとヘッダーを設定しよう

ここまでできたらアイコンとヘッダー画像を設定していきます。手順は以下の通りです。

手順

「WordPress管理画面」→「カスタマイズ」
「オプション（その他）」へ

手順

「プロフィールカード」→「ヘッダー画像」→「画像を選択」
「アバター画像」→「画像を選択」
「公開」

※「画像を選択」をクリックすると「メディアライブラリ」が表示されるので、好きな画像を選択しましょう。

ポイント

参考
アバター画像は150px以上の正方形が推奨されています。
当ブログでは縦横300pxのアバター画像を使用しています。

参考
当ブログではヘッダーに縦300px横600pxの画像を使用しています。

アイコンが自作できない方は、ココナラを利用すると安く作成できます。
もちろん「ブロよび。」のアイコン類は全てココナラで作成しています。デザインにこだわりたい方はオススメです。
ちなみに↓こちらのアイコンは1,000円で作ってもらいましたよ。参考までに。

＞＞ココナラでイラストを作成する

補足：アイコンを丸くする方法

プロフィールのアイコン画像を丸くしたい方は以下の手順を参考にしてください。

手順

「WordPress管理画面」→「AFFINGER管理」
「投稿・固定記事」→「この記事を書いた人」
「アバター画像を丸くする」にチェック

注意
画像が小さくて見えづらかったら拡大してください

改行して段落を整えよう

プロフィール欄の自己紹介文は基本字続きとなります。

自己紹介文を改行して見やすくしたい方は、以下の手順で進めてください。
※こだわりたい方のみでOKです。

まずはAFFINGER管理で設定をしていきます。

手順

「WordPress管理画面」→「AFFINGER管理」
「投稿・固定記事」→「この記事を書いた人」
「プロフィール情報にhtmlタグを許可する」にチェク

これで事前準備は完了です。

続いて「プロフィール情報」をいじっていきます。以下、手順です。

手順

「WordPress管理画面」→「ユーザー」→「プロフィール」→「プロフィール情報」
改行したい箇所に＜br＞を入力する

改行したい文章の頭に＜br＞を入力すると、そこで改行されます。スッキリと見やすい文章にすることができるので、ぜひ参考にしてください。

固定ページで詳しい自己紹介記事を書いてリンクで繋ごう

ここでは、プロフィール詳細ページへとリンクさせるボタンを作成していきます。ですのですでに固定ページでプロフィールを作成してあるという前提で進めていきます。

まだ固定ページでプロフィールを書いていないという方は、ここでの作業はいったん飛ばしてもらってOKです。

※もちろんここで作業を中止して、自己紹介記事を作ってからまた戻ってきてもOKです。

それでは手順を見ていきます。