アイキャッチ

こんにちは。フローラです。
前回私の記事でSVGアニメーションについてご紹介しました。
参考記事:
SVGファイルを使って簡単にアニメーションを作ってみましょう
WordPressは初期状態ではSVGファイルをアップロードできません。
SVGファイルをアップロード、表示させるには、functions.phpにSVGファイルの記述を追加しなくてはなりませんが、プラグインで簡単に取り扱えるようになりますので、早速設定してみましょう。

プラグインをインストールする

プラグインをインストールする方法については下記記事をご参照ください。
参考記事:
WordPressで簡単に便利な機能を盛り込みたい!
では「Scalable Vector Graphics」を検索してインストール、有効化してください。
WordPressでSVGファイルを簡単にアップロードする方法

.htaccessにコードを追加する

.htaccessはサーバの設定によりますが、ドキュメントが置いてあるトップのディレクトリにあることが一般的です。
.htaccessに下記コードを追加して保存してください。

AddType image/svg+xml .svg
AddType image/svg+xml .svgz

メディアを追加する

早速「メディアを追加」してみると、SVGファイルが表示されましたね。
WordPressでSVGファイルを簡単にアップロードする方法

なお、float指定している要素にwidthが指定されてないと表示されませんのでご注意ください。
また、SVGファイルに書き出しをする際、画像の場所は「リンク」ではなく「埋め込み」にしてください。CSSプロパティは「スタイル属性にすると画像サイズが重くなります。「プレゼンテーション属性」で良いかと思います。
WordPressでSVGファイルを簡単にアップロードする方法

最後に・・・

SVGファイルもJPGやPNGのようにアップロードできるようになりましたね。
前回の記事でもご紹介しましたが、簡単にアニメーションも付けられますので是非使ってみてください。
ちなみに今回の記事の画像ファイルもSVGファイルですよ!

投稿者プロフィール

フローラ
フローラ
久しぶりにWEB制作の仕事に戻りました。
WEB制作に関する新しい情報をたくさん掲載し、自分自身もスキルアップをしていきたいと思っています!