【WordPress】プラグインで解決！WordPressでSVG画像を使う方法

ブログのタイトルロゴやイラストに最適なSVG画像ですが、WordPressにデフォルトでサポートされていません。

そのまま使おうとすると「セキュリティの理由によりこのファイル形式は許可されていません」と警告文が表示され画像を使うことができません・・・

でも安心してください。

SVG画像はプラグインをインストールするだけで簡単に使うことができるようになります。

タイトルロゴにSVGが最適な理由はこちらの記事を参照ください。

セキュリティーアップデートによりサポートされなくなったことが原因

どうやらWordPress4.7からセキュリティの観点からSVGをサポートしなくなったみたいです。

どうにかしてSVGを使いたいと思い調べてみたところ、WordPressでSVG画像を使う方法は以下の２つをみつけました。

1つ目の「wp-config.php」の場合ですとコードを触らなければならず、初心者にはハードルが高いかと思います。

なので誰でも簡単にできる2つ目の「プラグインをインストール」する方法をオススメします。

SVGに対応させるためのプラグインは数多くありますが、以下の2つが利用者も多く使いやすいのではないでしょうか。

どちらでも大丈夫ですが、僕はインストール数の多さと評価の高さから「SVG Support」を選択しました。

SVGに対応させるためのプラグイン「SVG Support」の使いかたを説明します。

WordPressの左にある「プラグイン」を選択し「新規追加」を選択します。

検索欄にキーワード「SVG」と入力して一覧を表示させます。

今回は「SVG Support」を選択し「インストール」します。

そして「有効化」することでプラグインが使えるようにしてください。

続いてSVGのアップロード方法についてです。

僕はWordPressのテーマとして「Cocoon」を使用しています。

ここでは「Cocoon」の設定画面で説明していますので実際の画面とは異なることをご留意ください。

まず初めに「Cocoon設定」を選択してCocoonの設定画面を開きます。

設定の一覧の中からSVG画像を挿入したいロゴ画像の選択できる「ヘッダー」タブを選択します。

あとはヘッダーロゴ欄選択をにある「選択」から使いたいSVG画像を選択するだけです。

今までは、注意が表示されてエラーになったかと思いますが、プラグインをインストールしたことにより無事にSVG画像を挿入することができたかと思います。

今回はプラグインを利用したSVG画像のアップロードの仕方について説明しました。

プラグインをインストールするだけで簡単にSVG画像を使うことができるようになります。

SVGを使いたいけど、エラーとなってしまい使えなくて悩んでいた方の参考になれば幸いです。

ぜひ、みなさんもアニメーション等の遊び心を加えられるSVG画像をブログのタイトルロゴに使用してはいかがでしょうか。