product
product-1
{{ 'product-1' | placeholder_svg_tag }}product-2
{{ 'product-2' | placeholder_svg_tag }}product-3
{{ 'product-3' | placeholder_svg_tag }}product-4
{{ 'product-4' | placeholder_svg_tag }}product-5
{{ 'product-5' | placeholder_svg_tag }}product-6
{{ 'product-5' | placeholder_svg_tag }}collection
collection-1
{{ 'collection-1' | placeholder_svg_tag }}collection-2
{{ 'collection-2' | placeholder_svg_tag }}collection-3
{{ 'collection-3' | placeholder_svg_tag }}collection-4
{{ 'collection-4' | placeholder_svg_tag }}collection-5
{{ 'collection-5' | placeholder_svg_tag }}collection-6
{{ 'collection-6' | placeholder_svg_tag }}lifestyle
lifestyle-1
{{ 'lifestyle-1' | placeholder_svg_tag }}lifestyle-2
{{ 'lifestyle-2' | placeholder_svg_tag }}image
image
{{ 'image' | placeholder_svg_tag }}logo
logo
{{ 'logo' | placeholder_svg_tag }}product-apparel
product-apparel-1
{{ 'product-apparel-1' | placeholder_svg_tag }}product-apparel-2
{{ 'product-apparel-2' | placeholder_svg_tag }}product-apparel-3
{{ 'product-apparel-3' | placeholder_svg_tag }}product-apparel-4
{{ 'product-apparel-4' | placeholder_svg_tag }}collection-apparel
collection-apparel-1
{{ 'collection-apparel-1' | placeholder_svg_tag }}collection-apparel-2
{{ 'collection-apparel-2' | placeholder_svg_tag }}collection-apparel-3
{{ 'collection-apparel-3' | placeholder_svg_tag }}collection-apparel-4
{{ 'collection-apparel-4' | placeholder_svg_tag }}hero-apparel
hero-apparel-1
{{ 'hero-apparel-1' | placeholder_svg_tag }}hero-apparel-2
{{ 'hero-apparel-2' | placeholder_svg_tag }}hero-apparel-3
{{ 'hero-apparel-3' | placeholder_svg_tag }}blog-apparel
blog-apparel-1
{{ 'blog-apparel-1' | placeholder_svg_tag }}blog-apparel-2
{{ 'blog-apparel-2' | placeholder_svg_tag }}blog-apparel-3
{{ 'blog-apparel-3' | placeholder_svg_tag }}detailed-apparel
detailed-apparel-1
{{ 'detailed-apparel-1' | placeholder_svg_tag }}応用
placeholder_svg_tagにはクラス属性が指定できるので、product-1〜imageのラインアートであればCSSで配色を変えられます。
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}.placeholder-svg {
fill: #fff;
background: #c00;
}product-apparel-1〜detailed-apparel-1は配色されていますが、モノトーンにしたい場合は、CSSで以下の様に指定します。
{{ 'placeholder-svg' | placeholder_svg_tag: 'placeholder-svg' }}.placeholder-svg {
filter: grayscale();
}また、トーンを落として出力することも可能です。
{{ 'placeholder-svg' | placeholder_svg_tag: 'placeholder-svg' }}.placeholder-svg {
filter: grayscale(.5);
}filterプロパティは他にも、セピアにしたり色相の角度を変えたり、彩度を変えたりできます。
逆にラインアートにすることも可能です。（かなり強引ですが…）
{{ 'placeholder-svg' | placeholder_svg_tag: 'placeholder-svg' }}.placeholder-svg path:not([fill='#f2f2f2']):not([opacity='.5']) {
stroke: #fff;
stroke-width: 2;
}
.placeholder-svg path[opacity='.5'] {
fill: none;
}
.placeholder-svg path {
fill: #00c;
}この記事を書いた人
モリタオウ
株式会社テンカ 代表取締役 / ウェブクリエイター / グラフィックデザイナー
1977年12月20日生まれ。広告代理店や企業広報を経て、2007年12月にデザイン事務所「モリタ・クリエイト」を創業。2022年12月に「株式会社テンカ」を設立。