【WordPress】SVG形式でタイトルロゴを設定する方法

どうも、です。

これまでブログタイトルはテキストにしていましたが、今回タイトルロゴを作成しましたので試しにSVG書き出しで表示してみました。

SVGは、ベクター画像をそのままHTMLで表示できるものだと思っていただければ良いかと思います。

SVGで表示したデータは、後々のコード上でのサイズ変更やスマホの拡大縮小で荒くなりません。

タイトルロゴをSVG形式で書き出し

イラストレーターで作成したロゴデータをSVG形式で書き出して表示させます。

まず、イラストレーターでロゴデータを作成します。

（※IllustratorCCで作業しています）

こんな感じ。

怪獣的なアイコンとOKIRAKUの文字をシンプルに配置しました。

テキストを使用してロゴを作成している場合は「アウトライン」を必ず行ってください。

「アウトラインを作成」は、書式タブの中にあります。一括でアウトラインをかけると安全でしょう。

アートボードとロゴデータの余白を無くします。

「オブジェクト」タブから「オブジェクト全体に合わせる」でキュッとなります。

ここまで来るとデータの準備は完了です。

次は、SVG形式で書き出しを行います。

ファイルから「別名で保存」を行います。

ファイル形式を「SVG（svg）」にします。

保存を押すと、「SVGオプション」が出てきます。

「Illustratorの編集を保持」にチェックが入っていたら、チェックを外しましょう。

チェックが入っているとデータを重たくなってしまいます。

また、注意点としてIllustratorでの編集ができなくなりますので、aiデータはアウトラインをかける前の物を別で保存をしましょう。

以上、確認が終了したら、SVGデータをパソコン内部に保存しましょう。

作成した「SVGデータ（○○.svg）」をアップロードします。

SVGデータは、アップロードするだけで構いません。

準備は整いました。あとは表示したいところにデータをいつもの画像の要領で貼り付けるだけです。

ワードプレスなら、「メディアを追加」やカスタマイズの「タイトルロゴ設定」項目があると思いますのでそちらでアップしたデータをお選びください。

サイズや位置がズレる可能性がありますが、個別に対応してください。大きさは、コードにwidth、heightを追加で設定できます。

見本で以下に掲載しますね。

SVGで書き出したロゴデータ

PNGで書き出したロゴデータ

二つで見比べてどうですか？SVGは拡大しても荒くなりませんよね。

pngデータをSVG形式で書き出して表示してみました。思っていたより簡単でした。