WordPressでSVGアイキャッチアイコンをvwとclampでレスポンシブ化した話

by

はじめに

WordPressサイトでSVGアイコンを使ったアイキャッチ画像を作ろうとしたとき、画面サイズによってレイアウトが崩れる問題に直面しました。特に、固定サイズで作ったデザインがスマートフォンでは小さすぎたり、大画面では余白が多すぎたりと、バランスの取れた表示が難しい状況でした。

そこで、CSSのvw単位とclamp()関数を組み合わせることで1、どの画面サイズでも美しく表示されるレスポンシブなSVGアイキャッチを実現しました。

WordPress SVGアイキャッチ完全レスポンシブ化 従来の問題 固定サイズ 絶対位置指定 レイアウト崩れ 解決策 Flexboxレイアウト vw + clamp()関数 height: clamp(280px, 40vw, 480px) font-size: clamp(20px, 3.2vw, 36px) SVG: clamp(120px, 15vw, 152px) gap: clamp(10px, 2vw, 20px) 結果 PC対応 モバイル対応 完全対応 技術ポイント Flexbox • display: flex • flex-direction: column • 中央配置・自動調整 vw単位 • 画面幅の1% • 動的スケーリング • 比例調整 clamp()関数 • 最小・理想・最大値 • 範囲制限 • 安全な調整

解決したい課題

従来の固定サイズでのSVGレイアウトには、いくつかの問題がありました。

解決したい課題 絶対位置指定の限界 • position: absolute使用 • 固定座標での配置 • ウィンドウサイズ変更で崩れ メディアクエリの限界 • 段階的な調整のみ • ブレークポイント間で急変 • コードが複雑化 従来のアプローチ vs 理想のアプローチ Before: 固定値 180px top: 202px 36px font 画面サイズで崩れる After: 動的調整 15vw clamp() flex 滑らかにスケーリング

まず、絶対位置指定（position: absolute）を使ったSVGの配置です。これは特定の画面サイズでは美しく見えるものの、ウィンドウサイズが変わると要素同士の位置関係が崩れてしまいます。レスポンシブデザインの基本に反する手法といえるでしょう2。

次に、メディアクエリによる段階的な調整の限界です。複数のブレークポイントを設定して、それぞれで異なるサイズを指定する方法では、ブレークポイント間でのサイズ変化が急激になります。また、様々なデバイスサイズに対応するために、多くのメディアクエリが必要になり、コードが複雑化していました。

SVGアイコンの準備

今回使用したSVGは、WordPressプラグインを表現するアイコンデザインです。青い円の背景に白いプラグインパーツ、緑色のベジェ曲線、そして左右にコードブラケット記号を配置した構成になっています。

SVGアイコンの準備 WordPressプラグインアイコン 構成要素 青い円背景 白いプラグインパーツ 緑のベジェ曲線 < > コードブラケット 128x128px viewBox HTML配置 <h1 class=”entry-title”> <svg class=”eyecatch-svg” viewBox=”0 0 128 128″> …SVG内容… </svg> タイトルテキスト </h1> 実装のポイント SVGとテキストを同一要素内に配置 ブランド認識向上のため統一デザイン viewBoxでスケーラブル対応 個別記事とブログ一覧で共通利用 
<svg class="eyecatch-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
  <!-- 背景円 -->
  <circle cx="64" cy="64" r="56" fill="#4A90E2"></circle>
  
  <!-- WordPressプラグインピース -->
  <g transform="translate(35, 35)">
    <path d="M 8 8 L 42 8 Q 48 8 48 14 L 48 18 L 52 18 Q 58 18 58 24 L 58 34 Q 58 40 52 40 L 48 40 L 48 44 Q 48 50 42 50 L 8 50 Q 2 50 2 44 L 2 14 Q 2 8 8 8 Z" fill="#FFFFFF"></path>
  </g>
  
  <!-- SVGベクター線 -->
  <g transform="translate(20, 45)">
    <path d="M 15 25 Q 35 15 55 25 Q 75 35 88 25" stroke="#7ED321" stroke-width="4" fill="none" stroke-linecap="round"></path>
    <circle cx="35" cy="20" r="2" fill="#7ED321"></circle>
    <circle cx="75" cy="30" r="2" fill="#7ED321"></circle>
  </g>
  
  <!-- コードブラケット -->
  <g transform="translate(25, 75)">
    <path d="M 6 8 L 2 12 L 6 16" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round"></path>
    <path d="M 72 8 L 76 12 L 72 16" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round"></path>
  </g>
