AFFINGER6のプロフィールの作り方！

ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

AFFINGER5でもプロフィールの作成機能がありましたが、AFFINGER6でも引き続き同じような機能があります。使い方等は大きく変わりはありません。

AFFINGER6で新しく追加された機能も含めプロフィールの作り方をお伝えしていきます。

　ブロガーが欲しい機能が満載のワードプレステーマ「AFFINGER6/ACTION」
⇒AFFINGER6（アフィンガー6）の公式ページを確認する。
※今なら、5大購入特典をお付けしています！

関連記事【AFFINGER6のレビュー】実際使ってみた感想と評判。

※　AFFINGER6（ACTION）は　AFFINGER5（WING）の後継版です。
⇒　違いについてはコチラの記事でどうぞ。

AFFINGER6のプロフィール

プロフィール関連でできることは以下のようになっています。プロフィールカードについては「旧プロフィールカード」などに戻すことも可能。

プロフィールカードのデザインが詳細にできるようになっています。

1. プロフィールカード
2. 「この記事を書いた人」の表示
3. 投稿日のデザイン調整

次の章でお見せするプロフィールカードデザインの1部の作り方を最後の章で説明しています。

　速報！
芸大卒のなつが作ったデザインのマニュアルも特典に追加しました。

⇒　詳しくはコチラをご覧ください。

※ヘッダーの画像は、イラストACのイラストレーターさん方の作品です。特典内でURLをお伝えしています。

プロフィールカード

プロフィールカードはAFFINGER5でも綺麗なデザインが作れましたが、今回もさらに角を丸くすることもできます。

誘導ボタンはグラデーションも可能です。

ここでは作り方と、ちょっとしたアレンジをお伝えします。

プロフィールカードとは

プロフィールカードは、サイドバーなどに配置するボックス型のプロフィールのことです。AFFINGER5のデザインであるシンプルな旧デザインにも変更できるので、使い分けてください。

シンプルなデザイン

プロフィールカードの基本のスタイルです。（画像は丸にもできます）プロフィールと画像のみなら以下のようなデザインにもなります。

背景の画像を設置した場合

このプロフィールはよく見かける形だと思います。以下の設定は、角を取り丸角にしてあり、枠線も設定をしています。

アイコン（四角）

アイコン（丸）

• ボタン色・・・#eb445a
• ボタン影色・・・#f8b862
• ボーダー色・・・#38b48b

背景に透過の画像を追加した場合

フリーの透過の画像を設置すると、アイコンの後ろにさりげなく表示されます。上記の背景は一般的なものですが、背景の色と透過画像でちょっと違うプロフィールデザインを作っても面白いでしょう。

• 背景色・・・#fef4f4

アイコン画像 : https://www.iconpon.com/

画像の大きさや高さは調整しないといけないのですが、上手にバランスを整えると綺麗に見えますよ。

旧デザインのプロフィールカード

AFFINGER6では、前のプロフィールカードも再現できるようになっています。枠の色なども変更可能なので超シンプルが良い方はこの方法で作ってみてください。

アイコン画像 : https://www.iconpon.com/

「この記事を書いた人」の表示

投稿ページや固定ページの最後に出てくる「この記事を書いた人」の表示もできます。たとえば、外注さんにお願いして記事を投稿したり複数の人でブログを運営する場合にも便利です。

ブログを訪問したユーザーも記事の最後に「どんな人」が記事を書いているのかわかるので信頼性もあがります。

アイコン画像 : https://www.iconpon.com/

ユーザー名＆自己紹介の設定

プロフィールカードなどを作る際にあらかじめユーザー名と自己紹介の文章が必要となります。プロフィールを作る前にこの設定をやっておきましょう。

▼　ユーザー　⇒　プロフィール

ページが開いたら下にスクロールするとニックネームなど設定する部分があります。好きな名前を入力しブログ上の表示名を変更します。

（デフォルトでは、最初に設定した名前になっています）

さらに下にスクロールしてプロフィール情報を入力しておきます。

（この下に画像設定もありますが、カスタマイザーでも設定可能です）

