【AFFINGER6】ヘッダーメニューやサイト名を縁取りする方法

WordPressテーマ『AFFINGER6』を使っていて、
「ヘッダーメニューやサイト名を縁取りしたい！」
と思ったことはありませんか？

この記事では、WordPressテーマ『AFFINGER6』にて、ヘッダーメニューやサイト名を縁取りする方法を解説しています。

前提条件

この記事は、AFFINGER6用のカスタマイズ方法です。
AFFINGER5や他のワードプレステーマでは不可能（または動作未確認）です。

【WordPress】6.3.1
【テーマ：AFFINGER6EX】20230205

なお当ブログ自体は別のテーマを使用していますが、姉妹サイト「UEテク」はAFFINGER6で作っています。完成例としてご覧ください。

UEテク

独学者向けUnrealEngineテクニック集【UEテク】 Unreal Engineを独学で学ぶ初心者のための実践的なテクニック満載のブログ。ゲーム開発の扉を開きましょう。

ヘッダーメニューやサイト名を縁取りする方法

【コピペOK！】カスタムCSSに以下のコードを追加するだけです。

以下の#000は影の色です。
また0～3pxの部分はお好みに応じて各自変更してください。

header .sitename {
font-size: 40px;
text-shadow:
	3px 3px 0 #000,
	-1px -1px 0 #000,
	-1px 3px 0 #000,
	3px -1px 0 #000,
	0px 3px 0 #000,
	0-1px 0 #000,
	-1px 0 0 #000,
	1px 0 0 #000;
}
header .menu{
font-weight:bold;
text-shadow:
	2px 2px 0 #000,
	-2px -2px 0 #000,
	-2px 2px 0 #000,
	2px -2px 0 #000,
	0px 2px 0 #000,
	0-2px 0 #000,
	-2px 0 0 #000,
	2px 0 0 #000;
}

text-shadowという文字に影をつける機能を利用して、縁取り風に仕上げる方法です。

上の例では、sitename（サイト名）部分は文字左側の影を小さめに、文字右側の影を多めにしています。
一方でmenu（ヘッダーメニュー）部分は、上下左右に同じ分の影をつけるオーソドックスな縁取りにしています。また、読みやすいように太字にしてあります。

まとめ

AFFINGER6特有の機能ではないため、他のテーマでも応用が可能なはずです。
当サイト管理人は未確認のため、自己責任でお試しください。