【鑑定士の意匠】量産型の城を脱却せよ。「独自CSS」で刻む、あなただけのブランド（美学）

ようこそ、愛すべき養分……いえ、これから「一国一城の主」となる皆様。
魔道具屋『GRAVITY』店主のリラです。

あなたのブログ、一言で言えば……「どこかで見たことがある」デザインですね。

リラ

……ふん。図星ですか。
それもそのはず。あなたはAFFINGER公式の「デザイン済みデータ」をインストールしただけなのでしょう？

それは「楽」ですが、「個性」が死んでいます。
同じ服を着た人が100人並んでいたら、誰もあなたの顔を覚えません。

今回は、誰でも使える「禁忌の魔法（追加CSS）」を少しだけ解禁し、あなたのサイトを唯一無二の「ブランド城」へと昇華させるための意匠（デザイン）を鑑定します。

1. 「デザイン済みデータ」の罠を知れ

デザイン済みデータは便利です。一瞬でおしゃれになります。
しかし、そこには罠があります。

リラ

真の商人は、既製品をそのまま使いません。
「ベース」として利用し、必ず自分色に染め上げるものです。

2. 【禁忌解放】「追加CSS」という魔法の杖

「CSS？ コードなんて書けない！」
……安心してください。ゼロから書けとは言いません。

WordPressには、標準機能（AFFINGERの機能ではありません）として、誰でも簡単にCSSを追加できる場所があります。

ここに、以下の「コピペ呪文」を貼り付けるだけで、世界が変わります。

魔法その1：見出しのデザインを変える

H2（大見出し）のデザインは、ブログの「顔」です。AFFINGER標準のデザインでも良いですが、少し変えるだけで印象が劇的に変わります。

/* H2見出しのデザイン変更 */
h2 {
  background-color: transparent; /* 背景色を透明に */
  border-left: none; /* 左の線を消す */
  border-bottom: 3px solid #031E46; /* 下に極太の線を引く */
  padding: 10px 0; /* 余白調整 */
  font-weight: 700; /* 文字を太く */
}

※ #031E46 の部分を自分の好きなカラーコード（例：#d32f2f=赤）に変えてください。

魔法その2：サイト全体のフォントを「美しく」する

標準のフォント（ゴシック体）は無難ですが、少し子供っぽく見える場合があります。
これを、OS標準の「美しいフォント（游ゴシックなど）」に統一する呪文です。

/* サイト全体のフォントを美しく統一 */
body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400; /* 文字の太さを標準に */
}
/* 強調部分（strong, b）を少し太く */
b, strong {
  font-weight: 600;
}

アイリス

このコードを貼るだけで、MacでもWindowsでも、あなたのサイトが「プロっぽい見た目」になるのですよ！ 不思議ですねぇ。

3. 鑑定士の意匠：色と余白で「ブランド」を作る

CSSを使わなくても、差別化できるポイントはあります。
それは「テーマカラー」と「余白（リズム）」です。

「3色」で城を塗れ

あなたのブログは何色ですか？
「青も赤も緑も……」なんて言っているなら、それは「ゴミ屋敷」です。

この3色を決め、AFFINGERのカスタマイズ画面で徹底的に設定しなさい。
色が統一されているだけで、サイトに「威厳」が生まれます。

「余白」を恐れるな

リラ

初心者は画面を埋め尽くそうとしますが、プロは余白を作ります。
AFFINGERの標準設定は少し余白が狭いので、AFFINGER管理 ＞ その他（または投稿画面下部）で、段落の余白を少し広めに設定する（例：「広め」を選択）ことを推奨します。

4. 本日の課題：あなただけの刻印を打て

理解できましたか？
デザインとは「飾り」ではなく、あなたの「美学」そのものです。

リラ

CSSは強力な魔法です。入れすぎればサイトが壊れますが、少し使えば劇薬になります。
恐れずに、自分の城に小さな「刻印」を打ってみなさい。
それが、脱・量産型への第一歩ですよ。