ワードプレスプラグイン「WP SVG Icons」でデコメの絵のようなアイコンフォントを作ろう！

どうも、KANTAです。

今回はデコメの絵のようにアイコンフォントを
簡単に作ることができるプラグインについて
お話をしたいと思います。

カラケーのアイコンのように
視覚的に表現が分かりやすくするプラグインは、
「WP SVG Icons」です。

「WP SVG Icons」は、
記事編集のときに画像やアイコンがない文字だけだと、
地味になるだけではなく、分かり辛いときもあると思います。

昔、カラケーでアイコンを付けながら
メールをしていたときと同じように
アイコンを付けながら記事を書きたい人は、
あると便利なプラグインと言えます。

カラケーのようにアイコンを付けてメールしていたのと同じように記事編集ができるプラグインのインストールと利用方法

まず、管理ページのプラグインから新規追加します。

プラグインの検索から
「WP SVG Icons」で検索して
「WP SVG Icons」を選択。

「今すぐインストール」→
「プラグインを有効化する」でインストール完了

記事編集画面へ

投稿か固定ページから記事編集へ移動して
「Add Icon」と書かれているアイコンが
出ているかどうかを確認しましょう。

確認したらそのアイコンをクリックします。

アイコン挿入画面へ

開くとこんな感じになります。

その中から旗を選びたいと思います。

選んたら、h1,h2,h3,span,div,i,bのどれかを選択して
「Insert Icon」を押します。

するとこうなります。↓

手動でコードを入力してアイコンの色とサイズ変更してみよう！

更にサイズと色を変更したいときは、
コードを入力する必要があります。

例としてアイコンの色とサイズを変更します。

手動であるコードを入力するとこんな感じになります。

やり方は、このコード表から参考してください。

・青旗のコード

<span style="color: #0000ff; font-size: 100px;">
[wp-svg-icons icon="flag" wrap="i"]
</span>

・黄旗のコード

<span style="color: #ff9900; font-size: 50px;">
[wp-svg-icons icon="flag" wrap="i"]
</span>

・赤旗のコード

<span style="color: #ff0000; font-size: 25px;">
[wp-svg-icons icon="flag" wrap="i"]
</span>

※span,i,b以外は変更できませんので注意して下さい。
※wrap=”◯”
「WP SVG Icons」を有効化していないと
コード入力してもアイコンが出てこなくなるので注意して下さい。

サイズのほうは、
◯pxの部分に数値を入力すれば、
設定完了です。

色のほうは、三原色の頭文字である
赤 (Red)、緑 (Green)、青 (Blue) の三つの原色から
それぞれの色の数値で色を決めてカラーコード変換します。

カラーコードの設定方法へ

まず、カラーコード変換ツールへ移動します。

・カラーコード変換ツール

移動したらRGBのそれぞれの数値を入力して
「変換する」をクリックしてカラーコードを確認します。

更に細かい色にこだわりたい方はこちらへ

・RGBと16進数カラーコードの相互変換ツール

・WEBカラーチャート

・指定した色の明るい色・暗い色を作成するツール

以上になりますが、
昔のカラケーのようにアイコンを使いこなしながら
記事を書いていきたい方はこのプラグインをオススメします。

あると便利なプラグインのまとめ記事が
ありますのでご覧下さい。

・ワードプレスブログの記事編集であると便利なプラグインのまとめ

このブログだけでは言えない
ネットビジネスの裏技を伝授することができます。
稼ぐための裏技や考え方を
メルマガやLINE＠で配信しています。

まだの場合はメルマガを
こちらからご登録下さい。

LINEは「@lfl9691b」で検索するか
下のボタンから追加することで
１００万円相当のプレゼントを
無料ですぐに受け取れます。

アフィリエイトに関する
１００万円相当のプレゼント

KANTAブログのオススメ情報はこちらをクリック↓↓↓