只今、PHPを学習しております

SANGOのメニューを自作SVGアイコンで模様替え

こんにちは、トッドです。

FontAwesomeに飽きました。

ということでSVGアイコンを使っちゃいましょう。

完成デモは、スマートフォンで観覧されている方であれば画面下の方にあるモバイルフッターメニューのような見栄えに仕上がります。

アイコンの色は素材の作成段階で決め込んでもらわないといけない仕様になっているのでsorry。

今回はこちら↓のSVG形式の素材を使って、実装までの流れを紹介したいと思います。

SVG素材の作成についてですが、SVG形式で出力することができるツールであれば何でも良いです。個人的にはFigmaというブラウザ上で利用することができるベクターツールがオススメです。直感的な操作で利用することができてプラグインも豊富にあるので重宝しています。

SVG素材はアウトライン化をしておくのは必須です。

標準のWordPressではSVG形式のファイルをアップロードすることが出来ないので今回はプラグインを使用してその制約から開放されましょう。

Safe SVGというプラグインです。似たようなやつが近くにあると思いますが有効化するだけで特に設定とかはないのでどちらを利用しても構わないです。

それではまずは、以下のCSSコードをsangoの子テーマのstyle sheetにコピペしてください。

CSS
/*モバイルフッターメニューアイコン設定*/
.fixed-menu ul li img {
  display: block;
  width: 30px;
 height: 30px;
 margin: 0 auto;
}

これで良い感じに表示する手筈は整いました。

そうしました、作成したSVG素材をメディアにアップロードし、最終的にimgタグで挿入することになるので以下の感じになるように素材のimgソースを並べておきましょう。↓

こうすると作業がスムーズに行えますよ。

そして最後にモバイルのフッターメニューで利用する場合は、FontAwesomeのアイコンを付与するときと同じような要領でさっきのimgタグを以下のように、コピペしてもらうと反映されます。↓

簡単ですよね。

こんな感じでSVGアイコンは実装することができるので他の装飾箇所でも応用が出来そうですね。

コメントを残す

メールアドレスが公開されることはありません。