文章を書いているときに、見出しや一部の箇所にアイコンを表示したい時ってありませんか。
複雑なコンテンツや専門的な内容の記事では、文章だけよりもアイコンがある方がポップになって、とっつきやすくなったりもします。
というわけで、今回はWordPressの記事内にアイコンを簡単に表示可能なプラグイン「WP SVG Icons」をご紹介いたします。また単なるアイコンフォントではなく、SVG形式のアイコンとして表示できるのがポイントです。
SVGについては、下記の記事を参考にご覧ください。
Web上に存在する画像は、すべてビットマップ形式とベクター形式の画像のどちらかに分類されます。写真を含む、イラストや図形などもすべてこのどちらかに分類されます。 さらにビットマップ形式の中には、大きく分けてJPEG、PNG、GIFのファイル形式が存在し、それぞれ一長一短の特徴があります。 ...
目次
「WP SVG Icons」とは
490以上のSVGアイコンを簡単な操作でWordPressに挿入できるプラグインです。ビジュアルエディターを使用すれば、通常のテキストを編集する感覚で簡単にサイズや色の変更ができます。
また、900種類以上のアイコンが無料で使えるGoogle提供のアイコン素材も便利です。SVG形式や、PNG形式でダウンロードも可能です。ご興味のある方はこちらもご覧ください。
Googleマテリアルアイコンとは、Googleが提供しているアイコンです。多くのサイトやアプリなどでも利用されており、もちろんWordPressサイトでも活用できます。商用利用可能な上、約900種類以上のアイコンを無料で利用可能です。 今回はそんなGoogleマテリアルアイコンを、WordP...
「WP SVG Icons」のインストール
WordPressの管理画面から、新規追加をクリックして、「WP SVG Icons」と検索するか、下記ボタンよりダウンロードできます。
「WP SVG Icons」の基本的な使い方
インストールして有効化すると下記画像のように投稿画面に「Add Icon」のボタンが表示されます。使い方は、簡単な以下の3ステップです。
- 使用したいアイコンを選ぶ
- アイコンの属性を選ぶ
- ショートコードを埋め込む
こちらをクリックすると下記画面が表示されるので、
この中から使用したいアイコンを選択し（右上にプレビューが表示されます）、アイコンの属性を選びます。すると青枠のショートコードが生成されますので「Insert Icon」をクリックして本文に貼り付けるだけです。
それでは、プレビュー画面を見てみましょう。アイコンが表示されているはずです。簡単ですね。
カラーやサイズを変更する
初心者の方は、ビジュアルエディターで編集した方が直感的に操作できて簡単かもしれません。先ほど埋め込んだショートコードを選択した状態で、通常のテキストと同様にサイズや、カラーを編集してみてください。サイト上でも簡単にデザインが変更されます。
もちろんテキストエディターを用いて変更することも可能です。例えば、下記のようにstyle属性を用いてカラーやサイズを指定しアイコンに反映させることもできます。
<span style=”color:red; font-size:30pt;”>[wp-svg-icons icon=”home” wrap=”span”]</span>
アイコンにリンクをつける
またアイコンの種類によっては、他のページへ導く意味も含めてリンクをつけたい場合もあるでしょう。そのような場合は下記の様にショートコード内にlinkのパラメーターを追加し、任意のURLを記述することで反映されます。
ただ、その他のスタイル（カラーやフォントサイズ）を適用させながら併用することはできないので、下記の様にaタグ自体にスタイルを指定しましょう。
<a style=”color:red; font-size:30pt;” href=”https://tcd-theme.com/tcd073″>[wp-svg-icons icon=”home” wrap=”span”]</a>
これでアイコンをデザインしつつ、クリックされたときリンク先に飛ばすことも可能です。
例の様な家のアイコンにサイトのトップページへ戻るリンクをつけるなど、見せたいページを連想させるようなアイコンをチョイスすることでユーザーからの印象も変わるでしょう。文字で「トップページへ戻る」と表示されているより、視覚的にもスマートですしね。
オリジナルのアイコンをインポートする
「WP SVG Icons」では、元々用意されているアイコンだけでなく、IcomoonからSVG形式のアイコンをインポートして活用することができます。ダッシュボードの設定の下にある下記箇所から可能です。（無料版で利用できるのは10個までです）
動画解説
本プラグインの動画解説も用意しております。こちらからご視聴ください。
まとめ
アイコンを設置した記事は、文章だけで作成された記事よりも視覚的に見やすい印象を持たれると思います。地味さを取り除き、見やすい、読んでみたいという印象を与えることは記事としての価値を高めることに繋がります。アイコンにリンクをつけてページへの導線をつくることも文章で誘導する場合とはまた異なる印象を与えるはずです。
また、WEB上の記事は一言一句読み込まれるというよりも、流し読みされる傾向にあります。ですので、パッと見て直感的に何を表現しているのかを理解しやすいアイコンを用いることは、ユーザーにとってもわかりやすいだけでなく、サイト運営者側にとっても閲覧されている記事から離脱されにくくなるというメリットもあるのです。
SVG形式ですので、どのデバイスでも美しく表示され、拡大されてもその画質が劣化しないことも特長のひとつです。コンテンツ内でアイコンを使って感覚的な表現がしたい方は、ぜひ導入を検討してみてはいかがでしょうか。
通常の画像（JPGやPNG）をSVGに簡単に変換できるツールもあります。よろしければご覧ください。
JPGやPNGなどの画像ファイルをWeb上で使うと、拡大時やデバイスサイズによってはぼやけてしまう。 そんな問題を解決するのが、SVGなどの「ベクター画像」とよばれるもの。ロゴやアイコンに利用されることが多い画像フォーマットです。SVG画像を作成するには、Adobe Illustratorなど...
