【AFFINGER6】コピペでOK！ブログがおしゃれになるCSSカスタマイズ5選（見出し・ボックス・リスト）

コマネチ君

AFFINGER6を使ってるんですが、デザインが他の人と被っちゃうのが悩みです…。
もっとこう、オリジナリティのあるオシャレなデザインにしたいんですけど、プログラミングとかできないし…。

管理画面の設定だけやと、どうしても限界があるからな。
「あ、これAFFINGERやな」ってバレバレなデザインになりがちや！

ツッコみマン

何でも博士

ふむ。ならば今回は、「コピペするだけで実装できるCSSカスタマイズ」を伝授しよう。
難しい知識は不要じゃ。コードを貼り付けるだけで、サイトの雰囲気を変えれるぞい。

この記事では、AFFINGER6のデザインをカスタマイズする「魔法のCSSコード」を5つ厳選して紹介します。

すべてコピペOK。あなたのブログを「プロ級」に仕上げましょう。

カスタマイズの前に：CSSの貼り付け場所

今回紹介するコードは、すべて以下の場所に貼り付けてください。

ここにコードを追記して「公開」を押すだけで反映されます。
※念のため、作業前にはバックアップを取るか、メモ帳などに元のコードを保存しておくことをおすすめします。

1. オリジナルデザインの「見出し（H2）」

まずは記事の顔となる「H2見出し」です。
AFFINGER標準のデザインも良いですが、少しCSSを加えるだけでオリジナルデザインになります。

こんな感じのデザインになります

▼以下のコードをコピペ

 css
/* H2見出しカスタマイズ */
h2 {
background: #f0f4f8; /* 背景色 */
padding: 15px 20px; /* 内側の余白 */
border-left: 6px solid #6c5ce7; /* 左線の太さと色 */
border-bottom: none; /* 下線を消す */
color: #333; /* 文字色 */
border-radius: 0 5px 5px 0; /* 右側だけ少し角丸 */
}

何でも博士

色は「#」から始まるコード（カラーコード）を変えれば、自分のサイトカラーに合わせられるぞ。

2. ふんわり浮き出る「影付きボックス」

重要なポイントを目立たせるボックスデザインです。
AFFINGER標準のボックスはフラットですが、影（ドロップシャドウ）をつけることで、いわゆる「マテリアルデザイン」風になります。

▼以下のコードをコピペ
使い方：記事作成時に「段落ブロック」の「高度な設定」＞「追加CSSクラス」に my-shadow-box と入力してください。

 css
/* 影付きボックス */
.my-shadow-box {
background: #fff;
padding: 20px;
border-radius: 10px; /* 角丸 */
box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* 影の設定 */
border: 1px solid #eee; /* 薄い枠線 */
margin-bottom: 2em;
}

3. チェックマークがおしゃれな「箇条書きリスト」

箇条書き（ulタグ）の黒丸を、おしゃれなチェックマークに変更します。
メリットやデメリットを箇条書きにする際に使うと、視認性がグッと上がります。

• ✔メリットその1
• ✔メリットその2

▼以下のコードをコピペ
使い方：リストブロックの「追加CSSクラス」に my-check-list と入力。

 css
/* チェックリスト */
ul.my-check-list {
list-style: none; /* デフォルトの点を消す */
padding: 0;
}
ul.my-check-list li {
position: relative;
padding-left: 1.5em; /* アイコン分の隙間 */
margin-bottom: 10px;
}
ul.my-check-list li::before {
content: '✔'; /* チェックマーク */
position: absolute;
left: 0;
color: #ff9f43; /* チェックの色 */
font-weight: bold;
}

4. クリックしたくなる「グラデーションボタン」

AFFINGERの「光るボタン」も強力ですが、CSSでグラデーションをかけると、個性的でクリックしたくなるボタンになります。

▼以下のコードをコピペ
使い方：ボタンブロックの「追加CSSクラス」に my-gradient-btn と入力。

 css
/* グラデーションボタン */
.my-gradient-btn a {
background: linear-gradient(45deg, #FFC107, #FF9800) !important; /* グラデーション色 */
color: #fff !important;
border-radius: 50px !important; /* 丸くする */
padding: 15px 40px !important;
box-shadow: 0 4px 10px rgba(255, 152, 0, 0.4); /* 影 */
transition: 0.3s;
}
.my-gradient-btn a:hover {
transform: translateY(-3px); /* ホバー時に少し浮く */
box-shadow: 0 6px 15px rgba(255, 152, 0, 0.6);
}

ツッコみマン

おぉ！なんかアプリのボタンみたいでカッコええな！
これならクリック率も上がりそうやで。

5. スマホでも見やすい「テーブル（表）」

スマホで表を見ると、文字が改行されすぎて読みにくいことがありますよね。
このCSSを使うと、ヘッダー（項目名）の色を変えつつ、全体を見やすく整えることができます。

▼カスタマイズ後のイメージ

※この表は、以下のCSSを適用した状態で表示しています。

▼以下のコードをコピペ
使い方：テーブルブロックの「追加CSSクラス」に my-style-table と入力。（またはHTML編集で tableタグに class="my-style-table" を追記）

 css
/* シンプルなテーブル */
.my-style-table {
  width: 100%;
  border-collapse: collapse;
}
.my-style-table th {
  background: #f7f9fc; /* ヘッダーの背景色 */
  color: #333;
  padding: 12px;
  border: 1px solid #e1e8ed;
}
.my-style-table td {
  padding: 12px;
  border: 1px solid #e1e8ed;
}

まとめ：カスタマイズでブログに愛着を！

今回は、コピペで使えるAFFINGER6のCSSカスタマイズを紹介しました。

オリジナルデザインを採用するとブログを書くモチベーションも上がりますし、読者からの信頼感もアップします。
ぜひ、あなたのブログにも取り入れてみてください。

何でも博士

ちなみに、「あのサイトのデザイン、どうやってるんだろう？」と気になったら、当サイトの解析ツール「RumaMie」を使ってみるのじゃ。
どのテーマを使っているかが分かれば、デザインのヒントになるぞ。