CSS maskの使い方｜WordPressで画像のフェードや色を変えられるアイコンを作る

CSSの mask は、別の画像やグラデーションを「型」にして、要素の見える部分と隠れる部分を決めるプロパティです。写真の下端を背景になじませる、画像をSVGの形で切り抜く、1つのSVGファイルから好きな色のアイコンを作る、といった表現がCSSだけでできます。

この記事では、基本の書き方、WordPressで使う3つの例、CSSの置き場所と画像パスの注意、表示されないときの確認点を説明します。

maskの基本

マスクの画像は、不透明な部分が見え、透明な部分が隠れるものとして扱われます（画像の透明度＝アルファ値が使われる）。色そのものは関係しないので、黒で塗った部分と赤で塗った部分は同じように「見える」扱いです。

.fade-bottom {
  /* 上は不透明（見える）、下に向かって透明（隠れる） */
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

background-* と同じ感覚で、位置や大きさを指定するプロパティがあります。

mask-repeat の初期値は repeat なので、要素より小さいマスク画像はタイル状に繰り返されます。1つだけ表示したいときは no-repeat を指定します。まとめて書く場合は mask の一括指定を使います。

.shape {
  mask: url("mask.svg") center / contain no-repeat;
}

mask-mode は初期値のままなら、通常の画像では透明度が使われ、SVGの <mask> 要素を参照した場合は明るさ（白が見える、黒が隠れる）が使われます。

ブラウザの対応とベンダープレフィックス

接頭辞なしの mask 関連プロパティは、Chrome・Edge 120、Firefox 53、Safari 15.4 以降で使えます（2026年11月時点）。それより古い Chrome や Safari も考慮する場合は、-webkit- 付きの指定を併記します。-moz- 付きの指定は必要ありません。

.fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

以下の例では読みやすさのため接頭辞なしで書きます。古いブラウザに対応する場合は、同じ値の -webkit-mask-* を前に足してください。

例1: 写真の下端を背景になじませる

アイキャッチやカバー画像の下端を、背景に向かって消していく例です。WordPressでは、画像ブロックやカバーブロックを選び、右側の設定の「高度な設定 > 追加CSSクラス」に fade-bottom と入力して、次のCSSを追加します。

.fade-bottom img,
.fade-bottom .wp-block-cover__image-background {
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

画像ブロックでは追加したクラスが <figure> に付くため、中の <img> にマスクをかけています。角度を付けたい場合は linear-gradient(160deg, …)、中心から外側へ消したい場合は radial-gradient(circle, #000 50%, transparent 75%) を使います。

例2: 画像をSVGの形で切り抜く

ハートや吹き出しなど、好きな形で画像を切り抜く例です。形の部分を塗りつぶしたSVGファイルを用意します。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M50 88 L12 50 A20 20 0 0 1 50 22 A20 20 0 0 1 88 50 Z" fill="#000"/>
</svg>

これをテーマのフォルダーに assets/images/heart.svg として保存し、テーマのCSSファイルから参照します。

.mask-heart img {
  mask: url("../images/heart.svg") center / contain no-repeat;
  aspect-ratio: 1;
  object-fit: cover;
}

形の外側は透明なので隠れ、塗りつぶした部分だけに画像が見えます。単純な円や多角形であれば、画像ファイルを用意しなくても clip-path で切り抜けます。ぼかした境界や複雑な形が必要なときは mask が向いています。

例3: 文字色に合わせて色が変わるアイコン

背景色で塗った要素にアイコンの形のマスクをかけると、SVGを書き換えずに色を変えられるアイコンになります。background-color: currentColor にしておくと、周りの文字色と同じ色になり、リンクのホバー色にも追従します。

.icon-external::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.25em;
  vertical-align: -0.125em;
  background-color: currentColor;
  mask: url("../images/external.svg") center / contain no-repeat;
}

アイコンのSVGは、例2と同じく形の部分を塗りつぶしたものを用意します。SVGの中の色はマスクでは使われないので、何色で塗っても結果は同じです。

WordPressでのCSSの置き場所と画像パス

テーマ（子テーマ）のCSSファイルに書く

url() の相対パスは、そのCSSファイルの場所を基準に解決されます。上の例の ../images/heart.svg は、CSSファイルが assets/css/ にある前提です。子テーマなら、次のように子テーマの functions.php で読み込みます。

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'mytheme-mask',
		get_theme_file_uri( 'assets/css/mask.css' ),
		array(),
		wp_get_theme()->get( 'Version' )
	);
} );

get_theme_file_uri() は、子テーマにファイルがあれば子テーマの、なければ親テーマのURLを返します。親テーマのファイルを直接編集すると、テーマの更新で消えるので避けます。

追加CSSに書く

「外観 > カスタマイズ > 追加CSS」やサイトエディターの「追加CSS」に書いたCSSは、ページ内に直接出力されます。この場合、相対パスは表示中のページのURLを基準に解決されるため、記事ごとに参照先が変わってしまいます。追加CSSでは、https://example.com/wp-content/uploads/2026/11/heart.svg のように https:// から始まる完全なURLか、/wp-content/uploads/… のようにサイトのルートから始まるパスで書きます。マスク用のSVGはメディアライブラリにアップロードしたものを参照すると管理しやすくなります（SVGのアップロードは、WordPressの初期状態では許可されていないので、PNGで用意するか、テーマのフォルダーに置きます）。

表示されないときの確認点

• 要素ごと消えた: マスク画像の読み込みに失敗すると、マスクは「すべて透明」として扱われ、要素全体が見えなくなります。開発者ツールの「Network（ネットワーク）」で、マスク画像が404などになっていないか確認します
• 別ドメインの画像を使っている: CDNなど別ドメインから読み込んだマスク画像が効かない場合は、コンソールにCORS（オリジン間の読み込み）関連のエラーが出ていないか確認します。マスク画像はサイトと同じドメインに置くのが無難です
• 画像がタイル状に並ぶ: mask-repeat の初期値は repeat です。no-repeat を指定します
• 形が出ず、四角いまま: マスク画像に透明な部分がない（白い背景で塗りつぶしたPNGやJPEGなど）と、全体が「見える」扱いになります。背景を透明にした画像を使います
• 古いブラウザで効かない: -webkit-mask-* を併記しているか確認します

まとめ

• mask は、画像やグラデーションの不透明な部分だけを見せるプロパティ。色は関係しない
• 接頭辞なしで Chrome・Edge 120、Firefox 53、Safari 15.4 以降が対応。古いブラウザ向けには -webkit- を併記する（-moz- は不要）
• グラデーションで画像の端を消す、SVGの形で切り抜く、currentColor と組み合わせて色の変わるアイコンを作る、が代表的な使い方
• url() の相対パスは、CSSファイルならそのファイル、追加CSSなら表示中のページが基準。追加CSSでは https:// から始まるURLかルートからのパスで書く
• マスク画像の読み込みに失敗すると要素全体が消えるので、まずネットワークとコンソールを確認する

• WordPressのCSS clip-path（クリップパス）を使う方法
• WordPressのCSS backdrop-filterで背景ぼかし効果