「WordPressでSVG形式の画像を使いたい!!」
と思ったことはありませんか?
悲しいことに、WordPressはデフォルトではSVG形式のファイルを使用することができません。
ファイルをアップロードすると、エラーが発生します。。。( ´;ω;` )
でも、SVG形式のファイルが使えた方が、メリットが大きい(表現の幅が広がる、画像が劣化しない etc)ので、是非とも使いたい。
そんなわけで、なんとか使える方法はないだろうか・・・と調べた結果、SVG形式のファイルをWordPressでも使用可能にするプラグインを発見しました!
このプラグインのおかげで、当ブログのタイトルロゴがめでたくSVGになりました。画質は美しいし、アニメーションも問題なく動作しています!(ノ*>∀<)ノバンザーイ
そんなわけで、今回はWordPressでSVGを有効化するプラグインの使い方をご紹介したいと思います!
動作確認として、当ブログのタイトルロゴ(SVG画像)を設定したときの手順も載せておきますので、具体的な利用シーンのイメージも沸くと思います╰(*´︶`*)╯
SPONSORED LINK
プラグインを使って、WordPressでSVGを有効化する
早速ですが、プラグインを使って、WordPressでSVGを有効化しましょう。
SVG Supportというプラグインがありますので、それをインストールしてWordPressでSVG形式のファイルをアップロードできるようにします。
(1) SVG Supportを入手する
まず、WordPressのダッシュボード画面から、プラグイン、新規追加と順番に選択します。
検索窓で「svg」と入力し、検索をします。
検索すると、一番はじめに「SVG Support」がでてきます。この画像が目印!
(2) SVG Supportをインストールする
早速「今すぐインストール」し、「有効化」しましょう。(※念のためですが、プラグインをインストールする前に、サイトのデータのバックアップをとっておいてくださいね。)
実はたったこれだけ。笑
インストールして有効化するだけ。特にプラグインの設定をすることもなく、WordPressでSVG画像が使用できるようになっています。
SPONSORED LINK
SVG Supportの動作確認
SVG Supportを有効化できたので、実際にSVG形式のファイルをアップロードし、サイト上で動作するか、確認してみましょう。
今回用意したSVG形式のタイトルロゴ画像は、アニメーションが入っているので、期待通りの動作をするかどうか、結果が明白にわかります。
(1) SVG画像をアップロードする
メディアからSVG画像をアップロードしてみます。
特にエラーなど発生せず、下記のようにメディア一覧に表示されました。成功です!(*´꒳`*)
(2) SVG画像をタイトルロゴに設定する
SVGの画像がアップロードできることを確認できたので、次は画像をブログのタイトルに設定して画質やアニメーションの動作を確認します。
まずは、WordPressのダッシュボードの「外観」から「カスタマイズ」を選択します。
次に「サイト基本設定・ロゴ画像」を選択します。
「ロゴ画像をアップロード」というところがあるので、先ほどWordPressにアップロードしたSVG画像を「画像を選択」から選択します。
無事に、SVG画像がタイトルロゴに設定できました。
(カスタマイズ画面の上部の「公開」ボタンを押すのを忘れずに!)
ブログのホーム画面でタイトルロゴをみると、画質がクリアで、アニメーションも問題なく動作していることが確認できました。成功です!(*´꒳`*)
SPONSORED LINK
おわりに:WordPressで楽しいSVGライフを!
思ったより呆気なく、WordPressでSVGが有効化できて安心しました。
これでSVGファイル使い放題ですね( ̄∀ ̄)ニヤリ
この記事を参考に、SVG形式の美しい画像を使って、訪れた方が少しでも快適になるようなWebサイト作りをしていただけたら嬉しいです。
それでは、今日も素敵な一日を!
fummy