2021-01-12
WebflowWebflow

【webflowの使い方】SVG画像の色を変更する方法

この記事は約
分で読むことができます
【webflowの使い方】SVG画像の色を変更する方法

23歳でブログをはじめました。高卒→社会人→セブ島留学→スタバ→プログラミングという経歴で、過去の自分が知りたかった情報などを発信し、たくさんの人の役に立てるサイトを目指しています。web制作、お仕事依頼はコメント欄、又はtwitter DMからお願いします。

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から選択された色が自動的に反映されます。

Image from Gyazo

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

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

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

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

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

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

に設定してみます。

Image from Gyazo

できました。

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

まとめ

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

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

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

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

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

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

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

【webflowの使い方】ハンバーガーメニューをクリックした後の表示設定 | ぷりくろ.com

https://purikuro.com/2021/01/05/webflow_humberger/

過去に自分がハマった部分です。(2時間程考えました)。そして実装は10分でできます。 備忘録として、そしてこれから実装する方のサポートになれば幸いです。 webflowでハンバーガーメニューをクリックした後の表示設定につ …

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

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

https://purikuro.com/2021/01/03/webflow_opne_graph_image/

〜webflowで、LINEでURLを共有した際に表示されるサムネイル画像の設定方法〜 LINEやfacebookなどでURLを送信した際にサムネイル画像が表示されます。 今回は表示されるサムネイル画像の設定方法について …

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

webflowで作られたハイクオリティなウェブサイト | ぷりくろ.com

https://purikuro.com/2021/01/02/webflow-hight-quality/

効率良くwebサイトやwebアプリケーションが作成できるノーコード 。 海外発祥のノーコード webflowを使用して作成されたハイクオリティなウェブサイトを 個人的にまとめてみたので、ご覧ください。 webflowにつ …

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

【webflowの使い方】文字を縦並びにする方法 | ぷりくろ.com

https://purikuro.com/2021/01/07/webflow_-vertical/

webflowの使い方 今回は文字を縦並びにする方法について説明していきます。 実装は数分でできます。 海外の記事で実装方法を調べ実際に作ってみました。 備忘録として、そしてこれから実装する方のサポートになれば幸いです。 …

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

【webflowの使い方】カルーセルスライダーの実装方法 | ぷりくろ.com

https://purikuro.com/2021/01/09/webflow_slider/

webflowの使い方 第4弾 今回はカルーセルスライダーの実装方法を説明していきます。 webflow universityで実装方法を調べ実際に作ってみました。 備忘録として、そしてこれから実装する方のサポートになれ …

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

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

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

オンラインスクール LikePay Academy

とてもオススメです。

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

学習プラン

likepayacademy料金プラン

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

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

webflowが学べるLikePay Academyはこちら

LikePay Academy

お問い合わせありがとうございます。
お返事にお時間をいただく場合がございます。
エラーが発生しました。もう一度やり直してください。
目次