AFFINGERの記事下｢この記事を書いた人｣を自由にカスタマイズする方法【CSSサンプル付き】

記事の最後に出てくる「この記事を書いた人」。

デフォルトのままでも使えますが、ちょっと味気ない…と感じたことはありませんか？

このボックスは、読者に安心感や信頼感を与える大事な要素です。

実はAFFINGERなら、管理画面の設定だけで見た目を整えることもできるし、CSSを追加すれば、背景色や文字色・枠線・タブの配色まで自由にカスタマイズできます。

この記事では、

• 表示／非表示や新着記事リンクの設定方法
• 背景色・文字色・リンク色などの変更（CSSサンプル付き）
• 枠線・角丸・影を使ったカード風デザイン
• プロフィール／新着記事タブの色変更

といった実用的なカスタマイズを、初心者にも分かる形でまとめました。

そのままコピペして使えるコードとスクショ例もあるので、自分のサイトに合わせてすぐに反映できますよ。

「この記事を書いた人」とは？

AFFINGERには、記事本文の下に自動で表示される「この記事を書いた人」という著者プロフィール欄があります。

ここには、アバター画像や自己紹介文が表示され、読者に安心感や信頼感を与える効果があります。

特にAdSenseの審査では、運営者情報の有無がチェックされることもあるので、しっかり整えておくと安心です。

一方で「デフォルトのままだと味気ない」「もっと個性を出した装飾がしたい」というニーズも多くあります。

そんなときに役立つのが、AFFINGER管理での設定変更とCSSを使ったデザイン調整です。

この2つを組み合わせることで、自分のブログに合った見せ方にカスタマイズできます。

AFFINGER管理でできる基本設定

まずはAFFINGER管理の設定からチェックしてみましょう。

管理画面だけでも、表示のON/OFFや新着記事の有無など、基本的な部分は十分に調整できます。

表示／非表示の切り替え

1. WordPress管理画面 → AFFINGER管理 → 投稿・固定記事 を開きます。
   
   
   　
2. 「この記事を書いた人を表示」のチェックをON/OFFで切り替えます。
   
   
   　
3. 必要に応じて「記事上にライター情報を表示」する設定も可能です。
   
   

新着記事リンクのON／OFF

1. 同じく AFFINGER管理 → 投稿・固定記事 の中で設定可能です。
2. 「この記事を書いた人の新着記事を表示」にチェックを入れると、著者が書いた最新記事へのリンクが記事下に表示されます。
   
   
   　
3. 不要であればチェックを外せばOKです。

アバターの丸型表示

カスタマイズオプションにはアバターを「丸くする」設定がありますが、これはプロフィールカードのみの設定です。

記事下のアバター画像を丸形にする場合は、画像編集ソフトで丸形に切り取り編集をしてからアップロードしてください。

紹介文の改行やリンクを有効にする

「プロフィール情報にHTMLタグを許可する」を有効化すれば、改行やリンクを入れることができ、読みやすさやデザイン性が向上します。

CSSでできるデザインカスタマイズ

AFFINGER管理だけでも基本は整いますが、CSSを追加すれば「この記事を書いた人」の見た目をさらに自由に変えられます。

まずは、どの要素を変更できるのかを表にまとめました。

変更できる要素	CSSプロパティ例	説明
背景色	background-color	ボックス全体の背景色を変更
文字色	color	プロフィール文や著者名の文字色を変更
リンク色	color（aタグ指定）	自己紹介内のリンク色を変更（ホバー時も可）
枠線	border	ボックスの外枠に線を追加（太さ・色も変更可能）
角丸	border-radius	ボックスの角を丸くする（カード風にできる）
影	box-shadow	ボックスを浮かせるような影をつける
タブ （この記事を書いた人／新着記事）	#st-tab-menu li	タブ部分の背景色・文字色、アクティブ時の色を変更

このあと、それぞれの項目ごとにサンプルコードとスクショ例を紹介していきます。

背景色を変える

「この記事を書いた人」ボックス全体の背景色は、background-color プロパティで変更できます。

#st-tab-box {
  background-color: #f7f7f7; /* 背景色を指定 */
  padding: 20px;             /* 内側に余白を追加（任意） */
}

この background-color: #xxxxxx; の部分を変更すれば、好きな色にできます。

文字色を変える

「この記事を書いた人」ボックス全体の文字色は、color プロパティを変更すれば簡単に変えられます。

#st-tab-box,
#st-tab-box p {
  color: #333333; /* 文字色を指定 */
}

この color: #xxxxxx; の部分を変更すれば、好きな色にできます。

リンク色を変える（ホバー色も）

「この記事を書いた人」ボックス内にリンクを入れた場合、色は color プロパティで変更できます。

通常時とホバー時（カーソルを合わせたとき）をそれぞれ指定しましょう。

#st-tab-box a {
  color: #0a66c2; /* 通常時のリンク色 */
  text-decoration: underline;
}
#st-tab-box a:hover {
  color: #004182; /* ホバー時のリンク色 */
}

この color: #xxxxxx; の部分を変更すれば、自由に色を指定できます。

枠線を追加する（ボーダー）

「この記事を書いた人」ボックスの周りに枠線をつけたい場合は、border プロパティを使います。

#st-tab-box {
  border: 1px solid #dddddd; /* 枠線の太さ・線種・色 */
}

border: [太さ] [線の種類] [色]; を変更すれば自由にデザインできます。

角丸デザインにする（border-radius）

