webflowの使い方 第６弾はSVG画像の色を変更する方法です。
サイトを制作していると、
ツイッターやFacebookなどのアイコンの色を変更させたい！
ってなったりしませんか？
簡単に好みの色に設定できるので、
SVG画像の色を変更する方法について説明していきます！
SVG画像の色を変更する方法
どういう時に画像の色を変更したいか
それは、アイコン画像の色を変更したい時が一番多いと思います。
今回はTwitterアイコンを使用して説明していきます。
使用するSVG画像はTwitterアイコン
使用するアイコンはこちらです。
白色で、アイコンの形のみのデザインになってます。
画像としてキャンバスに置いてみる
結論からお話しすると、SVG画像として設置したら色の変更を行うことは出来ません。
SVG画像の色を変更できるように設置するにはどうしたら良いのかを知りたい方は、
次のステップに移動してください。
Mediaから、imageをクリックし、使用するTwitterアイコンを選択します。
すると、画面内にTwitterアイコンが追加されました。
（背景が白同士で消えてしまうので、backgroung-colorを水色に設定しました。）
これだと、imageで設置したので色の変更を行うことはできません。
どうしたら良いのか。。
結論：カスタムコードを使用します。
Twitterアイコンの色を変更させるのはカスタムコードを使用することがわかったので、
早速手順を説明していきます。
SVG画像のファイルを見つけます。
ダウンロードしたSVG画像のファイルを探します。
macの場合はFinderのダウンロードに保存されているはずです。
使用するSVG画像を選択して、右クリックをします。
「このアプリケーションで開く」を選択し、テキストエディタを選択します。
メモでも、テキストエディットでも、Visual Studui Code、どれでも大丈夫です。
今回はVisual Studui Codeを選択します。
コードをコピーする。
コードが表示されました。
上記画像の赤枠内をコピーしてください。（<svg>タグの開始から</svg>まで。）
次は、webflowに戻ります。
カスタムコードを追加する。
コードのコピーができたので、カスタムコードに貼り付けます。
Componentsから、Embedをクリックします。
先ほどコピーしたコードを貼り付けました。
ここで、カラーを選択していきます。
カラーコードを変更する。
現在のカラーコードは、fill=”#FFFFFF”
つまりホワイトの状態です。
ここの中身をご自身が使用したいカラーコードに書き換えることで、色の変更を行えます。
試しに、カラーコードをブラックにしてみます。
ホワイトだったTwitterアイコンの色が、ブラックに変更されました。
このように、fill=””の中のカラーコードを変更することで、SVG画像の色を変更することができます。
ただこれだといちいちカスタムコードを開いて、毎回カラーコードを入力していくのは
正直めんどうくさい作業ですよね。
SVG画像の色を、
TypographyのColorから、色の選択を行えるように設定を変更していきます。
fill=””の中身を記述する
先ほどの方法では、fill=”xxxx”の中のカラーコードを毎回入力して色の変更を行いましたが、
変更するたびにコードを入力していくのはめんどうです。
中身を、fill=”CurrentColor”に変更します。
CurrentColorにすると、Typographyから選択された色が自動的に反映されます。
CurrentColorにすると、
Typographyから色選択した色が反映されるようになりました。
SVG画像がホバーされた時に色の変更をする方法
上記では、CurrentColorと入力することで、Typographyで選択された色が反映されるようになる
とお話ししました。
ということなので、ホバーされたときの色の変更も簡単に行うことができます。
SelectorからHoverを選択し、Typographyから色を指定します。
ホバー前の色を赤
ホバー後の色を紫
に設定してみます。
できました。
少し目がチカチカしますが、お許しください笑
まとめ
結論: SVG画像の色を変更するには、コードを調べてwebflowでカスタムコードを使用し、
カラーコードを入力する。CurrentColorと記述するのがオススメ。
簡単にTwitterアイコンの色を変更することができました。
webサイトを制作する時って、素材集めの方が大変だったりしますが
このように直接色の変更を行えばスムーズに、作業が捗ります。
webflowの使い方 他の実装方法について
他にもwebflowの使い方について記事をアップしています。
参考になるものがあればご覧下さい。
【webflowの使い方】ハンバーガーメニューをクリックした後の表示設定
【webflowの使い方】ハンバーガーメニューをクリックした後の表示設定 ｜ ぷりくろ.com
https://purikuro.com/2021/01/05/webflow_humberger/
過去に自分がハマった部分です。(２時間程考えました)。そして実装は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の使い方 第４弾 今回はカルーセルスライダーの実装方法を説明していきます。 webflow universityで実装方法を調べ実際に作ってみました。 備忘録として、そしてこれから実装する方のサポートになれ …
日本でwebflowを学べるオンラインスクール LikePay Academy
webflowは全部英語で、日本語の情報はあまりありませんが
日本でwebflowが学べるオンラインスクールで、LikePay Academyがあります。
オンラインスクール LikePay Academy
とてもオススメです。
LikePay Academyはロシア人のイーゴリさんがwebflowについて詳しく説明してくれています。
講座は、主に動画をみて学んでいくスタイルです。
学習プラン
PRO会員になると
・全学習コンテンツ見放題
・個別メンタリング
・PROコミュニティ
・定期的に開催されるイベントに無料参加
この個別メンタリングはかなり魅力的です。
webflowが学べるLikePay Academyはこちら
.webp)
.webp)
