カスタマイズ

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

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

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

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

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

こんな人におすすめ

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

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

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

プロフィールカード完成イメージ
プロフィールカード:完成イメージ

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

編集長F

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

\当ブログも愛用してます/

AFFINGER6の詳細はこちら

/いますぐゲットする\

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

プロフィール

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

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

参考:イメージ図

プロフィール図解

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

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

ニックネームを決めよう

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

プロフィール作成方法

プロフィール作成方法

手順

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

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

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

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

プロフィール作成方法

手順

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

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

参考

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

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

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

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

カスタマイズ方法

AFFINGER6おすすめ記事カスタマイズ方法

手順

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

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

手順

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


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

ポイント

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

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

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

編集長F
アイコン:完成イメージ
>>ココナラでイラストを作成する

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

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

AFFINGER管理

プロフィール作成方法

手順

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

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

改行して段落を整えよう

改行:完成イメージ
作業イメージ

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

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

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

AFFINGER管理

プロフィール作成方法

プロフィール作成方法

手順

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

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


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

プロフィール作成方法

プロフィール作成方法

手順

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

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

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

プロフィール作成方法

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

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

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

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

カスタマイズ方法

AFFINGER6おすすめ記事カスタマイズ方法

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

手順

  • WordPress管理画面」→「外観」→「カスタマイズ
  • オプション(その他)」→「プロフィールカード
  • ボタンURL」入力
  • ボタンテキスト」入力
  • ボタンテキスト色」→「色を選択」→カラーコードを入力
  • ボタン上部背景色」→「色を選択」→カラーコードを入力

参考

  • ボタンURL:個別プロフィールページのURLをペーストする
  • ボタンテキスト:「詳しいプロフィールはこちら」など
  • ボタンテキスト色:カラーコード#FFFFFF
  • ボタン上部背景色:カラーコード#eb445a

これでプロフィールカードにボタンリンクが表示されるはずです。

ここまでくればプロフィールカードの外観は完成です!あとは設置するだけです。もう少し、頑張りましょう!

編集長F

プロフィールカードをサイドバーに設置しよう

プロフィール

プロフィールカードが完成したら、いよいよサイドバーに設置していきます。

ウィジェットカスタマイズ

プロフィール作成方法

手順

  • WordPress管理画面」→「外観」→「ウィジェット
  • STINGERプロフィール」を「サイドバートップ」にドラッグ&ドロップ

プロフィールカードの設置手順は以上です。意外と簡単でしたね。

実際のデザインを確認してみよう

デザイン

最後に出来上がったデザインを確認してみましょう。

下図のようになっていればOKです。

プロフィールカード完成イメージ
プロフィールカード:完成イメージ

お疲れ様でした!

編集長F

まとめ(次章の内容)

この記事ではプロフィールカードを作成する方法を解説しました。

次章ではサイドバーウィジェットのカスタマイズ方法を解説します。ブロよび。風カスタマイズでは「検索窓」、「アーカイブ」、「カテゴリー」を設置しています。興味のある方はぜひ参考にしてください。

AFFINGER6サイドバー完成イメージ
サイドバーウィジェット:完成イメージ

それではまた次回、【AFFINGER6】サイドバーウィジェットのカスタマイズ方法【ブロよび。風】でお会いしましょう!

前回の作業が済んでいない方はこちらから戻れます。

<<前回の記事に戻る

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

\当ブログも愛用してます/

AFFINGER6の詳細はこちら

/いますぐゲットする\

よく読まれている記事

アイキャッチ 1

副業に興味のある方は多いと思います。 月に5万円でも稼げれば生活はかなり楽になりますよね。副業候補の代表格でもあるアフィリエイト。 一度は耳にしたことがあるのではないでしょうか? そんな疑問に答えます ...

アイキャッチ 2

それでは本題に入りましょう! 目次 SEOとは?SEOの本質を知ろうGoogleのビジネスモデルを理解しようユーザー満足度を理解しよう検索エンジンの仕組みSEO対策の目的SEO対策の具体例①検索意図に ...

アイキャッチ 3

本記事ではエックスサーバーを使ったワードプレスブログの始め方を解説しています。 画像付き解説ですので手順に従って作業すれば、10分程度で完了します。 目次 はじめにブログ開設に必要なものサーバーとはワ ...

-カスタマイズ