記事の冒頭に「この人が書いているんだ」とすぐにわかると、読者は安心して記事を読み進められます。
特にAdSenseの審査やSEOの観点からも、ライター情報の整備は信頼性を高める大切なポイントです。
ただ、AFFINGERのデフォルト表示だと少し素っ気なく感じることもあるんですよね。
実際、私も最初に設定したときは「シンプルすぎて物足りないな…」と思いました。
そこでこの記事では、AFFINGERの管理画面でできる設定に加えて、CSSを追加して見栄えをよくする方法をまとめました。
初心者でも「コピペ＋ちょっと調整」でできる内容なので、デザインに自信がない方でも大丈夫です。
AFFINGERの記事上ライター情報とは？
AFFINGERでは、記事のタイトル下やアイキャッチの下に「ライター情報」を表示することができます。
いわゆる 記事上の著者紹介 で、読者に「誰が書いたのか」を最初に伝えるための仕組みです。
記事下に表示される「この記事を書いた人」や、サイドバーのプロフィールカードと比べると、より早い段階で信頼性を示せるのがポイント。
特にAdSense審査や検索エンジンの評価では、E-E-A-T（経験・専門性・権威性・信頼性） が重要視されるため、記事の冒頭でライター情報を提示することはプラスに働きます。
初めて読んでくれる人にとっても、「あ、この人が解説してるんだな」とわかると安心して読み進められると思います。
逆にライター情報がないと、「誰が書いたのかわからないし、信用していいのかな…」と不安につながることもあります。
それでは次の章では、基本設定について解説していきます。
ライター情報の基本設定
この記事上のライター情報は、
- アバター画像：カスタマイズ
- 表示／非表示：AFFINGER管理
で設定します。
アバター画像の設定（カスタマイズ）
- WordPress管理画面 → 外観 → カスタマイズ → オプション（その他）→ プロフィールカード を開く
- アバター画像 の「画像を選択」をクリックし、150px以上の正方形をアップロードする
- 必要に応じて 「丸くする」「影をつける」 をON
ライター情報の 表示／非表示 切り替え
ライター情報の表示と非表示切り替えは、AFFINGER管理から行います。
デフォルトは非表示になっているので、表示する設定に切り替えます。
- AFFINGER管理 → 投稿・固定記事 を開く
- メニュー内の 「この記事を書いた人」までスクロールし、「この記事を書いた人」を有効化する にチェックを入れる
- 記事上にライター情報を表示する にチェックを入れる
- 設定を保存すると、記事上にライター情報が表示されます
追加CSSで見た目を整える
今回、追加CSSで変更するのは以下になります。
| 項目 | 何が変わる | 主なプロパティ |
|---|---|---|
| 「writer」ラベル | 色だけ／タブ風（背景つき）／丸タブ（ピル型） | color, background, padding, border-radius |
| ライター名の色 | 名前テキストの色（ラベルとは独立） | color |
| ボックス全体 | 枠線／角丸／背景色／文字色／余白 | border, border-radius, background, color, padding, background-clip |
| 影（別枠で解説） | 立体感の強さ／有無 | box-shadow |
| 紹介文の可読性 | 行間と文字サイズ | line-height, font-size |
まずはベースの見た目を整えてから、ポイントごとに色や細部を調整していきましょう。
「writer」ラベルを変更する
デフォルトが薄いグレーなので、視認性を上げるために色と太さ、背景色を調整します。
色だけ変える（濃い赤）
.st-shortcode-author .st-author-box .st-author-nickname::before{
color:#dc2626; /* 赤 */
font-weight:700;
letter-spacing:.02em;
}
タブ風CSS（背景：薄い赤＋文字は濃い赤）
.st-shortcode-author .st-author-box .st-author-nickname::before{
display:inline-block;
background:#fee2e2; /* 薄い赤：背景 */
color:#b91c1c; /* 濃い赤：文字 */
padding:3px 10px;
margin-right:.6em; /* 名前との間隔 */
font-weight:700;
line-height:1.6;
}
形状：丸タブCSS（ピル型）
タブ風CSSに以下コードを追加すると丸タブになります。
.st-shortcode-author .st-author-box .st-author-nickname::before{
border-radius:9999px; /* 完全な丸タブ */
}
ライター名のみ色を変える（名前テキストだけ）
「writer」ラベルとは別に、ライター名の文字色だけを変更できます。
/* ライター名（テキスト）の色を変更 */
.st-shortcode-author .st-author-nickname{
color: #F03E51; /* ← 好きな色に変更 */
font-weight: 700; /* 任意：少し太く */
letter-spacing: .02em;
}
ボックス全体（枠線／角丸／背景／文字色）
記事上の著者ボックスに、枠線・角丸・背景色・文字色をまとめて適用します。
.st-shortcode-author .st-author-box,
.st-shortcode-author #st-tab-box,
.st-shortcode-author #st-tab-box .active {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
.st-shortcode-author #st-tab-box > .active > dl {
border: 7px solid #93c5fd; /* 枠線の太さ/色 */
border-radius: 5px; /* 角丸 */
background: #eff6ff; /* 背景色 */
color: #2C3338; /* 本文の文字色 */
padding: 16px 20px; /* 余白（上下 左右） */
}
この設定で「枠線・角丸・背景・文字色」が一括で整います。
影 あり
.st-shortcode-author .st-author-box {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
紹介文の行間・文字サイズ（読みやすさ）
.st-shortcode-author .st-author-box .author-bio,
.st-shortcode-author .st-author-box p{
line-height:1.9;
font-size:15.5px;
margin:.6em 0;
}
実際のカスタマイズ例
ここでは「この記事を書いた人」と同じく、追加CSSのみで仕上げる3パターンを紹介します。
※記事上・記事下は基本的に同じパーツが参照されるため、どちらにも同じ見た目が反映されます。
※環境によりクラス名が異なる場合があります。DevToolsで実クラスを確認のうえ、下記の.author-box, .author-area, .post-authorを置き換えてください。
使い方のコツ：
同時に複数を適用せず、まずはパターン1だけを適用 → スクショ → 次にパターン2…というように、1つずつ反映して仕上がりを確認するのが安全です。
パターン1：シンプル（最小限で整える）
- 細い枠線＋ほんのり影
- 「writer」ラベルは赤文字＋背景は薄いグレー
- 主張しすぎないシンプルさ
/* ラッパー類の背景/枠/影だけ無効化 */
.st-shortcode-author .st-author-box,
.st-shortcode-author #st-tab-box,
.st-shortcode-author #st-tab-box .active{
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
outline: 0 !important;
}
/* 疑似の飾り線を消す */
.st-shortcode-author #st-tab-box::before,
.st-shortcode-author #st-tab-box::after{ content: none !important; }
/* 内側要素の白背景/枠だけ透明化（余白は残す） */
.st-shortcode-author #st-tab-box .active dt,
.st-shortcode-author #st-tab-box .active dd{
background: transparent !important;
border-color: transparent !important;
}
/* 本体ボックス：枠1px #424242、影あり、白背景 */
.st-shortcode-author #st-tab-box > .active > dl{
border: 1px solid #424242; /* 枠線：薄いグレー */
border-radius: 5px; /* 角丸 */
background: #ffffff; /* 背景 */
padding: 16px 20px; /* 余白 */
background-clip: padding-box; /* にじみ防止 */
box-shadow: 0 10px 16px -8px rgba(0,0,0,.16); /* 影（控えめ） */
color: #333; /* 本文の既定色もここで合わせておくと安心 */
}
/* writerラベル：文字は赤、ラベル背景は薄いグレー、四角タブ */
.st-shortcode-author .st-author-nickname::before{
display: inline-block;
color: #dc2626; /* ラベル文字＝赤 */
background: #f3f4f6; /* ラベル背景＝薄いグレー */
padding: 3px 10px;
border-radius: 6px; /* 四角タブ。丸タブは 9999px */
font-weight: 700;
margin-right: .6em;
line-height: 1.6;
}
/* ライター名：黒 #333（ラベルとは独立） */
.st-shortcode-author .st-author-nickname{
color: #333;
font-weight: 700;
letter-spacing: .02em;
}
.st-shortcode-author .st-author-nickname a{
color: inherit;
text-decoration: none;
}
パターン2：信頼性重視
- 信頼の青をベースに作成
- 枠線を少し濃くして“情報モジュール”感を出す
- タブ色をブランドのアクセントカラーに変更
/* ラッパーの見た目を消す（余白は触らない） */
.st-shortcode-author .st-author-box,
.st-shortcode-author #st-tab-box,
.st-shortcode-author #st-tab-box .active{
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
outline: 0 !important;
}
/* 疑似要素の飾り線を消す */
.st-shortcode-author #st-tab-box::before,
.st-shortcode-author #st-tab-box::after{ content: none !important; }
/* 内側要素の白背景/枠だけ透明化（余白は残す） */
.st-shortcode-author #st-tab-box .active dt,
.st-shortcode-author #st-tab-box .active dd{
background: transparent !important;
border-color: transparent !important;
}
/* 本体ボックス：青7px枠＋濃い影＋角丸なし＋薄い青背景 */
.st-shortcode-author #st-tab-box > .active > dl{
border: 7px solid #3B5998; /* 枠線：青 */
border-radius: 0; /* 角丸なし */
background: #eff6ff; /* 背景：薄い青 */
color: #222222; /* 本文テキスト色 */
padding: 16px 20px; /* 余白 */
background-clip: padding-box; /* にじみ防止 */
box-shadow: 0 12px 20px -8px rgba(0,0,0,.22); /* 濃いめ＆タイトな影 */
}
/* writerラベル：白文字＋濃い青のタブ背景（四角） */
.st-shortcode-author .st-author-nickname::before{
display: inline-block;
color: #ffffff; /* 文字：白 */
background: #1e3a8a; /* 背景：濃い青 */
padding: 4px 12px;
border-radius: 0; /* 四角タブ（丸は 9999px） */
font-weight: 700;
margin-right: .6em;
line-height: 1.6;
}
/* ライター名：#222（ラベルとは独立管理） */
.st-shortcode-author .st-author-nickname{
color: #222222;
font-weight: 700;
letter-spacing: .02em;
}
.st-shortcode-author .st-author-nickname a{
color: inherit;
text-decoration: none;
}
パターン3：派手にアピール
- 赤ベースで目立ち度バツグン
- 角に丸みを持たせ柔らかい印象に
- SNSアイコンにブランドカラーを反映
/* ラッパーの見た目を消す（余白は触らない） */
.st-shortcode-author .st-author-box,
.st-shortcode-author #st-tab-box,
.st-shortcode-author #st-tab-box .active{
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
outline: 0 !important;
}
/* 疑似要素の飾り線を消す */
.st-shortcode-author #st-tab-box::before,
.st-shortcode-author #st-tab-box::after{ content: none !important; }
/* 内側要素の白背景/枠だけ透明化（余白は残す） */
.st-shortcode-author #st-tab-box .active dt,
.st-shortcode-author #st-tab-box .active dd{
background: transparent !important;
border-color: transparent !important;
}
/* 本体ボックス：濃い赤の太枠10px／角丸10px／薄い赤背景／影なし／本文#333 */
.st-shortcode-author #st-tab-box > .active > dl{
border: 5px solid #dc143c; /* 濃い赤の枠線 */
border-radius: 10px; /* 角丸 */
background: #ffe4e1; /* 薄い赤の背景 */
color: #333333; /* 本文の文字色 */
padding: 16px 20px; /* 余白 */
background-clip: padding-box; /* にじみ防止 */
box-shadow: none; /* 影なし */
}
/* writerラベル：背景ピンクの丸タブ＋白文字 */
.st-shortcode-author .st-author-nickname::before{
display: inline-block;
background: #c71585; /* ピンク */
color: #ffffff; /* ラベル文字：白 */
padding: 4px 12px;
border-radius: 9999px;/* 丸タブ */
font-weight: 700;
margin-right: .6em;
line-height: 1.6;
}
/* ライター名：#333（ラベルとは独立） */
.st-shortcode-author .st-author-nickname{
color: #333333;
font-weight: 700;
letter-spacing: .02em;
}
.st-shortcode-author .st-author-nickname a{
color: inherit;
text-decoration: none;
}
/* B) ブランド色にする（YouTube/Instagram/Facebook/X） */
.st-shortcode-author #st-tab-box > .active > dl a .st-fa.st-svg-youtube-play,
.st-shortcode-author #st-tab-box > .active > dl a .st-fa.st-svg-youtube-play::before{
color: #ff0000;
}
.st-shortcode-author #st-tab-box > .active > dl a .st-fa.st-svg-instagram,
.st-shortcode-author #st-tab-box > .active > dl a .st-fa.st-svg-instagram::before{
color: #E1306C;
}
.st-shortcode-author #st-tab-box > .active > dl a .st-fa.st-svg-facebook-square,
.st-shortcode-author #st-tab-box > .active > dl a .st-fa.st-svg-facebook-square::before{
color: #1877F2;
}
.st-shortcode-author #st-tab-box > .active > dl a .st-fa.st-svg-twitter,
.st-shortcode-author #st-tab-box > .active > dl a .st-fa.st-svg-twitter::before{
color: #000000; /* X は黒。Twitterブルーにしたい場合は #1D9BF0 */
}
/* ちょい変化（任意）：ホバー時に少し暗くする */
.st-shortcode-author #st-tab-box > .active > dl a:hover .st-fa,
.st-shortcode-author #st-tab-box > .active > dl a:hover .st-fa::before{
opacity: .9;
}
/* サイズや間隔の微調整（任意） */
.st-shortcode-author #st-tab-box > .active > dl .st-fa{
font-size: 18px;
margin-right: 6px;
vertical-align: middle;
}
細かな変更を加えたい場合
ご自身で細かくいじりたい場合は、以下の表を参考にコードを変更してみてください。
| 変更したい見た目 | 変更するプロパティ | 例（値） | メモ |
|---|---|---|---|
| ボックスの枠色 | border-color | #2563eb | 太さは下の行で調整 |
| ボックスの枠太さ | border-width | 1px / 7px / 10px | 太いと主張強め |
| 角の丸さ | border-radius | 0 / 5px / 10px | 0＝四角、↑ほど丸い |
| 背景色 | background | #ffffff / #eff6ff | 薄色が上品 |
| 本文の文字色 | color | #222 / #333 / #374151 | 可読性優先で濃いめ推奨 |
| 余白 | padding | 16px 20px | 左：上下／右：左右 |
| 影の濃さ | box-shadow | 0 12px 20px -8px rgba(0,0,0,.22) | 濃さ＝最後の数値(.10〜.22) |
| 影の範囲（タイトに） | box-shadow | 0 10px 16px -8px rgba(0,0,0,.16) | マイナス値で影を締める |
| 枠を影で描く（崩れにくい） | box-shadow | inset 0 0 0 1px #424242 | borderの代替（寸法不変） |
| writerラベル文字色 | color | #dc2626 / #fff | 白字にする時は背景を濃色に |
| writerラベル背景色 | background | #f3f4f6 / #1e3a8a / #f472b6 | タブ風の色面 |
| writerラベルの形（四角/丸） | border-radius | 0 / 6px / 9999px | 9999px＝丸タブ |
| writerラベルのサイズ | padding | 3px 10px / 4px 12px | 面積・高さ調整 |
| writerラベルと名前の間隔 | margin-right | .6em | 詰まり防止 |
| ライター名の色 | color | #333 / #00B900 | ラベル色とは独立管理 |
| リンク色（本文内） | color | #ff0000 | :hoverで濃くする等 |
| 紹介文の行間 | line-height | 1.8〜1.95 | 可読性UP |
| 紹介文の文字サイズ | font-size | 15px〜16px | サイト基準に合わせる |
| アイコン色（YouTube） | color | #ff0000 | iとi::before両方指定可 |
| アイコン色（Instagram） | color | #E1306C | |
| アイコン色（Facebook） | color | #1877F2 | |
| アイコン色（X/Twitter） | color | #000 / #1D9BF0 | Xは黒推奨 |
記事上と記事下のライター情報は基本的に同じパーツが参照されるため、一部CSSの見た目は連動します（影・リンク色など）。
まとめ
記事上のライター情報は、デフォルトでも機能しますが、追加CSSでひと手間加えるだけで大きく見た目が変わります。
特に「writer」ラベルのコントラスト（文字色・太さ）と、タブ（見出し）やリンク色の統一は効果大。
読者が最初の数秒で「誰が書いた記事か」を理解しやすくなるからです。
まずは本記事のパターン1（シンプル）を当てて仕上がりを確認 → 必要に応じてパターン2（信頼性重視）やパターン3（派手にアピール）へ拡張、という順序が安全ですよ。
関連記事