</svg>
Code language: HTML, XML (xml)

このSVGをHTMLのh1タイトル要素内に直接配置し、タイトルテキストと組み合わせて表示します。

最初のアプローチ：固定サイズと絶対位置指定

当初は、以下のようなCSSで実装していました。

.single .inside-article .entry-header h1.entry-title {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  top: 202px;
  font-size: 36px;
  line-height: 1.4em;
  margin: 30px;
  font-weight: 700;    
}

.single .inside-article .entry-header h1.entry-title .eyecatch-svg {
  position: absolute;
  top: -200px;
  height: 180px;
  width: 180px;
}
Code language: CSS (css)

この方法では、SVGを絶対位置で上部に配置し、テキストを下部に固定していました。デスクトップでは問題なく表示されるものの、画面サイズが変わると要素の配置バランスが崩れてしまいます。

改善アプローチ：Flexboxレイアウトへの変更

まず、絶対位置指定を廃止し、Flexboxレイアウトに変更しました。

改善アプローチ：Flexboxレイアウトへの変更 Flexbox採用 絶対位置を廃止 要素の関係性を維持 自動中央配置 gap で間隔制御 改善後のCSS .entry-header { display: flex; flex-direction: column; justify-content: center; align-items: center; } .entry-title { display: flex; flex-direction: column; gap: 20px; position: static; } Flexboxの利点 要素の自動中央配置 justify-content: center align-items: center flex-shrink: 0 でサイズ固定 SVGサイズが意図せず縮小されない レスポンシブ対応の基盤 gap プロパティで間隔制御 SVGとテキスト間の距離 簡潔な記述 SVG タイトルテキスト flex-direction: column 
.single .inside-article .entry-header {
  height: 480px;   
  background: beige;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.single .inside-article .entry-header h1.entry-title {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  max-width: 800px;
  
  font-size: 36px;
  line-height: 1.4em;
  margin: 30px;
  font-weight: 700;
  text-align: center;
  gap: 20px;
}

.single .inside-article .entry-header h1.entry-title .eyecatch-svg {
  position: static;
  height: 128px;
  width: 128px;
  flex-shrink: 0;
}
Code language: CSS (css)

Flexboxのflex-direction: columnでSVGとテキストを縦に並べ、gapプロパティで要素間の間隔を制御します。flex-shrink: 0により、SVGのサイズが意図せず縮小されることを防ぎます。

vw単位とclamp関数による動的調整

Flexboxレイアウトでの基本構造ができたところで、画面サイズに応じた動的調整を実装しました。ここで重要な役割を果たすのが、vw単位とclamp()関数です。

vw単位とclamp関数による動的調整 vw単位の特徴 • ビューポート幅の1% • 1000px画面 → 1vw = 10px • 画面サイズに比例 • 滑らかなスケーリング clamp()関数 clamp(最小, 理想, 最大) • 範囲制限機能 • 極端な値を防止 • メディアクエリ不要 実装例 height: clamp(280px, 40vw, 480px) font-size: clamp(20px, 3.2vw, 36px) SVG: clamp(120px, 15vw, 152px) gap: clamp(10px, 2vw, 20px) clamp()の動作イメージ 画面幅 サイズ 最小値 理想値(vw) 最大値 480px 中間 1200px 最終コード例：height: clamp(280px, 40vw, 480px)

vw単位の特徴

vw（viewport width）は、ビューポート幅の1%を表す単位です。画面幅が1000pxの場合、1vwは10pxに相当します3。この単位を使うことで、画面サイズに比例したスケーリングが可能になります。

clamp関数の活用

clamp(最小値, 理想値, 最大値)関数は、理想値を基準としながら最小値と最大値の範囲内で値を制限します。これにより、極端に小さな画面や大きな画面での表示問題を防げます。

最終的な実装は以下のようになりました。

.single .inside-article .entry-header {
  height: clamp(280px, 40vw, 480px);
  background: beige;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.single .inside-article .entry-header h1.entry-title {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  max-width: min(800px, 90vw);
  
  font-size: clamp(20px, 3.2vw, 36px);
  line-height: 1.6em;
  margin: clamp(15px, 3vw, 30px);
  font-weight: 700;
  text-align: center;
  gap: clamp(10px, 2vw, 20px);
}

.single .inside-article .entry-header h1.entry-title .eyecatch-svg {
  position: static;
  height: clamp(120px, 15vw, 152px);
  width: clamp(120px, 15vw, 152px);
  flex-shrink: 0;
  margin: auto;
}
Code language: CSS (css)

各要素の調整ポイント

ヘッダー全体の高さはclamp(280px, 40vw, 480px)で設定しました。小さな画面では280px、大きな画面では480pxを上限とし、中間サイズでは画面幅の40%で動的に調整されます。

SVGサイズはclamp(120px, 15vw, 152px)で、画面幅の15%を基準にスケーリングします。最小120px、最大152pxの範囲で制限することで、極端なサイズ変化を防いでいます。

フォントサイズはclamp(20px, 3.2vw, 36px)で調整しました。SVGが大きめに設定されているため、フォントサイズの増加率は3.2vwと控えめにして、全体のバランスを保っています。

ブログ一覧での統一表示

個別記事だけでなく、ブログ一覧でも同じSVGアイコンを表示することで、サイト全体の統一感を高めました。

ブログ一覧での統一表示 サイト統一感 • 個別記事と一覧で統一 • ブランド認識向上 ブログ一覧用CSS実装 .blog .entry-title .eyecatch-svg { width: 64px; height: 64px; position: absolute; left: 0px; top: 0px; } .blog .inside-article { padding-left: 80px; position: relative; } ブログ一覧レイアウト 記事タイトル1 2025-06-18 記事タイトル2 2025-06-17 設計ポイント 64px固定サイズ 左上に絶対配置 テキストとの視覚的関連 
.blog .inside-article .entry-title .eyecatch-svg,
.archive .inside-article .entry-title .eyecatch-svg {
  width: 64px;
  height: 64px;
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
}

.blog .inside-article,
.archive .inside-article {
  padding-left: 80px; 
  position: relative;
}
Code language: CSS (css)

ブログ一覧では64pxの固定サイズでSVGを左上に配置し、記事タイトルとの視覚的な関連性を明確にしています。

レスポンシブ戦略の最適化

最終的な実装では、画面サイズに応じて異なる戦略を採用しました。

レスポンシブ戦略の最適化 480px以下 固定値を使用 height: 240px font-size: 18px SVG: 120px vw計算が不適切な場合 481px-1199px vw + clamp使用 clamp(280px, 40vw, 480px) clamp(20px, 3.2vw, 36px) clamp(120px, 15vw, 152px) 動的スケーリング 1200px以上 上限値で固定 height: 480px font-size: 36px SVG: 152px 過度な大きさを防止 各戦略の採用理由 小画面 vwベース計算が 適切に機能しない場合 中間画面 clamp()の真価発揮 滑らかなスケーリング 大画面 要素の過度な拡大防止 デザインバランス維持 画面サイズに応じた最適戦略でユーザビリティを最大化

極端に小さな画面（480px以下）では、vwベースの計算が適切に機能しない場合があるため、固定値を使用します4。

@media (max-width: 480px) {
  .single .inside-article .entry-header {
    height: 240px;
  }
  
  .single .inside-article .entry-header h1.entry-title {
    font-size: 18px;
    margin: 10px;
    gap: 8px;
  }
  
  .single .inside-article .entry-header h1.entry-title .eyecatch-svg {
    height: 120px;
    width: 120px;
  }
}
Code language: CSS (css)

逆に、非常に大きな画面（1200px以上）では、要素が過度に大きくなることを防ぐため、上限値で固定します。

@media (min-width: 1200px) {
  .single .inside-article .entry-header {
    height: 480px;
  }
  
  .single .inside-article .entry-header h1.entry-title {
    font-size: 36px;
    margin: 30px;
    gap: 20px;
  }
  
  .single .inside-article .entry-header h1.entry-title .eyecatch-svg {
    height: 152px;
    width: 152px;
  }
}
Code language: CSS (css)

実装の効果と改善点

この実装により、以下の改善が達成されました。

実装の効果と改善点 達成された改善 一貫したデザインバランス どのデバイスでも美しい表示 SVGとテキストの適切な比率 メディアクエリの大幅削減 複数ブレークポイント不要 コードの簡潔性向上 保守性の向上 clamp()引数変更で全体調整 メンテナンスが容易 Before vs After Before ❌ 多数のメディアクエリ ❌ 絶対位置指定 ❌ 固定値だらけ ❌ 急激なサイズ変化 After ✅ clamp()で範囲制御 ✅ Flexboxレイアウト ✅ vw単位で動的調整 ✅ 滑らかなスケーリング 技術的特徴 極端な画面での制限併用 実用的なレスポンシブ設計 コードの可読性重視

まず、画面サイズに関係なく一貫したデザインバランスが保たれるようになりました。SVGとテキストの比率が画面幅に応じて適切にスケーリングされるため、どのデバイスでも美しい表示が実現できます。

次に、メディアクエリの大幅な削減です。従来は複数のブレークポイントでそれぞれ異なる値を設定していましたが、clamp()とvwの組み合わせにより、メディアクエリは極端なケースのみに限定できました。

また、コードの保守性も向上しました。値の調整が必要な場合、clamp()の引数を変更するだけで全体のスケーリングを調整できるため、メンテナンスが容易になります。

まとめ

WordPressでSVGアイキャッチアイコンの完全レスポンシブ化を実現するには、固定サイズと絶対位置指定を避け、Flexboxレイアウトを基盤とすることが重要です5。その上で、vw単位とclamp()関数を組み合わせることで、画面サイズに応じた滑らかなスケーリングが可能になります。極端な画面サイズではメディアクエリによる制限を併用し、実用的なレスポンシブデザインを構築できます。

  1. clamp() – CSS | MDN – CSS clamp()関数の公式仕様と使用例、パラメータの詳細解説
  2. Basic concepts of flexbox – CSS | MDN – Flexboxレイアウトの基本概念と軸の概念、プロパティの動作原理
  3. Modern Fluid Typography Using CSS Clamp — Smashing Magazine – clamp()を使った流体タイポグラフィの実装とアクセシビリティ配慮
  4. CSS Viewport Units: vh, vw, vmin, and vmax — SitePoint – ビューポート単位（vw、vh）の詳細解説とレスポンシブデザインでの活用法
  5. CSS min(), max(), and clamp() | Articles | web.dev – Googleによるmin()、max()、clamp()関数の実用的な使用例とベストプラクティス
  6. How to Enable SVG Support in WordPress (Most Secure Methods) – WordPressでのSVGファイル安全な有効化方法とセキュリティ対策
  7. Complete Guide to Flexbox | CSS-Tricks – Flexboxプロパティの包括的なリファレンスと実装パターン集
SVG
  1. clamp()関数は2020年7月以降、主要ブラウザでサポートされており、現在のブラウザ互換性スコアは92%となっています。 – CSS clamp() Function Browser Support | Can I Use
  2. Flexboxは2015年のSafari 9リリース以降、主要ブラウザで完全にサポートされており、モダンなレスポンシブレイアウトの標準的な手法となっています。 – CSS Flexible Box Layout Module | Can I Use
  3. モバイルSafariでは、アドレスバーの表示・非表示によってビューポートが変化する問題があります。iOS 8以降、この問題を解決するために固定値ベースの計算方式が採用されています。 – The trick to viewport units on mobile | CSS-Tricks
  4. モバイルデバイスでのビューポート単位には、アドレスバーの動的表示による問題があります。新しいdvh、svh、lvh単位がこれらの問題を解決するために策定されましたが、まだブラウザサポートが限定的です。 – The large, small, and dynamic viewport units | web.dev
  5. WordPressはセキュリティ上の理由からSVGファイルのアップロードをデフォルトで無効にしています。SVGファイルはXMLベースであり、悪意のあるコードを含む可能性があるためです。Safe SVGなどのプラグインを使用することで安全にSVGファイルを利用できます。 – How to Enable SVG Support in WordPress (Most Secure Methods)