テモトサイトME

カスタムCSS設定ガイド

microCMSの設定画面でカスタムCSSフィールドにCSSを記述することで、サイトのスタイルをカスタマイズできます。

基本的な使い方

セクションIDを使った指定

各セクションには自動でユニークなIDが付与されます。同じ種類のセクションが複数ある場合は連番が付きます。

デフォルトID：

セクション 1つ目 2つ目 3つ目
ヒーロー #hero #hero-2 #hero-3
特徴 #features #features-2 #features-3
CTA #cta #cta-2 #cta-3
FAQ #faq #faq-2 #faq-3
ギャラリー #gallery #gallery-2 #gallery-3
料金プラン #pricing #pricing-2 #pricing-3
リッチテキスト #richtext #richtext-2 #richtext-3
SNS #sns #sns-2 #sns-3
ブログ #blogs #blogs-2 #blogs-3 
/* 最初のヒーローセクションを指定 */
#hero {
  /* スタイル */
}

/* 2つ目のリッチテキストセクションを指定 */
#richtext-2 {
  /* スタイル */
}

セクションタイプでまとめて指定：

各セクションには .section-{タイプ} クラスも付与されるため、同じ種類のセクションをまとめてスタイリングできます。

/* すべてのリッチテキストセクションに適用 */
.section-richtext {
  /* スタイル */
}

/* すべてのCTAセクションに適用 */
.section-cta {
  /* スタイル */
}

実用的な例

ヒーローの見出しに影をつける

#hero h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

より強い影：

#hero h1 {
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

複数の影を重ねる：

#hero h1 {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.2);
}

ヒーローの画像に影をつける

#hero img {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

より強い影：

#hero img {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

カラー付きの影（画像の雰囲気に合わせて）：

#hero img {
  box-shadow: 0 20px 40px rgba(37, 99, 235, 0.3);
}

ヒーローの見出し背景ぼかしをカスタマイズする

microCMSで「見出し背景ぼかし」や「サブ見出し背景ぼかし」を設定すると、文字の後ろにぼかし効果が追加されます。このぼかしの強さや不透明度はCSS変数でカスタマイズできます。

:root {
  /* ぼかしの半径（大きいほどぼやける） */
  --hero-text-blur-radius: 20px;

  /* ぼかしの不透明度（0%〜100%、大きいほど濃い） */
  --hero-text-blur-opacity: 80%;
}

より強いぼかし効果：

:root {
  --hero-text-blur-radius: 30px;
  --hero-text-blur-opacity: 100%;
}

控えめなぼかし効果：

:root {
  --hero-text-blur-radius: 10px;
  --hero-text-blur-opacity: 50%;
}

特定セクションの背景色を変更

#about {
  background-color: #f0f9ff;
}

特定セクションの背景をグラデーションにする

斜めグラデーション：

#hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

横方向グラデーション：

#cta {
  background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
}

縦方向グラデーション：

#features {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

3色グラデーション：

#hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f97316 100%);
}

放射状グラデーション：

#cta {
  background: radial-gradient(circle at center, #3b82f6 0%, #1e40af 100%);
}

特定セクションの見出し色を変更

#features h2 {
  color: #e74c3c;
}

サブ見出しのスタイル変更

サブ見出しは各セクションの見出しの上に表示される小さなテキストです。.section-subheading クラスでカスタマイズできます。

/* 全セクションのサブ見出しの色を変更 */
.section-subheading {
  color: #10b981;
}

特定セクションのサブ見出しのみ変更：

#features .section-subheading {
  color: #f59e0b;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

サブ見出しを見出しの下に移動（デフォルトは上）：

#features .section-header {
  display: flex;
  flex-direction: column-reverse;
}

#features .section-subheading {
  margin-bottom: 0;
  margin-top: 0.5rem;
}

CTAボタンのスタイル変更

#cta a {
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

#cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.5);
}

Featuresカードにホバーエフェクト追加

#features .group {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#features .group:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

CSS変数を使ったカスタマイズ

テーマカラーはCSS変数で定義されているため、上書きすることでサイト全体の色を変更できます。

デフォルトテーマの全カラー変数

