コピペで使える カスタムCSS | カスタムCSSの使い方と1例

カスタムCSSとは？

カスタムCSSとは、「ブロックの見た目を自由にカスタマイズするための追加デザインコード」 のことです。
サイトのデザイン（色・枠・角丸・余白など）SWELLのブロックには設定項目がない場合などに使います。

ブロックの設定だけでは作れない「ちょっとしたデザインの差」を出すのに非常に便利です。

難しそうに感じますが、
今回は、当サイトのTopページにある、松竹梅カードに使った追加CSSを公開します。

コピペするだけで、同じデザインが作れます。
ぜひ試しにやってみてください。
「そういうことか！」と理解してもらえると思います。

---

---

【CSSが怖い…という方へ】追加CSSはとても安全です

「CSSを触るとサイトが壊れそうで不安…」という声をよくいただきます。
ですが、追加CSSは WordPressカスタマイズの中で最も安全な領域 です。

• 追加CSSは「見た目の装飾」だけを変えるもの
• テーマ本体（PHPなど）には一切触れない
• もし崩れても、書いたCSSを削除すれば 完全に元に戻る

この3つの理由から、初心者でも 安心して試してよいカスタマイズ方法 です。

SWELLはさらに、
「追加CSSクラス」で 特定ブロックだけ に反映させる仕組みも備えており、
デザイン崩れのリスクが少なく、とても扱いやすいテーマです。

どこにCSSを書くの？

外観 → カスタマイズ → 追加CSS

ここに貼り付ければ完了です。

※ ここに書いたCSSは「サイト全体」に適用されます。
※ 「このブロックだけに効かせたい」という場合は後で説明します。

---

まずは松竹梅カードを作ってみましょう

SWELL標準ブロックの「リッチカラム」でまずはデザインを作ります。

手順

1. 「リッチカラム（PC3カラム）」を追加
2. それぞれに
   　・タイトル
   　・説明文
   　・料金
   　・ボタン
   　を入れる

これで“中身”は完成です。
次に “見た目” を整えるための CSS を足します。

---

デザインを整えるCSS（コピペで使えます）

以下のCSSを
外観 → カスタマイズ → 追加CSS
に貼るだけで、 “松竹梅カード” が再現されます。

/* --- スライダー不具合対策（SWELL推奨） --- */
#post_slider .p-postList__item{
	transform: perspective(0) translateZ(0);
	backface-visibility: hidden;
}

/* --- 松竹梅カード本体 --- */
.matsu-take-ume .swell-block-column {
    background-color: #0d0d0d;
    border-radius: 20px;
    padding: 40px 30px;
    border: 1px solid rgba(255,230,180,0.22);
    box-shadow: inset 0 0 25px rgba(255,255,255,0.08), 0 8px 25px rgba(0,0,0,0.45);
    transition: transform .25s ease, box-shadow .25s ease;
}

/* --- ホバーでふわっと浮く --- */
.matsu-take-ume .swell-block-column:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: inset 0 0 25px rgba(255,255,255,0.08), 0 12px 35px rgba(0,0,0,0.55);
}

/* --- モバイル最適化 --- */
@media (max-width: 768px) {
    .matsu-take-ume .swell-block-column {
        margin-bottom: 30px;
    }
}

/* --- ボタン（黒 → 金色に光る） --- */
.matsu-take-ume .swell-block-button__link {
    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #c5a76d !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    transition: .25s ease;
    position: relative;
    overflow: hidden;
}

/* --- ボタン光エフェクト --- */
.matsu-take-ume .swell-block-button__link::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,0.3);
    transform: skewX(-25deg);
    transition: .5s;
}

.matsu-take-ume .swell-block-button__link:hover::before {
    left: 130%;
}

.matsu-take-ume .swell-block-button__link:hover {
    background-color: #c5a76d !important;
    color: #000 !important;
    border-color: #c5a76d !important;
    transform: translateY(-3px);
}

/* --- タイトルがほんのり光る --- */
.matsu-take-ume h1,
.matsu-take-ume h2,
.matsu-take-ume h3 {
    text-shadow: 0 0 10px rgba(255,230,150,0.55);
}

/* --- カード内の画像を光らせる --- */
.matsu-take-ume img {
    filter: drop-shadow(0px 0px 8px rgba(255,235,180,0.35));
}

このCSSコードを貼るだけで 見た目がかなり変わります。

---

この松竹梅カードだけにCSSを効かせたい場合

「サイト全体のリッチカラムが全部このデザインになってしまうのでは？」
という不安があると思います。

大丈夫です。

“追加CSSクラス” を使えば、特定のブロックだけに効かせられます。

---

手順

---

松竹梅カードの一番外側（リッチカラム全体）を選ぶ

右側の「高度な設定 → 追加CSSクラス」に
matsu-take-ume と入力します。

---

CSS の先頭にすでに書いてある .matsu-take-ume が「限定範囲」になる

つまり、

.matsu-take-ume .swell-block-column { … }

と書いてあるので、

このクラスが付いたブロック だけ

にデザインが反映されます。

✔ 他の記事

✔ 他のリッチカラム

には一切影響しません。

---

まとめ

• リッチカラムで松竹梅の“中身”を作る
• 追加CSSに貼るだけでプロ風デザインに変わる
• “ここだけに効かせたい” ときは追加CSSクラスを使う

初心者の方ほど、
「デザインが一気に変わる体験」をすると WordPress が楽しくなります。

「こういうデザインを作りたい」けどCSSコードが知りたい、などございましたら、お気軽にお問い合わせください。
コードを書いて、実装して記事に追加していこうと思っています。