WordPressの記事中にアイコンを挿入できるプラグイン「WP SVG Icons」

今回はWordPressの記事中にアイコンを挿入できるプラグイン「WP SVG Icons」についてご紹介していきます。
WordPressでひたすら記事を書いていると、文章だらけで単調になってしまいますよね。
そこで文章中にアクセントを付けるためにも、アイコンは是非とも使用したいところです。

「WP SVG Icons」では500個近くのアイコンを使うことができます。
下記のようなシンプルなアイコンを記事中に挿入することができます。

記事中にアイコンを挿入するプラグインはいくつかあるのですが、「WP SVG Icons」は使い方がとてもシンプルでわかりやすいので初心者の方にもオススメです☺️
またアイコンがSVG形式ですので、PCやスマホ、タブレットなど、どのデバイスでも綺麗に表示されます。
今回は「WP SVG Icons」の導入方法と基本的な使い方について解説していきます。

WP SVG Iconsのインストール方法

それではWP SVG Iconsのインストールを行なっていきます。

まずWordPressのダッシュボードを開きます。
左メニューの「プラグイン」→「新規追加」を選択します。
検索バーに「WP SVG Icons」と入力します。

複数のプラグインの表示されますが、上記画像のプラグインをインストールします。
右上の「今すぐインストール」を選択し、続けて「有効化」を選択します。

これで「WP SVG Icons」のインストールは完了です！

WP SVG Iconsの基本的な使い方

インストールが完了したら、実際に文章中にアイコンを挿入してみましょう！

①投稿のエディター画面を開きます。
「Add Icon」ボタンが追加されていますので、これを選択します。

②まず一番の下の一覧から、記事中に挿入するアイコンを選択します。
選択すると、右上にプレビューが表示されます。
次にアイコンの属性を選択します。画像では「i」を選択しています。
これでショートコードが作成されます。
最後に「Insert Icon」をクリックします。

③ショートコードがテキスト中に挿入されました。
これでアイコンの挿入は完了です。

念のため、ページプレビューでアイコンを確認してみましょう。

テキスト中にアイコンが挿入されているのを確認できましたね。

アイコンの大きさやカラーを変えてみる

WP SVG Iconsの良いところは、通常のテキストと同様に、簡単に色や大きさを変更できるところです。
初心者の方でも苦戦することなく編集できますよ☺️

アイコンの大きさを変える

ビジュアルエディターでの編集がわかりやすいので、こちらでご説明していきますね。

大きさを変更したいアイコンのタグを選択します。
文字の大きさを変更する時と同様に、フォントサイズを選択します。
下の画像では、アイコンの大きさを比較出来るように、12ptと24ptのアイコンを挿入しています。

プレビュー画面でアイコンを確認してみます。

バッチリアイコンの拡大ができていますね！
なお、アイコンのタグの後につけた文字も同じ様に編集ができますよ！

アイコンのカラーを変える

こちらも編集のわかりやすさからビジュアルエディターでご説明していきます。
アイコンの大きさの変更と同じでとても簡単です！

カラーを変更したいタグを選択します。
文字の色を変更する時と同様に、テキスト色の変更を行います。
下の画像では、アイコンの大きさと色を比較できるようにしています。
上のタグは12ptで色はそのまま、下のタグは24ptで青色を選択しています。

プレビュー画面でアイコンを確認してみます。

アイコンの色に加えて、後につけた文字の色も変更できていますね！
このように通常のテキストと同じように変更できるのは便利ですよね☺️

まとめ

いかがでしたか？
数あるプラグインの中でも「WP SVG Icons」は使い方がシンプルなので、初心者の方でもわかりやすいと思います！
アイコンを上手く活用して読みやすい記事を作成していきましょう！