【WordPress】SVG画像をロゴや記事内画像に使用し、ボヤけない一体感のあるページを目指そう

この記事を読むのに必要な時間は約 6 分です。

Author

トッド(Todd)

WordPressで記事内に挿入する画像形式といえば、PNG・JPEGがほとんどですよね。特に、PNG画像を「より鮮明なモノにしよう」と、すると画像のサイズを大きめに作り、後からCSSでサイズ調整をする。

というような手間のかかる問題があったり、画像のファイルサイズが大きくなることで、表示速度にも何かしら影響を及ぼすことも無くはありません。

こんなことを考えないといけない理由は「ボヤける」からです。

画像を伸縮させてもボヤけない＋画像のファイルサイズが小さい

そんな良いとこ取りできるのがSVG画像です。

下の画像は、簡単にPNG画像とSVG画像を比較したものです。

中央上部にあるシンボルは一見キレイに表示されているように見えると思います。

しかし、アップにすると(画面左側)PNG画像の方はボヤけ、(画面右側)SVG画像はどれでけ伸縮させてもボヤけません。

What Content?

WordPressでSVG画像

WordPressでは、SVG形式の画像アップロードが出来ない問題をプラグインで解決し、
実際どのような場面で使用しているのか？について、僕のブログを例に書いていきたいと思います。

冒頭でも言いましたが、WordpressではSVG画像をアップロードすることはできません。

だから、「Safe SVG」というプラグインをインストールしてSVG画像がアップロードできるようにします。

Safe SVG

インストールの方法は、Wordpress管理画面からプラグイン→新規追加へ。そこにある検索バーに「Save SVG」と入力すればこのプラグインが出てきます。

あとはインストール→有効化を選択すれば完了です。

設定などはなく、有効化するだけでPNG・JPEG形式と同じ方法で画像がアップロードできるようになります。

このブログでは計3か所に、SVG画像を用いています。

1.トップページにはアニメーションを付属したSVG画像を使用しています。

2.カテゴリーページのシンボルイメージにSVG画像を使用しています。

3.ブログのロゴにSVG画像を使用しています。

関連記事

こちらの記事では、SVG画像で簡単なアニメーションが作成できる方法について書きました。良ければ参考にしてくださいね。

【WordPress】SVG画像をアップロードしてタイムラプスアニメーションが出来上がるまで