【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

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

【WordPress】アイコンを利用できるプラグイン「WP SVG Icons」

WordPressの記事に無料でアイコンが使えるプラグインの「WP SVG Icons」を導入してみました。
SVG形式なのでCSSが適用できるのがまた嬉しいです。

まずは、プラグインを検索してインストールします。

wordpress svg icons plugin install

有効化すると、記事編集画面に「Add Icon」のアイコン挿入ボタンが現れますので、クリックします。

wordpress svg icons plugin add

そうすると、アイコンの挿入画面が出てきて、多数のアイコンを選べます。

wordpress svg icons plugin how-to

アイコンの選択後wrapを「h1, h2, h3, span, div, i, b」から選べますが、何もしなければ、デフォルトの「i」になります。その次に「Insert Icon」ボタンで挿入するか、Shortcodeを直接記事に貼り付けます。

[wp-svg-icons icon="wordpress" wrap="i"]

ブラウザで確認するとアイコンが表示されています。
⬇︎こちら


ソースコードを見てみると次のようなスタイルが適用されていましたので、font-siezやcolorを変えたい場合はここにCSSで指定すればいいですね。

ちなみに:beforeは、要素の直前に内容を挿入する擬似要素です。

さらに、わたしの場合はリンクにつけて、同時にホバーもさせて使いたかったので、次のようにaタグで囲いました。

文章とバランスを合わせるためにCSSで微調整しています。class=”icon_demo”はデフォルトのアイコンと分けるために付与しています。

これで⬇︎のようになりました。

WP SVG Icons Plugin

以上です!ありがとうございました!