「この記事を書いた人」ボックスの角を丸めたい場合は、border-radius プロパティを使います。

#st-tab-box {
  border-radius: 12px; /* 数値を大きくすると丸みが強くなる */
}

border-radius: 数値(px); を調整するだけでOK。

例：5px（ほんのり丸い）、12px（程よく丸い）、30px（かなり丸い）

影をつける（box-shadow）

「この記事を書いた人」ボックスを浮き上がらせたい場合は、box-shadow プロパティを使います。

#st-tab-box {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* 影の位置・広がり・濃さ */
}

box-shadow: [横方向] [縦方向] [ぼかし具合] [色]; の順で指定します。

例：0 4px 10px rgba(0,0,0,0.1) → 下にうっすら影が落ちるイメージ。

タブの色を変える（プロフィール／新着記事）

「この記事を書いた人」には「プロフィール」と「新着記事」のタブが表示されます。

このタブの色は、#st-tab-menu li にスタイルを追加することで変更可能です。

/* 通常タブ */
#st-tab-menu li{
  background-color: #f3f4f6; /* 通常時の背景 */
  color: #374151;            /* 通常時の文字色 */
  padding: 8px 14px;
}

/* アクティブタブ（選択中） */
#st-tab-menu li.active{
  background-color: #0ea5e9; /* アクティブ時の背景 */
  color: #ffffff;            /* アクティブ時の文字色 */
  font-weight: 700;
}

background-color と color を変更すれば自由に配色を変えられます。

実際のカスタマイズ例

ここでは、これまで紹介したCSSを組み合わせた完成形サンプルを紹介します。

自分のサイトカラーに合わせて background-color や color を置き換えれば、すぐに応用できます。

例1：シンプルデザイン（背景＋薄い枠線）

#st-tab-box {
  background-color: #ffffff;      /* 背景：白 */
  border: 1px solid #dddddd;      /* 枠線：薄いグレー */
  padding: 20px;
}
#st-tab-box p {
  color: #333333;                 /* 文字色：濃いグレー */
}
#st-tab-box a {
  color: #0a66c2;                 /* リンク色：青 */
}
#st-tab-box a:hover {
  color: #004182;                 /* ホバー時：濃い青 */
}

例1＋タブ色強調（プロフィール／新着記事）

/* タブ部分 */
#st-tab-menu li {
  background-color: #f3f4f6; /* 通常タブ：薄グレー */
  color: #374151;
  padding: 8px 14px;
}
#st-tab-menu li.active {
  background-color: #0ea5e9; /* アクティブタブ：水色 */
  color: #ffffff;
}

CTA風デザイン（アクセント背景＋リンク強調）

#st-tab-box {
  background-color: #f0f9ff;      /* 背景：薄いブルー */
  border: 1px solid #bae6fd;      /* 枠線：水色 */
  padding: 22px;
}
#st-tab-box p {
  color: #0f172a;                 /* 文字色：濃いグレー */
}
#st-tab-box a {
  color: #0284c7;                 /* リンク色：水色 */
  font-weight: bold;
  text-decoration: none;
  border-bottom: 2px solid rgba(2,132,199,0.3);
}
#st-tab-box a:hover {
  color: #0369a1;
  border-bottom-color: rgba(2,132,199,0.6);
}

例2＋タブ色強調（プロフィール／新着記事）

#st-tab-menu li {
  background-color: #e0f2fe; /* 通常タブ：淡い水色 */
  color: #0369a1;
  padding: 8px 14px;
}
#st-tab-menu li.active {
  background-color: #0284c7; /* アクティブタブ：濃い青 */
  color: #ffffff;
}

カード風デザイン（影＋角丸）

#st-tab-box {
  background-color: #ffffff;
  border: 1px solid #e5e7eb;      /* 枠線：薄グレー */
  border-radius: 12px;            /* 角丸 */
  padding: 24px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1); /* 影 */
}
#st-tab-box p {
  color: #374151;                 /* 文字色：落ち着いたグレー */
  line-height: 1.8;
}
#st-tab-box a {
  color: #dc2626;                 /* リンク色：赤 */
  text-decoration: underline;
}
#st-tab-box a:hover {
  color: #b91c1c;
}

例3＋タブ色強調（プロフィール／新着記事）

#st-tab-menu li {
  background-color: #f9fafb; /* 通常タブ：薄グレー */
  color: #374151;
  padding: 8px 14px;
  border-radius: 6px 6px 0 0; /* タブだけ角丸 */
}
#st-tab-menu li.active {
  background-color: #dc2626; /* アクティブタブ：赤 */
  color: #ffffff;
}

まとめ

「この記事を書いた人」は、AFFINGER管理だけでも 表示／非表示の切り替え・新着記事リンクの有無・アバターの丸型表示 といった基本設定が可能です。

まずは管理画面だけで整えるだけでも十分実用的です。

さらに一歩進んで、CSSを追加すれば次のようなカスタマイズができます。

• 背景色や文字色を変える
• リンク色を強調する
• 枠線や角丸をつける
• 影を加えてカード風にする
• タブ（プロフィール／新着記事）の配色を変更する

これらを組み合わせれば、シンプル／CTA風／カード風 といった多彩なデザインを実現できます。

「この記事を書いた人」は記事下に必ず目に入るパーツです。

少し工夫するだけで、信頼感やデザイン性がぐっと高まるので、ぜひ自分のサイトカラーに合わせてカスタマイズしてみてください。