【WordPress】管理画面からSVGファイルをアップロードできるようにするプラグイン「Safe SVG」

【WordPress】管理画面からSVGファイルをアップロードできるようにするプラグイン「Safe SVG」

WordPressではSVGファイルをアップロードしようとすると「セキュリティ上の理由によりこのファイル形式は許可されていません。」と表示され、ファイルのアップロードが中止されます。

イラストやアイコンなどはRetinaディスプレイなどの高解像度な画面でもキレイに表示されるので「SVGファイルをアップロードして使いたい」という場面が増えていると思います。

そんな時に活躍する「Safe SVG」というプラグインを紹介します。

WordPressではSVGファイルがアップロードできない

「セキュリティ上の理由によりこのファイル形式は許可されていません。」が表示される

WordPressでは特にカスタマイズをしていなければメディアのアップロードからSVGファイルのアップロードができないようになっています。

SVGファイルをアップロードしようとすると「セキュリティ上の理由によりこのファイル形式は許可されていません。」と赤いアラートが表示されてしまいます…

SVGファイルをアップロードできるようにするプラグイン「Safe SVG」

SVGファイルをアップロードできるようにするプラグイン「Safe SVG」

「Safe SVG」というプラグインを使うことで管理画面からSVGファイルをアップロードしてメディアの選択から画像として使うことができます。

「Safe SVG」は公式プラグインとして登録されているので、管理画面から検索&インストールすることができます。
プラグインのインストール方法についてはこちらを参考にしてください▼

SVGファイルがアップロードできるようになった

特別な設定などはなく、プラグインを有効化すればSVGファイルをアップロードできるようになります。

SVGファイルが大きく表示される時は表示サイズを設定しよう

SVGファイルをアップロードできるようにはなりましたが、画像ブロックで投稿本文に追加する場合に気をつけたい部分があります。

想像以上に画像が大きく表示される…

SVGファイルを画像ブロックで追加した状態

上の画像は画像ブロックでSVGファイルを追加した状態です。

サイズの設定が「サムネイル」、幅・高さ共に150になっていますが…

表示はもっと大きくなった

実際の表示は150pxではなく、もっと大きなサイズになってしまいました…

どんなテーマ、どんなSVGファイルでもこのように多く表示されてしまうのかまでは未検証ですが、もし思っていたより大きくなった・小さくなった場合は表示サイズの設定をしましょう。

画像の表示サイズを設定

表示サイズの%を設定

サイズ調整の簡単な方法としては、「画像の寸法」設定の25%〜100%のボタンをクリックして、サイズを変更します。

それぞれボタンをクリックすると、すぐ上の「幅」「高さ」の数値も変化するので、プレビューを見ながらいい感じのサイズに設定します。

幅・高さにカスタムの数値も入れられる

より細かいサイズの指定をしたい場合は「幅」「高さ」に直接数値を入力します。

サイズの調整完了

無事サイズの調整ができました!

まとめ

今回、例でつかったSVGファイルは「ICON BOX」さんを利用させていただきました!

個人利用・商用利用OKで、たくさんアイコンが公開されているので今後もブログのアイキャッチなどで利用させていただこうかなと思っています。

ちなみに、プラグインを使わなくてもカスタムHTMLブロックにsvgのコード突っ込むという手もありますが、それはできる人の話になるので今回は割愛しますね。

ではまた。

WordPressカスタマイズ入門に最適な書籍を執筆しました!

WordPress 5.x 対応!Gutenbergを使った投稿の作成方法からWordPressブログをかっこよくカスタマイズするためのポイントを紹介した書籍を執筆しました!

詳しく見る