プロフィールカードの作り方（背景なし超シンプル）

ここからは、プロフィールカードの作り方をお伝えしていきます。まずは、シンプルなプロフィールカードを作っていきます。

アイコンを作る

上記の画像のアイコンは「FLAT ICON DESIGN」でダウンロードしています。

⇒　FLAT ICON DESIGN

ただ、人間の顔はないのでもうひとつ、この中で使っている顔のアイコンは「iconpon」というページで作っています。かぶりっこメーカーというもので作ってダウンロードしています。

⇒　使用素材 : https://www.iconpon.com/

髪形や目やほほなどそれぞれいくつかの候補がありますので、選びながら作っていきます。

アイコン画像 : https://www.iconpon.com/

背景の色はタブをクリックすると変更できるようになっています。設定が終わったらダウンロードボタンをクリックします。

これで準備はOKです。

プロフィールカードの設定

ユーザー設定とアイコンを用意すれば設定は簡単です。

▼　外観　⇒　カスタマイズ　⇒　オプション（その他）　⇒　プロフィールカード※

※上記のプロフィールカードはブログカード/ラベルと間違いやすいので注意してください。プロフィールカードはスクロールして下の位置にあります。

「アバター画像」の部分に画像を設置します。

影を付ける場合には、下の「アバター画像に影をつける（プロフィールカード）」にチェックを入れて「公開」をクリックします。

アイコン画像の切り抜きを丸にしたい場合

アイコン画像は四角でも丸でもどちらでも表示ができます。影も付けれるので好きな方を選んでください。

▼　AFFINGER管理画面　⇒　投稿・固定記事　

「この記事を書いた人」の部分の「アバター画像を丸くする」にチェックを入れてSAVEをクリックする。

※四角にする場合にはここのチェックを外してください。

プロフィールカードの作り方（ワンポイント背景あり）

シンプルなプロフィールカードを作ることができればワンポイント画像を背景に表示させると他のブログとちょっと違う雰囲気になります。

アイコン素材：　https://www.iconpon.com/

透過画像（PNG）をダウンロードしておきます。

⇒　イラストAC

どのフリーサイトでもOKですが、PNG画像にしてダウンロードします。

▼　外観　⇒　カスタマイズ　⇒　オプション（その他）　⇒　プロフィールカード

• アイコン画像追加
• 背景画像追加
• ボーダー色・・・#8b4513
• 背景色・・・#f5deb3
• ボタンURL
• ボタンテキスト
• ボタン上部背景色・・・#eb445a
• ボタン下部背景色・・・#f8b862

背景色や画像を変更すると自分の好みに近いものができますので、ぜひいろいろ触ってみてください。

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

プロフィールはサイドバーの右上に配置します。プロフィールカードができたら（作る前の設置でも可）ウィジェットを使って配置をします。

▼　外観　⇒　ウィジェット

11_STINGERプロフィールカードタブをサイドバーにドロップ＆ドラッグで移動させます。タイトルを付けて完了をクリック。

この記事を書いた人を表示させる方法

投稿記事や固定記事に「この記事を書いた人」を表示させる方法も簡単です。

▼　AFFINGER管理画面　⇒　投稿・固定記事

この記事を書いた人のタイトルのところで以下の部分にチェックします。

• 「この記事を書いた人」を有効化する
• 「この記事を書いた人」の最新記事を表示する

記事の上に表示させる

さらに、記事の最初に表示させる場合には同じページの 「記事上にライター情報を表示する」にチェックを入れてSAVEをクリックします。

その他

旧デザインにしたい場合には、プロフィールカード作成でお伝えした部分のトップに「 旧プロフィールカードに変更」という部分にチェックを入れて「公開」をクリックしてください。

▼　外観　⇒　カスタマイズ　⇒　オプション（その他）　⇒　プロフィールカード

旧デザインについては背景画像は表示されませんが、シンプルで可愛いので何も設定しないでこのまま使ってもいいかもしれませんね。

初心者だからこそWordpress有料テーマ を使うべき理由