みちこみちこ

AFFINGER6をインストールしました。
プロフィールカードの作り方がわかりません。作り方を教えてください。

はい、その疑問にお答えします。

この記事の内容
  • AFFINGER6のプロフィールカードの作り方
  • プロフィールカードにアイコンをアップロード
  • プロフィールカードにSNSを登録する方法
  • プロフィールカードを設置する方法

 

こんにちは、あけみんです。

AFFINGER6(アフィンガー6)をインストールしてまずはプロフィール設定ですね。

初心者目線でプロフィールカードの設置方法をわかりやすく解説していきたいと思います。

手順は大きく3つ。

①プロフィールの画像とボタンの設定
②SNSの設定&紹介文入力
③プロフィールの設置

プロフィールアイコンがあれば5分で設定完了です。
プロフィールアイコンはご自分の持っている写真でもOKですが、フリー素材からもダウンロードできます。→こちらはリンクを貼っておきますね。

さっそくいってみましょう!

AFFINGER6でつくるプロフィールカードのイメージ

AFFINGER6でつくるプロフィールカードがどんなイメージになるか、先にお見せします。

AFFINGER6でつくるプロフィールカードのイメージ

みちこみちこ

プロフィールがシンプルでみやすいですね

AFFINGER6に設置するプロフィールアイコンの準備

AFFINGER6でプロフィールカードを設置する前に、プロフィールアイコンを準備しておきましょう。
プロフィールアイコンは、ブログの顔となるところです。
写真でもイラストでもOK。

推奨サイズ:150×150pxの正方形画像
ファイル形式:PNG /JPG

プロフィールアイコンに使う画像が手元にない場合は、フリー素材からダウンロードしてご利用いただけます。

あけみんあけみん

イラストACは、プロフィールアイコンが無料でダウンロードして使えます。SNSプロフィールアイコンの素材集がありますので、ぜひご利用ください。

AFFINGER6でつくるプロフィールカードを作る手順

いよいよAFFINGER6でプロフィールカードの設定です。
順番にやっていけば、簡単に設置できるのでご安心ください。

大まかな手順は次の3つ
  1. プロフィールカードの設定
  2. SNSボタンと紹介文の設定
  3. プロフィールカードを設置

実際にAFFINGER6でプロフィールカードを作成していきましょう。

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

WordPressの管理画面を開きます。

外観→カスタマイズ

外観→カスタマイズ

オプション(その他)を選択

オプション(その他)を選択

プロフィールカードを選択

プロフィールカードを選択

プロフィールカードの設定画面がでてきます。

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

あけみんあけみん

ここではプロフィールの表示内容の設定をするだけで、まだ設置されていません。

プロフィールカードの設定画面でできること

プロフィールカードのアイコン
ボタンの文字とリンク設定

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

プロフィールアイコンの画像アップロード

プロフィールアイコンは準備できましたでしょうか?

アイコン画像のサイズ:縦横150×150px以上の正方形の画像推奨

あけみんあけみん

画像サイズが大きすぎても読み込みが遅くなるので、300〜400pxくらいの正方形の画像がベターです。

[画像を選択]をクリックして、準備したプロフィールアイコンをアップロードします。

[画像を選択]をクリック

画像をアップロード

 

ボタンの設定

次にボタンの設定にいきます。この部分↓

ボタンの設定
◆ボタンURLとボタンテキストを入力します。

プロフィール専用のページ(固定ページ)のURLを入れます。まだ作ってない方はサイトのURLを入れておいて、あとで修正してください。

URLを入れます

◆ボタンの色の設定をします。
ボタン上部と下部の背景色[色を選択]をクリックして好きな色を設定してください。

ボタンの色の設定

あけみんあけみん

色の設定がわからない方は、こちらの色見本のサイトを参考にしてみてください。

WEB色見本現職大辞典HTMLカラー

気に入った色があれば、#番号をコピーして、ボタン上部背景色の色番号のところにペーストすると、指定した色に変わります。

カラーの設定

できたら上部の[公開]ボタンをクリックします。
これでアイコンとボタンの設定は完了しました。

SNSボタンと紹介文の設定

次に設定するのは3つ。

名前
紹介文
SNS設定

SNSボタンと紹介文の設定

ユーザー→プロフィールを開きます。

ユーザー→プロフィールを開きます。

名前の入力をしてください。

名前の入力

SNSを開いてURLをコピーして、こちらにペーストします。

SNS設定

これでプロフィールカードの内容は出来上がりました。

後は設置するだけです。もう少し!

プロフィールカードを設置

プロフィールの内容は設定できたので、今度はそれを設置する作業です。

外観→ウィジェットを選択

外観→ウィジェットを選択

[11_STINGERプロフィールカード]を選択して▼をクリック

[11_STINGERプロフィールカード]を選択して▼をクリック

右側の一番上に配置したいので、[サイドバートップ]を追加します。

[サイドバートップ]を追加

実際に配置されてるか確認してみましょう。

右上のタイトルをクリック→サイトを表示

右上のタイトルをクリック→サイトを表示

右端の一番上に設定したプロフィールカードが設定できました!
これで完了です。おつかれさまでした。

右端の一番上に設定したプロフィールカードが設定できました

AFFINGER6のプロフィールカードは、見栄えもスッキリしてシンプル。まだプロフィールカードを設置していない方はぜひ設置してみてはいかがでしょうか?

まとめ

AFFINGER6でプロフィールカードを設置する手順はまとめると次の通りです。

  1. プロフィールカードのアイコンを準備する
  2. 「外観→カスタマイズ」でアイコンとボタンの設定をする
  3. 「ユーザー→プロフィール」で名前と紹介文とSNSを設定する
  4. 「外観→ウィジェット」で設置する

プロフィールのアイコンや紹介文はいつでも変更できます。

ここまでお読みいただきありがとうございました。この情報が、少しでもお役に立てたら幸いです。