tarouken.com

SWELLのスマホ固定フッターバーのアイコン変更

アフィリエイト広告(紹介リンク)を利用しています。

Icon Design

ページ内目次

WordPressテーマ「SWELL」について、以下の場合について対処した方法を記載します。

・固定フッターバーに表示するアイコンについて、SWELL標準のアイコン”以外”を指定したい

・でもFontawesom全体を読み込むと重くなりそうなので避けたい


【概要】追加CSSで、SVGコードを用いて上書きする。


SWELLの固定フッターバーのアイコンは、擬似要素beforeにCSSで「content:”●●●●”;」といった形で記載されています。

そのcontentの箇所を、追加CSSで上書きすればアイコンを指定できるのではないかと思って試した方法です。

PHPなしでの方法なので、HTML/CSSをメインでいじる方にとって手を出しやすいかと思います。


変更後のイメージ画像

swell icon1 1
swell icon2 1


主な手順

1.使いたいアイコンをSVGでダウンロード

2.SVG画像をCSSコードに変換

3.追加CSSにコードをコピペ



使いたいアイコンをSVGでダウンロード

まずはアイコンのSVGデータを用意します。

https://fontawesome.com/
fontawesome全体をダウンロードせず、一つずつダウンロードすれば軽量で済みます。

https://iconscout.com/
色を指定できるので、今回はこちらを使いました。種類も豊富で便利。


ここではダウンロードっぽいアイコンを使ってみます。

swell icon3
画面では水色ですが、右側にあるカラーパレットで白に変更して「SVG」をダウンロードしました。


SVG画像をCSSコードに変換

以下のサイトで、SVGファイルを画像でなくCSSなどで使える「base64」コードに変換します。

以下の手順で進めていきましょう。

先ほどダウンロードしたSVGファイルのコードをコピーします。

まずは、先ほどダウンロードしたSVGファイルを、VS CODEやメモ帳などのテキストエディターで開いてみてください。

swell icon4
テキストエディターで開いた時の画面


コードをコピーして、以下のサイトで貼り付けます。

https://blog.s0014.com/posts/2017-01-19-il-to-svg/


swell icon5

出力されたCSSコードを、一旦メモ帳などにコピペします。

こんな感じのコードが出力されます。

swell icon6


便利すぎる、、、サイトオーナーさんに感謝しつつ、コピーしましょう。

SWELLのアイコンのCSSセレクタに合わせて書き直す

SWELLの固定フッターバーのCSSセレクタを検証画面で確認します。

swell icon7


上の画面のCSSセレクタにあわせて、先ほどコピーしたCSSを直していくことになります。

具体的には以下のようになります。

.icon-download:before {
	content: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.a%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23fff%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%203px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Ctitle%3E1067_dl_h%3C%2Ftitle%3E%20%3Cg%3E%20%3Cg%3E%20%3Cline%20class%3D%22a%22%20x1%3D%2223.39%22%20y1%3D%2230.66%22%20x2%3D%2223.39%22%20y2%3D%2220.66%22%2F%3E%20%3Cpolyline%20class%3D%22a%22%20points%3D%2219.82%2026.82%2023.39%2030.54%2026.97%2026.82%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20class%3D%22a%22%20d%3D%22M34.35%2C36a8.22%2C8.22%2C0%2C0%2C0%2C0-16.44H32.81A11%2C11%2C0%2C0%2C0%2C11.3%2C23.15c0%2C.08%2C0%2C.16%2C0%2C.24A6.32%2C6.32%2C0%2C0%2C0%2C11.77%2C36Z%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
	width: 34px;
	margin-top: -9px;
}


「background-image:」を「content:」に変更していますね。

また、widthmarginも使うので先に入れておき、数値はあとで整えます。

ここまで来ればもう完成間近です。

追加CSSにコードをコピペ

外観・カスタマイズの追加CSSの欄に先ほどのコードをコピペします。

swell icon8

・widthを入れないと表示されませんのでご注意ください。

・高さをtopで指定して調整します。(ここでは、-9pxがちょうど良かったです)

※コードをコピペした後もプレビューが変化しませんが、「PC」→「SP」を行き来するとプレビューが更新されます。


これで完成です!



<補足>

・base64での画像置き換えは、SVGアイコンのような小さな画像だけに使うのが良いです。
・素材サイトによって、SVG画像のwidth・カラーなどを指定しないといけない場合があります。

コメントを残す

Share
検索
わがい

わがい

プログラミング(Web制作)・ライティングに携わっています。 いくつかの会社で勤めて、2020年にフリーランスになりました。 苦手なことを避けつつ、好きなことで働けるような環境作りをめざしてコツコツやってます。 HTML/CSS/JSのほか、WordPress制作、特にElementorやSnow Monkeyといったローコードを用いた短納期での制作が得意です。 また生活・健康の水準を高めるため、米国株投資や筋トレもやってます。

最近の記事

ページ内目次