WP SVG Iconsでワードプレス記事内にアイコンを追加する方法！色や大きさも変更可能

ブログのテーマによっては、テーマのカスタマイズだけではちょっと寂しい印象になったり、記事をもっとカスタマイズしたいと思う人も多いですよね。

みたいな方の場合には、WP SVG Iconsというプラグインの使用がおすすめです！

プラグインをインストールするだけで簡単に使用できるので、CSSをいじれなくても手軽に取り入れることができますよ。

今回の記事では、そんなWP SVG Iconsの設定方法や使い方について解説していきます！

2020年10月時点ではブロックエディタでの使用はできませんでした。
ブロックエディターを使用している場合は、クラシックエディターに変更してから使用してください。

WP SVG Iconsの設定方法

WP SVG Iconsのインストール

プラグインの新規追加から、WP SVG Iconsをインストールして有効化してください。

アイコンを挿入する方法

プラグインをインストールしたら、特に設定などは必要なく、すぐに投稿画面から使用することができます！

アイコンの色を変更する方法

ビジュアルエディターに挿入したアイコンのタグを選択して、選択した状態でカラーを変更します。

色が変わると、このようにカラーが変更された状態でタグが表示されます↓

プレビューから確認すると、このようにアイコンのカラーも変更された状態になっています↓

アイコンの大きさを変更する方法

アイコンの大きさを変更する時も、基本的には文字の大きさを変更する時と同じです。

アイコンタグを選択した状態で、文字の大きさを変更します。

このように、アイコンタグの大きさが大きくなっています↓

プレビューで確認してみると、このようにアイコンが大きく表示されています（上は通常のアイコンの大きさ）

アイコンにリンクを設定する方法

アイコンのタグを選択した状態で、リンクを挿入します。

通常通りリンクを挿入すると、このようにリンクが挿入された状態になります↓

プレビューで確認してみると、このようにリンクが挿入されています↓

アイコンが表示されない原因

1.タグの一部が消えている

タグの一部が消えた状態になっていると、アイコンが正しく表示されません。

しっかりと最後まで[]で囲まれている状態になっているか確認してください。

2.タグの一部がカラー変更やリンク挿入されていない状態になっている

タグをカラー変更やリンクを挿入した場合は、より注意が必要です。

タグを編集した場合、色を変えるコードなどが正常に入れられていない可能性があります。

例えば、アイコンタグを全部選択し切れていない状態でカラータグを設定した場合↓

テキストエディターで確認すると、このようにタグが正常に挿入されていないのがわかります↓

3.ワードプレス側の問題

アイコンの挿入時に特に問題がない場合は、ワードプレス側に問題があるケースもあります。

ワードプレスのバージョンが古い場合や、バージョンによって相性が悪いことがあるので、バージョンを更新する・戻すなどの措置をとってみてください。

ワードプレスを更新する場合は必ずバックアップを取ってから行ってください！

バックアップの取り方については、こちらの記事で解説しているので参考にしてみてくださいね↓

4.テーマとプラグインの相性問題

最後に考えられるのは、テーマとプラグインの相性の問題です。

テーマによっては、一部のプラグインと相性が悪い場合があります。

まとめ

今回の記事では、ワードプレスでアイコンを簡単に使用できるWP SVG Iconsの使い方について解説しました！

CSSをいじらなくても、簡単にアイコンを使用することができるので、非常におすすめのプラグインです。