webflow ロゴ

webflowの使い方 第6弾SVG画像の色を変更する方法です。

サイトを制作していると、
ツイッターFacebookなどのアイコンの色を変更させたい!

ってなったりしませんか?

簡単に好みの色に設定できるので、

SVG画像の色を変更する方法について説明していきます!

SVG画像の色を変更する方法

どういう時に画像の色を変更したいか
それは、アイコン画像の色を変更したい時が一番多いと思います。

今回はTwitterアイコンを使用して説明していきます。

使用するSVG画像はTwitterアイコン

 

SVG画像 色の変更

 

使用するアイコンはこちらです。

白色で、アイコンの形のみのデザインになってます。

画像としてキャンバスに置いてみる

結論からお話しすると、SVG画像として設置したら色の変更を行うことは出来ません。
SVG画像の色を変更できるように設置するにはどうしたら良いのかを知りたい方は、
次のステップに移動してください。

 

webflow youtube 設置

 

Mediaから、imageをクリックし、使用するTwitterアイコンを選択します。

SVG画像 色の変更

 

すると、画面内にTwitterアイコンが追加されました。

 

SVG画像 色の変更

 

背景が白同士で消えてしまうので、backgroung-colorを水色に設定しました。)

 

これだと、imageで設置したので色の変更を行うことはできません。

どうしたら良いのか。。

 

結論:カスタムコードを使用します。

 

Twitterアイコンの色を変更させるのはカスタムコードを使用することがわかったので、

早速手順を説明していきます。

SVG画像のファイルを見つけます。

ダウンロードしたSVG画像のファイルを探します。
macの場合はFinderのダウンロードに保存されているはずです。

 

SVG画像 色の変更

 

使用するSVG画像を選択して、右クリックをします。

 

webflowの使い方 SVG画像 色の変更

「このアプリケーションで開く」を選択し、テキストエディタを選択します。
メモでも、テキストエディットでも、Visual Studui Code、どれでも大丈夫です。

今回はVisual Studui Codeを選択します。

コードをコピーする。

webflowの使い方 SVG画像 色の変更

 

コードが表示されました。
上記画像の赤枠内をコピーしてください。(<svg>タグの開始から</svg>まで。)

次は、webflowに戻ります。

カスタムコードを追加する。

コードのコピーができたので、カスタムコードに貼り付けます。

 

webflowの使い方 SVG画像 色の変更

 

Componentsから、Embedをクリックします。

 

webflowの使い方 SVG画像 色の変更

 

先ほどコピーしたコードを貼り付けました。

ここで、カラーを選択していきます。

カラーコードを変更する。

現在のカラーコードは、fill=”#FFFFFF”
つまりホワイトの状態です。

ここの中身をご自身が使用したいカラーコードに書き換えることで、色の変更を行えます。

試しに、カラーコードをブラックにしてみます。

 

webflowの使い方 SVG画像 色の変更

 

ホワイトだったTwitterアイコンの色が、ブラックに変更されました。

 

このように、fill=””の中のカラーコードを変更することで、SVG画像の色を変更することができます。

ただこれだといちいちカスタムコードを開いて、毎回カラーコードを入力していくのは
正直めんどうくさい作業ですよね。

SVG画像の色を、
TypographyのColorから、色の選択を行えるように設定を変更していきます。

fill=””の中身を記述する

先ほどの方法では、fill=”xxxx”の中のカラーコードを毎回入力して色の変更を行いましたが、
変更するたびにコードを入力していくのはめんどうです。

 

webflowの使い方 SVG画像 色の変更

 

中身を、fill=”CurrentColor”に変更します。

CurrentColorにすると、Typographyから選択された色が自動的に反映されます。

 

CurrentColorにすると、
Typographyから色選択した色が反映されるようになりました。

SVG画像がホバーされた時に色の変更をする方法

上記では、CurrentColorと入力することで、Typographyで選択された色が反映されるようになる
とお話ししました。

ということなので、ホバーされたときの色の変更も簡単に行うことができます。

SelectorからHoverを選択し、Typographyから色を指定します。

 

ホバー前の色を
ホバー後の色を

 

に設定してみます。

 

 

できました。

少し目がチカチカしますが、お許しください笑

まとめ

結論: SVG画像の色を変更するには、コードを調べてwebflowでカスタムコードを使用し、

カラーコードを入力する。CurrentColorと記述するのがオススメ。

 

簡単にTwitterアイコンの色を変更することができました。

webサイトを制作する時って、素材集めの方が大変だったりしますが
このように直接色の変更を行えばスムーズに、作業が捗ります。

webflowの使い方 他の実装方法について

他にもwebflowの使い方について記事をアップしています。
参考になるものがあればご覧下さい。

【webflowの使い方】ハンバーガーメニューをクリックした後の表示設定

【webflowの使い方】 LINEでURLを共有した際に表示されるサムネイル画像の設定方法

webflowで作成されたクオリティの高いウェブサイト まとめ

【webflowの使い方】文字を縦並びにする方法

【webflowの使い方】カルーセルスライダーの実装方法

日本でwebflowを学べるオンラインスクール LikePay Academy

webflowは全部英語で、日本語の情報はあまりありませんが

日本でwebflowが学べるオンラインスクールで、LikePay Academyがあります。

オンラインスクール LikePay Academy

とてもオススメです。

LikePay Academyはロシア人のイーゴリさんがwebflowについて詳しく説明してくれています。
講座は、主に動画をみて学んでいくスタイルです。

学習プラン

likepayacademy料金プラン

PRO会員になると
・全学習コンテンツ見放題
・個別メンタリング
・PROコミュニティ
・定期的に開催されるイベントに無料参加

この個別メンタリングはかなり魅力的です。

webflowが学べるLikePay Academyはこちら

LikePay Academy