【AFFINGER6でプロフィールカードを作成する際のお悩み解決!】アバター画像を丸くするには?プロフィールを改行するには?

AFFINGER6でプロフィールカードを設定する方法

こんにちは、ゆうまる(@yuumaru_blog)です。


AFFINGER6でプロフィールカードを設定中、アバター画像が丸く表示されなかったり、プロフィール情報が改行出来なかったり調べても上手く出てこなくて設定に時間がかかってしまいました。

その経験を踏まえて、誰でも簡単に出来るようにAFFINGER6のプロフィールカード設定方法を詳しく紹介していきます。

こんな方におすすめ
  • AFFINGER6でプロフィールカードをおしゃれに設定したい
  • どの画面から設定すればいいのか分からない
  • アバター画像が丸く表示されない
  • プロフィール情報を改行させて見やすくしたい

こちらの記事では以下の手順でプロフィールカードの設定方法を紹介していきます。

作業の流れ
  1. プロフィールカードをサイドバーに表示
  2. プロフィールカードのデザイン設定
  3. プロフィール情報の設定
目次

プロフィールカードをサイドバーに表示

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

まず、プロフィールカードをこのようにサイドバーに表示させる方法を紹介します。

外観 ▶︎ ウィジェット

ウィジェット設定画面からサイドバーウィジェットに11_STINGERプロフィールカードをドラッグ&ドロップします。

ウィジェットをドラッグ

これでプロフィールカードの設置は完了です。

トップページへ戻って設置出来ているか確認してみて下さい。

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

続いてはプロフィールカードのこちらの赤枠部分のデザイン設定方法を紹介します。

写真、リンクボタンの設定方法

サイドバーに設置したプロフィールカードのデザインをカスタマイズするには

外観 ▶︎ カスタマイズ ▶︎ オプション(その他)▶︎ プロフィールカード

から設定画面に進みます。

この画面で設定出来る事
  • ヘッダー画像(プロフィールカード)
  • アバター画像(プロフィールカード)
  • リンク付きボタン

ボタンURL欄にプロフィールなどの好きな記事のリンクを登録すると、リンク付きのボタンを設定することが出来ます。

リンク付きボタンの設定方法

アバター画像を丸くする方法

もしアバター画像がこのように四角く表示されてしまう場合に、アバター画像を丸く表示させる方法を紹介します。

アバター画像が四角

AFFINGER 管理 ▶︎ 投稿・固定記事 ▶︎ この記事を書いた人

から設定画面に移動します。

アバター画像を丸くするにチェック

こちらの『アバター画像を丸くする(※コメント欄のアバター画像含む)』にチェックを入れるとアバター画像を丸く表示することが出来ます。

プロフィール情報設定方法

最後に赤枠部分のプロフィール情報の設定方法を紹介します。

プロフィール情報の設定方法

ダッシュボードのユーザーからこちらの設定画面に進みます。

ダッシュボードのユーザー設定画面
この画面で設定出来る事
  • ユーザー名
  • プロフィール情報
  • 各種SNSリンク

各SNSのURL欄にURLを記入することで、それぞれのリンクボタンがプロフィールカードに表示されます。

プロフィール情報のコメントを改行する方法

プロフィール情報を記入すると、プロフィールカードにコメントを表示させることが出来ます。

ですがこのコメントはデフォルトでは改行が出来ないため、表示された時に見にくくなってしまうことがあります

プロフィール情報を見やすく、改行させるためには先程のアバター画像を丸くする時と同じく

AFFINGER 管理 ▶︎ 投稿・固定記事 ▶︎ この記事を書いた人

から設定画面に移動します。

プロフィールコメントの改行方法

そして『プロフィール情報にhtmlタグを許可する』にチェックを入れます。

こちらにチェックを入れた後、改行したいところに<br>を記入することで、好きなところで改行させることが出来ます。

まとめ

プロフィールカードを設定するだけで、おしゃれなブログになりますよね。

プロフィールカードはそれぞれの設定画面へ行く方法、設定方法が分かっていれば簡単に設定が完了します。

カラー設定など簡単に変更出来るので、ぜひ自分のブログにあった設定を試してみてください。


ちなみに、現在僕はAFFINGER6からSWELLへテーマ移行しています。

AFFINGER6のデザイン設定で悩んでいる方はぜひ読んでみてください。


\ おしゃれなアイコンを作りたいならココナラで! /

AFFINGER6でプロフィールカードを設定する方法

この記事が気に入ったら
フォローしてね!

良かったらシェアしてね!
  • URLをコピーしました!
目次