ブログ初心者は初めてのことばかりでわからないことだらけ。
ネットを調べて、本を読んでは設定方法、対策方法を確認しながらの日々。
ふと、思いました。
困ったことや、悩んだことを記事として書いておこうと。
あとで、またわからなくなった時に、調べなおさなくてよいように。
また、同じようなブログ初心者の一助となるように。
ということで、WordPressを利用した、ブログ運用について悩んだことなどをメモとして残しておきたいと思います。
本日は、画像フォーマットの悩み。
初心者には聞きなれない「SVG」フォーマットについて。
はじめに
WordPressなどの公式ロゴを使用したいと思い検索。
あれ、フォーマットが「svg」っていうのがあるけど何？
「jpg」「png」ではない、なにこれ？
ここからが、私の調査の始まりです。
本日は、この悩みをすっきりと解決したいと思います。
「SVG」フォーマットとは
ビットマップ画像
画像を扱う方法にはいくつかありますが、大きく分けると「ビットマップ画像」と「ベクター画像」の2つに分けられます。
「ビットマップ」画像は、いわゆる「jpg」や「png」などの画像のことです。
画像を拡大すると、画像が荒くなってしまいます。
だからと言って、解像度を上げるために画素数を増やすと容量がおおきくなってしまいます。
ベクター画像
ベクター画像は画像を計算式で表現します。
そのため、画像を拡大縮小しても都度描画する仕組みとなっています。
ただし、写真のような複雑なものは計算が膨大になるので不向きです。
「svg」画像は、このベクター画像の仕組みのフォーマットです。
簡単に言えば、拡大縮小ができる画像といったところでしょうか。
※SVG「Scalable Vector Graphics」の略称
「SVG」フォーマット
メリット
- 色々な解像度の画像を用意する必要がない。
- データファイルであるため、色やサイズが後から変更可能。
- 専用ソフトが不要で、CSS上で変更可能。
- アニメーションなども扱える。
デメリット
- 写真のような複雑な計算が必要なものには不向き。
WordPressでの使い方
WordPressへそのまま、「SVG」ファイルをアップロードしようとしてもできません。
不明なファイルフォーマットのため「セキュリティー上問題があります」というエラーが出て怒られます・・・。
対策
プラグイン使用
「Scalable Vector Graphics (SVG)」を使用することで対応可能です。
こちらは、フラグインをダウンロードして「有効化」すれば使えますので説明は割愛します。
プラグインを使わない
人によっては、プラグインを増やしたくないという人もいるかと。
私もその一人です。
プラグインを増やしすぎると「PageSpeed Insights」で点数が悪化する傾向にあるように感じます。
そこで「function.php」にちょこっと追加します。
「functions.php」はWrodPressでアップロードできるファイルが記載されています。
このファイルに「SVG」フォーマットがアップロードできるように追加します。
ファイルの最後に下記を追加します。
$mimes[‘svg’] = ‘image/svg+xml’;
return $mimes;
}
add_filter(‘upload_mimes’, ‘cc_mime_types’);
アップロード画像
WordPressの日本公式キャラクターをアップロードしてみました。
「SVG」形式のフォーマットの画像です。
いかがでしょうか？
拡大しても、画像が荒くならないのがわかるでしょうか？
ライセンスについて日本公式キャラクター「わぷー」は、WordPress ソフトウェアと同様、「GPL バージョン2 またはそれ以降のバージョン」というライセンスのもとに公開されています。著作権は作者のカネウチカズコさんに属します。
プラグイン、テーマなどの中で改変・編集を加えて自由に使うことができます。ただし、そういったものを配布する場合には上記と同様のライセンスを選択する必要があります。
アバターアイコン、ブログ内での使用なども自由です。
日本公式キャラクター「わぷー」
「わぷー（Wapuu）」は、ja.wordpress.org の公式キャラクターです。
まとめ
「SVG」フォーマットの画像いかがだったでしょうか？
「JPG」「PNG」とあわせて「SVG」フォーマットの画像もぜひ使ってみてください。
初めてHTML&CSS、PHPを学ぶ人におすすめの本を紹介しておきます。
読みやすく、初心者は手元に置いておいて損はない一冊だと思います。
千貫 りこ 著 (著), ロクナナワークショップ 監修 (著)
![デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]](https://m.media-amazon.com/images/I/511iJWNit0L._SL160_.jpg)
水野 史土 (著)
![WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第2版]](https://m.media-amazon.com/images/I/51h5DspPJdL._SL160_.jpg)
コメント