:root {
  /* プライマリカラー（メインカラー） */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;

  /* セカンダリカラー（補助カラー） */
  --color-secondary: #64748b;
  --color-secondary-dark: #475569;

  /* アクセントカラー（強調カラー） */
  --color-accent: #f59e0b;
  --color-accent-dark: #d97706;

  /* 背景カラー */
  --color-background: #ffffff;
  --color-surface: #f8fafc;

  /* テキストカラー */
  --color-text: #1e293b;
  --color-text-muted: #64748b;

  /* フォント */
  --font-sans: "Noto Sans JP", sans-serif;
  --font-heading: "Noto Sans JP", sans-serif;
  --font-icon: "Noto Sans JP", sans-serif;

  /* 間隔 */
  --section-padding-y: 5rem;
  --container-max-width: 1200px;

  /* ボーダー */
  --border-radius: 0.5rem;

  /* アイコン */
  --icon-filter: none;

  /* ハイライト（Markdownの==テキスト==） */
  --color-highlight: #fef08a;
}

例：プライマリカラーを変更

:root {
  --color-primary: #10b981;
  --color-primary-dark: #059669;
}

例：ハイライト色を変更

:root {
  --color-highlight: #c4f0c5; /* 緑系に変更 */
}

例：全体的なカラースキームを変更

:root {
  /* 青系から緑系に変更 */
  --color-primary: #059669;
  --color-primary-dark: #047857;

  /* セカンダリをライム系に */
  --color-secondary: #84cc16;
  --color-secondary-dark: #65a30d;

  /* アクセントをオレンジに */
  --color-accent: #f59e0b;
  --color-accent-dark: #d97706;

  /* 背景を少し緑がかった白に */
  --color-background: #f0fdf4;
  --color-surface: #dcfce7;

  /* テキストを深緑に */
  --color-text: #14532d;
  --color-text-muted: #166534;
}

フォントを変更

:root {
  --font-sans: "Your Font", sans-serif;
  --font-heading: "Your Heading Font", sans-serif;
}

Google Fontsを使用する場合は、@import を先頭に記述：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

:root {
  --font-heading: "Poppins", sans-serif;
}

セクション構造リファレンス

Hero（ヒーロー）

section#[id]
├── div.container
│   ├── h1          （見出し）
│   ├── p           （サブ見出し）
│   └── a           （ボタン）

Features（特徴）

section#[id]
├── div.container
│   ├── div.section-header  （見出しエリア）
│   │   ├── p.section-subheading  （サブ見出し）
│   │   └── h2.section-heading    （セクション見出し）
│   └── div         （カードグリッド）
│       └── div.group   （各カード）
│           ├── div     （アイコン）
│           ├── h3      （カードタイトル）
│           └── p       （説明文）

CTA（コールトゥアクション）

section#[id]
├── div.container
│   ├── div.section-header  （見出しエリア）
│   │   ├── p.section-subheading  （サブ見出し）
│   │   └── h2.section-heading    （見出し）
│   ├── p           （説明文）
│   └── a           （ボタン）

FAQ（よくある質問）

section#[id]
├── div.container
│   ├── div.section-header  （見出しエリア）
│   │   ├── p.section-subheading  （サブ見出し）
│   │   └── h2.section-heading    （セクション見出し）
│   └── div         （質問リスト）
│       └── details （各質問）
│           ├── summary （質問文）
│           └── p       （回答）

Richtext（リッチテキスト）

section#[id]
├── div.container
│   ├── div.section-header  （見出しエリア）
│   │   ├── p.section-subheading  （サブ見出し）
│   │   └── h2.section-heading    （セクション見出し）
│   └── div.grid    （画像ありの場合）
│       ├── div     （画像エリア）
│       │   └── img
│       └── div.rich-text （本文）

※ 画像なしの場合は .rich-text が直接 .container の子要素になります

Pricing（料金プラン）

section#[id]
├── div.container
│   ├── div.section-header  （見出しエリア）
│   │   ├── p.section-subheading  （サブ見出し）
│   │   └── h2.section-heading    （セクション見出し）
│   └── div         （プランカード）
│       └── div     （各プラン）
│           ├── h3  （プラン名）
│           ├── p   （価格）
│           └── ul  （特徴リスト）

高度なテクニック

特定ページだけにスタイルを適用

ページのbodyには data-theme 属性が付与されています。ページ固有のスタイルが必要な場合は、HTMLにカスタムクラスを追加する方法を検討してください。

レスポンシブ対応

/* モバイル向け */
#hero h1 {
  font-size: 2rem;
}

/* タブレット以上 */
@media (min-width: 768px) {
  #hero h1 {
    font-size: 3rem;
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  #hero h1 {
    font-size: 4rem;
  }
}

アニメーション追加

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#hero h1 {
  animation: fadeInUp 0.8s ease-out;
}

#hero p {
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

注意事項

  • カスタムCSSは他のスタイルより後に読み込まれるため、通常は !important なしで上書きできます
  • 大きな変更を加える前に、画面プレビューで確認することをお勧めします
記事一覧に戻る