AFFINGER5の右側のプロフィールの作り方について説明していきます。
設定する場所や画像の大きさなど結構手間を取ったので記録しておきます。
AFFINGER5では、いろいろな画面から設定はできるのですが、一番わかりやすい方法で進めていきます。
プロフィールはこの部分のことです。
この部分の背景やこの形のプロフィールにする方法をお伝えしていきます。
step
1ウィジェットエリアにプロフィールを追加する
何も設定していない状態だと、下図のようにプロフィールの枠がない状態です。
まずは、左の管理メニューから「外観」にカーソルを合わせカスタマイズをクリック
「カスタマイズ」をクリックすると下図の画面に飛びます。
「ウィジェット」をクリック
下の画面が開くので一番上の「サイドバートップ」をクリック
次に「ウィジェットを追加」をクリック
下図のように、左にメニューが出てくるので「11_STINGERサイト管理者紹介」をクリック
下図の画面になるので、「タイトル」欄に”プロフィール”と入力
(ここは反映されませんが、とりあえず入力しておきましょう)
ここまででウィジェトエリアへのプロフィール設置は完了です。
次に、
プロフィールカードへの変更を行っていきます。
先程のカスタマイズ画面の「＋オプションカラー」をクリック
項目がたくさんありますが、下の方にある「サイト管理者紹介」をクリック
クリックすると下図のような左メニューが表示されます。
「プロフィールカードに変更」にチェックを入れる
「ヘッダー画像」は下図の矢印の位置に反映されます。
ココがポイント
ちなみにサンプルの道路と空の画像は５：３で設定しています。
「アバター画像」も同様に矢印の位置に反映されます。
ココがポイント
アバターのサイズは１：１の画像にしてください。長方形の画像などは正方形に変形されるので画像が歪んでしまいます。
さらに進めていきます。
左メニューを下にスクロールすると、下図の項目が見えてきます。
- アバター画像の丸枠に影をつけます。薄いグレーの丸い枠線がつく感じです。
- ボーター色 カード全体に枠線を追加する(つけなくてもよい)
- 背景色は 下図の黄色の部分
- テキスト色 名前と紹介文に反映
- 影をつける プロフィール全体の枠に影をつける
- 次に出てくる７をクリックした時に飛ぶ先のURLを入力
- ボタン内のテキスト
- ボタン内テキストの色
- ボタンの上の方の色
- ボタンの下の方の色
- ボタンの影になる部分の色
ココがポイント
ボタンの色の設定に関わる、９，１０，１１はグラデーションなのであまりいじらない方が良い
どうしても変更したい場合は参考のボタンをどこかのサイトで見つけて、カラーピッカーで色を確認して反映させましょう。
カラーピッカーはChrome拡張機能のColorZillaをおすすめします。
好みの色や画像に設定できたら、「下書き保存」か「公開」を押して変更内容を確定させてください。
保存したら、上の黒色のメニューから「ダッシュボード」をクリックして、最初の管理画面に戻ります。
下図の「ユーザー」をクリック、もしくは「あなたのプロフィール」をクリックして下の画面を開いてください。
ここでは２．のプロフィール情報を入力します。
50文字程度に収めましょう。
入力したら忘れずに「プロフィールを更新」をクリックします。
以上で完成です。
まとめ
上記通り行えばスムーズに設定できるかと思います。
画像に文字などを加えるとより情報を伝えれるかもしれません。
ぜひ工夫してみてください。