サイドバーにプロフィールカードを置いておきたいと思い、
外観 → ウィジェット → 共通サイドバー から
【SWELLプロフィール】を設定しました。
仕組みやサイズも含めて、
今回の記録を残しておきます。
🎨 実際に作成したプロフィールカード
丸アイコン＋横長背景で、
やわらかい印象に整えました。
🧩 今回やったこと
今回の記事では、SWELLの「共通サイドバー」に
プロフィールカードを設置しました。
具体的には、次の設定を行っています。
- 共通サイドバーに SWELLプロフィールウィジェット を追加
- プロフィールカードの 名前とプロフィール文を入力
- アイコン画像 を設定
- 背景画像 を設定
- 「About meはこちら」ボタンを作成して プロフィールページへリンク
※SNSアイコン表示や丸枠設定は、今回は使用していません。
⚙ ウィジェットでの設定手順
WordPress管理画面
「外観 → ウィジェット」を開く
② 共通サイドバー を選択
③
「＋」 → SWELLプロフィール を追加
④ 次の内容を入力
- 名前
- プロフィール文
- アイコン画像
- 背景画像
- ボタンリンク
⑤ 保存
これで
共通サイドバーに設定すると、すべてのページのサイドバーにプロフィールカードが表示されます。
🛠️ WordPress管理画面＜ウィジェット＜共通サイドバー
🛠 プロフィールに設定できる項目
共通サイドバーのウィジェットで「SWELLプロフィール」を追加すると、次のような項目を設定できます。
- 名前
プロフィールカードに表示される名前です。 - 役職（肩書き）
自分の活動内容や肩書きを表示できます。
※今回は使用していません。 - プロフィール文
サイトの内容や、自分が発信しているテーマなどを簡単に説明できます。 - アイコン画像
プロフィールのアイコンとして表示される画像です。 - プロフィール背景画像
プロフィールカード上部に表示される背景画像です。 - ボタンリンク
「About me」など、プロフィールページへのリンクを設置できます。
今回設定していない項目
今回は次の項目は使用していません
- SNSアイコンリストを表示する
X（旧Twitter）やInstagramなどのSNSアイコンを表示することができます。
SNSを運用している場合は、ここからプロフィールへリンクできます。 - アイコンを丸枠で囲む
プロフィールアイコンの周りに丸い枠線をつけるデザイン設定です。
見た目のアクセントとして使うことができます。
💡 共通サイドバーの仕組み
「共通サイドバー」に設定したウィジェットは、
すべてのページに表示されます。
つまり、
- トップページ
- 記事ページ
- 固定ページ
すべてに反映されます。
そのため、ここに「カテゴリー」を設定すると、
全ページにカテゴリーが表示されます。
トップページだけに表示したい場合は、
「トップページ専用サイドバー」を使います。
画像サイズについて
🖼 プロフィール画像サイズ
✅ 240 × 240 px（正方形）
今回はこのサイズで作成しました。
✔ 理由
- サイドバー表示なので大きすぎなくてよい
- 画質と軽さのバランスが良い
- 読み込み速度にも配慮
実際の表示サイズはさらに小さくなるため、
240pxあれば十分きれいに表示されます。
🌿 背景画像サイズ
✅ 800 × 300 px 前後
（横：縦 ≒ 8：3）
横長でやわらかい背景にすることで、
文字が読みやすくなります。
✔ 淡い色・ぼかし気味が◎
✔ 主張しすぎないデザイン
✔ 可読性を優先
📌 サイズの考え方まとめ
| 種類 | サイズ | 理由 |
|---|---|---|
| 丸アイコン | 240 × 240 px | 軽くて十分きれい |
| 背景画像 | 800 × 300 px | 横長でバランスが良い |
※将来的にレイアウト変更の可能性があるなら
400〜500pxで作っておくのも安心。
📌 サイズの考え方まとめ
| 種類 | サイズ | 理由 |
|---|---|---|
| 丸アイコン | 240 × 240 px | 軽くて十分きれい |
| 背景画像 | 800 × 300 px | 横長でバランスが良い |
※将来的にレイアウト変更の可能性があるなら
400〜500pxで作っておくのも安心。
🌸 まとめ
共通サイドバーに設定すると、
すべてのページに反映される。
その仕組みを理解したうえで、
「どこに何を表示させるか」を決めることが大切。
今回は、
画質と表示速度のバランスを考えたサイズで
プロフィールカードを整えました。
sucreまだ完成ではないけれど、
いまの私にはちょうどいい形。
まずはここから、少しずつ整えていきます🌿
