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

ブログ
スポンサーリンク

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

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

でも安心してください。

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

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

>>【WordPress】ブログのロゴにはSVG形式の画像がオススメ!

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

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

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

  • wp-config.php の編集
  • プラグインをインストール

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

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

プラグインを使うことでSVGをアップロード可能

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

  • Safe SVG
  • SVG Support

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

プラグイン「SVG Support」の使い方

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

プラグインのインストール

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

image-20200109232055496

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

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

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

image-20200109204956708

SVG画像のアップロード

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

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

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

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

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

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

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

image-20200109233607135

まとめ

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

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

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

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

コメント

タイトルとURLをコピーしました