【WordPress】サイトのロゴをSVG画像にする

SVGとは

SVG(Scalable Vector Graphics)は、ベクター画像のため、JPEGやPNGなどと比べ、高画像で軽量、またCSSでsizeやcolorの変更などができます。進化し続ける高解像度なスマートフォンや、Retinaディスプレイなどへの対応には、SVGが必須と言えます。

WordPressでSVGのアップロード

WordPressはデフォルトでSVGファイルのサポートを行なっておりませんので、SVG画像のアップロードができません。それを許可するためには、子テーマ内のfunctions.phpへ、以下の記述を追加します。

functions.php

これでSVGファイルが許可されたファイル形式となり、アップロードが可能になります。

SVG画像の設置

通常、WordPressのサイトタイトルはheader.php内にあり、以下の部分が該当するかと思います。aタグの間にある< ?php bloginfo( 'name' ); ? >でサイト名が表示されます。

header.php

SVG画像をimgタグで表示する場合は、アップロードした画像のパスを以下のように記述します。

header.php

あとはcssでwidthなどを指定します。

css

これでも十分ロゴとして使えますが、色や、線幅を変えたくなったら、その度に画像を差し替えなければいけません。そういったことをcssでできるようにするには、SVGコードで表示させます。

SVGコードの取得

Illustratorで作成した時の場合ですが、 メニューの【ファイル > 書き出し > 書き出し形式… > 「ファイル形式: SVG(svg)」を選択 > 書き出し > コードを表示 】 で、txtファイルなどで表示されたSVGコードをコピーします。

illustrator svg txt

コピーしたSVGコードを、aタグの間に設置します。そのまま貼り付けても、問題ありませんが、コード量が多くなりますので、不要な記述は削除してもかまいません。

header.php

これでSVG画像が表示されたかと思います。

CSSの指定

色やサイズはCSSで指定します。SVGに使えるCSSのプロパティです。なお、fillやstrokeなどSVG独自のプロバティがあります。

ロゴをhoverさせる場合は、以下のように、指定すればOKです。

css

以上です!ご覧いただき、ありがとうございました!😌


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp