記事の詳細

今年に入ってからプラグインの記事しか書いていない気がしてきました、網干です。

今回も便利プラグインの紹介です!
今回はHTMLコードの知識が一切なくても投稿記事の文中にアイコンが設置できる「WP SVG Icons」というプラグインをご紹介致します!

本記事を読むことで、下記のようなアイコンの設置が可能になります。
10_アイコンのサイズを変更して表示

ちなみに、アイコンではなく絵文字を貼り付けたい場合は、下記記事を参考にして下さい。

WordPressで絵文字が使えるプラグインをまとめてご紹介!
こんにちは!木曜ブログ担当の吉見です。今日は久々に気温が上がるという天気予報でしたが、ほんとに気持ちのいい青空です。だんだん春に近づいてきた実感がします(*´ω...

上記記事の絵文字と今回紹介するアイコンの違いは、色を自由に変更できる部分にあります。
サイトの構成によって合う色と合わない色がありますので、そういった部分の調整が難しいようなサイトでは今回のプラグインが役に立ちそうです。

では早速、プラグインのインストールから使い方までをご説明致します。

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

WordPressのプラグインの検索で「WP SVG Icons」を検索します。
検索結果にプラグインの項目が表示されますので「今すぐインストール」を押してインストールを実行します。
01_プラグイン検索

インストールが完了すると「有効化」ボタンが表示されますので、有効化を押してください。
02_プラグイン有効化

以上で、プラグインのインストールが完了になります。

投稿記事の文中にアイコンを設置する

記事の編集画面へ移動すると「Add Icon」のボタンが表示されますので、ボタンを押します。
03_投稿画面のアイコン選択ボタン

アイコン設定画面が表示されますので、アイコンを選択して、spanタグを設定して、「Insert Icon」ボタンを押します。
04_アイコンの設定

アイコンを表示するためのコードが挿入されます。
※”[“から”]”までの文字はアイコンを設置するコードになります。
06_ショートコードの設置を確認

コードが挿入された状態で記事のプレビュー画面を見ると、下図のように表示されます。
05_アイコンの表示を確認

アイコンの色を変更する

ビジュアルエディタ上で、アイコンのコードを選択した状態でWordPressの文字色を変更するボタンを押して、色を設定します。
07_アイコンの色を変更

記事のプレビュー画面を見ると、下図のように表示されます。
08_アイコンの色を変更して表示

アイコンのサイズを変更する

ビジュアルエディタ上で、アイコンのコードを選択した状態でWordPressの文字サイズを変更するボタンを押して、サイズを設定します。
09_アイコンのサイズを変更

記事のプレビュー画面を見ると、下図のように表示されます。
10_アイコンのサイズを変更して表示

プラグインの紹介は以上になります。

投稿記事の文字を装飾するプラグインで魅力的な装飾を!

いかがでしたか?

今回の方法はHTMLの知識を必要とせずにアイコンを設置できるので、「ビジュアルエディタでしかブログ記事を投稿できない!」という方にとっては非常に便利なプラグインになると思います。
ビジュアルエディタだけで操作できるプラグインを数多く入れることで、業者に委託しなければ実現しないような魅力的な記事が、HTMLの知識がない方でも作成できるようになるかもしれませんね。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
網干 裕介

網干 裕介

コーダーの網干裕介(あぼしゆうすけ)と申します。webサイトは見た目が非常に重要なのですが、サイトを構成するソースコードも見た目が重要だと考えています。内も外も魅力的なコンテンツが作れる人物になれるよう、日々努力しています。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

仕事ではパソコンが使いこなせるのが当たり前

相模原市産業会館パソコン教室

AD

ページ上部へ戻る