WordPressテーマ『AFFINGER6』を使っていて、
「サイドメニューのプロフィール欄をカスタマイズしたい！」
と思ったことはありませんか？
この記事では、WordPressテーマ『AFFINGER6』にて、サイドメニューのプロフィール欄をカスタマイズする方法を解説しています。
前提条件
この記事は、AFFINGER6用のカスタマイズ方法です。
AFFINGER5や他のワードプレステーマでは不可能（または動作未確認）です。
【WordPress】6.3.1
【テーマ：AFFINGER6EX】20230205
なお当ブログ自体は別のテーマを使用していますが、姉妹サイト「UEテク」はAFFINGER6で作っています。完成例としてご覧ください。
プロフィール欄のカスタマイズ
AFFINGER6のサイドメニュープロフィール欄は、デフォルトでもカスタマイズ性が高く、設定次第で十分他のサイトと差別化が可能です。
プロフィールヘッダー画像や角丸にするかどうか、色などを変更できる設定欄がデフォルトで用意されています。
しかし、以下のカスタマイズを施せば、さらに差別化を図ることができます！
プロフィール文を左揃えにする
.st-author-description {
text-align:left;
}上記の「left」の部分は、好みに応じて以下のように変更してください。
- 「左揃え」→「left」
- 「右揃え」→「right」
- 「中央揃え」→「center」
- 「両端揃え（最終行を除く = 最終行は左揃え）」→「justify」
- 「両端揃え（最終行も含む = 最終行は中央揃え）」→「justify-all」
プロフィール文の文字サイズを変更
#side .st-author-description{
font-size:1.2em;
}デフォルトでは文字サイズが 0.8em 程度に設定されています。
文字を大きくしたいなら0.9～1.2程度、文字を小さくしたいなら0.6～0.7に設定すると良いでしょう。
プロフィールボタンの形を変更
.st-author-profile .rankstlink-r2 p a {
padding: 5px 10px;
border-radius: 3px;
}上記の数値部分は、好みに応じて値を変更してください。
- 5pxの部分：ボタンの縦の大きさ、数値が大きいほど縦に大きくなる。
- 10pxの部分：ボタンの横の大きさ、数値が大きいほど横幅が広くなる。
- 3pxの部分：ボタンの角丸の大きさ、数値が大きいほど丸く、小さいほど四角くなる。
まとめに替えて
AFFINGER6デフォルトの機能でも、十分に他のサイトと差別化が可能です。
しかし、CSSを使ってカスタマイズをすることで更なる差別化ができ、個性的なサイト・ブログが出来上がります。
CSSは機能重複などでレイアウトが大きく崩れる可能性もあるものです。
既に導入済みのCSSやプラグイン等によってはうまく動作しない可能性もありますので、自己責任でお試しください。
コメント