MENU
無料相談・お問い合わせ
無料相談・お問い合わせ

【SWELL】CSSカスタマイズの基本と応用テクニック

SWELL

WordPressテーマ「SWELL」は、初心者でも使いやすい設計が魅力ですが、CSSを使ったカスタマイズを覚えることで、さらに自分だけのオリジナルデザインを実現できます。

この記事では、SWELLでのCSSカスタマイズの基本から実践的なテクニックまでを解説します。

目次

CSSでカスタマイズする3つの方法

1. 追加CSS機能を使う

WordPressの標準機能「追加CSS」が最も手軽な方法です。

設定方法：

  • 管理画面 → 「外観」→「カスタマイズ」→「追加CSS」

リアルタイムでプレビューしながら編集できます。

2. 子テーマのstyle.cssを編集する

本格的なカスタマイズには子テーマの利用がおすすめです。

メリット：

  • テーマ更新時もカスタマイズが消えない
  • コードの管理がしやすい
  • バックアップが容易

SWELLは公式サイトから子テーマをダウンロードできます。

3. カスタムCSS用プラグインを使う

「Simple Custom CSS and JS」などのプラグインを使えば、複数のCSSファイルを管理できます。

基本のCSSカスタマイズ例

フォントサイズの変更

/* 本文のフォントサイズを調整 */
.post_content {
    font-size: 17px;
    line-height: 1.9;
}

見出しデザインのカスタマイズ

この記事では、H2に部分下線、H3に左線を入れています。

/* H2見出しに部分下線を追加 */
.post_content h2 {
    padding-bottom: 10px;
    margin-bottom: 20px;
    position: relative;
}

.post_content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, #3498db, #2ecc71);
    border-radius: 3px;
}

/* H3見出しに左線を追加 */
.post_content h3 {
    border-left: 5px solid #e74c3c;
    padding-left: 15px;
}

ボタンのホバーエフェクト

ホバー時に少し上に動かしています。
/* ボタンにホバー時のアニメーション */
.swell-block-button__link {
    transition: all 0.3s ease;
}

.swell-block-button__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

応用テクニック

1. メディアクエリでレスポンシブ対応

SWELLのブレイクポイントは600pxと960pxです。

/* PC表示 */
@media (min-width: 960px) {
    .post_content {
        font-size: 18px;
    }
}

/* タブレット表示 */
@media (min-width: 600px) and (max-width: 959px) {
    .post_content {
        font-size: 16px;
    }
}

/* スマホ表示 */
@media (max-width: 599px) {
    .post_content {
        font-size: 15px;
    }
}

SWELLのブレイクポイント（600px、960px）以外にも、WordPressのコアやプラグインが独自のブレイクポイントを持っている場合があります。
カスタマイズ後は、ブラウザの幅を動かしながら様々な画面サイズで崩れていないか確認してください。

2. カスタムクラスの活用

独自のカスタムクラスを組み合わせると、特定の要素だけにスタイルを適用できます。

この段落に.feature-boxクラスをあてています

/* カスタムクラス「feature-box」を持つ要素 */
.feature-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

3. CSS変数で一括管理

CSS変数（カスタムプロパティ）を使うことで、サイト全体のデザインを効率的に管理できます。

  • 一元管理ができる
    色・フォント・余白などをまとめて定義しておけば、後から変更したいときに 1か所を修正するだけで全体に反映されます。
    デザインの統一性も保ちやすくなります。
  • 動的に変更できる
    JavaScriptと組み合わせることで、ユーザーの操作に応じてリアルタイムにスタイルを変更可能です。
  • 継承ができる
    CSS変数は親要素で定義した値を子要素が引き継げるため、コンポーネントごとのテーマ管理がスムーズです。
  • レスポンシブ対応がしやすい
    メディアクエリ内でも再定義できるので、デバイスごとに最適なデザインを柔軟に調整できます。
/* カラーを変数で定義 */
:root {
    --main-color: #3498db;
    --sub-color: #e74c3c;
    --text-color: #333333;
}

/* 変数を使って適用 */
.post_content h2 {
    color: var(--main-color);
}

.swell-block-button__link {
    background-color: var(--sub-color);
}

このようにCSS変数を活用することで、
「デザインの変更に強く、保守しやすいCSS」を実現できます。

SWELLのクラス名を調べる方法

効果的にカスタマイズするには、要素のクラス名を知る必要があります。

Chrome DevToolsの使い方：

  1. カスタマイズしたい部分で右クリック
  2. 「検証」を選択
  3. 要素のHTMLとCSSが表示される
  4. クラス名をコピーして使用

よくある失敗と対処法

CSSが反映されない場合

  1. キャッシュをクリア
    ブラウザとWordPressプラグインのキャッシュを削除
  2. セレクタの優先度を上げる
    !importantを追加（最終手段）
  3. 記述場所を確認
    追加CSSか子テーマか確認

デザインが崩れた場合

/* リセット用のコード例 */
.your-class {
    all: unset; /* すべてのスタイルをリセット */
}

バックアップを取ってから作業することをお勧めします。

まとめ

まずは「追加CSS」で小さな変更から始めて、慣れてきたら子テーマを使った本格的なカスタマイズに挑戦してみてください。

ポイント：

  • 子テーマを使ってカスタマイズする
  • Chrome DevToolsでクラス名を調べる
  • メディアクエリでレスポンシブ対応を忘れずに
  • 変更前は必ずバックアップを取る

CSSの知識を深めることで、SWELLの可能性はさらに広がります。自分だけのオリジナルデザインを作ってみてください。

WordPress個別サポート

  • 自分でやってみたけれどうまくいかない
  • やりたいことはあるけど方法がわからない

そんなときはお気軽にご相談ください。
マンツーマンでサポートいたします。

詳細はこちらから
SWELL

関連記事

目次