カラーミーSEO+で利用できるSVGアイコン

カラーミーショップ

*当記事はカラーミーSEO+テンプレート限定の内容です。他テンプレートでは利用できませんのでお気を付けください。

 

カラーミーSEO+では各パーツにSVGアイコンを入れています。

< use >タグを利用すれば好きな場所にアイコンを呼び出せますので、カスタマイズやフリーページ作成の際など、使えそうであればお役立てください。

スポンサーリンク

svgアイコンの呼び出しかた

<svg role="img">
 <use xlink:href="#■■■"></use>
</svg>

 

#■■■ の部分に呼び出したいアイコン名を入力します(下表参照)

 

#icon-home

#icon-cart

#icon-tag

#icon-heart

#icon-star

#icon-mail

#icon-list

#icon-folder

#icon-question

#icon-search

#icon-batu

#icon-menu

#icon-plus

#icon-minus

#icon-smile

#icon-fb

#icon-tw

#icon-li

SVGアイコンのCSS編集

アイコンの大きさはwidth・height、色はcolor または fill を使ってCSS編集します。

svg{
 width: __px;
 height: __px;
 fill: currentColor;
}

* fill (塗りつぶし)プロパティでcurrentoColor を指定すると、親要素に指定されているcolorを引き継ぎます。

カラーミーショップ対応テンプレート
カラーミーショップ専用テンプレートSEO Plus

カラーミーショップでご利用いただけるSEO対策済みテンプレートを販売しています。

リッチリザルト用の構造化データの自動生成、商品スライドの自動設置、内部リンクの最大化などSEOフレンドリーな構造となっています。

7月まで50%オフセール中。テンプレート利用にはデザイン編集(HTML操作など)が必要になりますので、操作が不安な方はご相談ください

SEO Plusデモページ
ミフネWEB
タイトルとURLをコピーしました