プラグイン

最終更新日: 2018.07.9

プラグイン WP SVG Icons |文章の外観を見映え良く魅せることができぞ!|インストールから使い方

こんにちは。“Wd-Labo”ディレクターのOtsukaです。今回はコンサルしているクライアント様からのご質問で、このブログでも利用している文章の中のアイコンをどうやって使うのですか?ということで説明をしていきたいと思います。

▼ このような感じのアイコンのことです。

じつはコレは画像ではありません。フォントなんですね。

実に簡単に利用できるので「文章の外観を見映え良く魅せることができる」ので文字だけの外観より少々見栄えがよくなるのではと思い使っています。

利用するプラグインは「 WP SVG Icons 」です。インストールの方法から設定、使い方までをお話しようと思います。

スポンサーリンク

この記事のバージョン情報・・2018-07-09時点

  この記事のWordPressバージョン 4.9.7–ja(2018-07更新)
  PHPバージョン 7.1
  Windows10 バージョン1803(2018-07-02更新)
  Google Chromeバージョン:  67.0.3396.99(Official Build) (64 ビット)
  プラグイン WP SVG Icons バージョン 3.2.0
最新版での説明になりますが、当サイトではMacでの設定解説はしておりません。ご了承ください。

プラグイン WP SVG Icons のインストール及び使い方

プラグイン WP SVG Icons のインストール

WordPress 管理画面 ➡  プラグイン ➡  新規追加 へ移動しましょう。

右上の検索窓に  WP SVG Icons  と入力すると、図のような  WP SVG Icons  と表示されるので「今すぐインストール」をクリックしよう。

 

▼もし接続情報がポップアップで表示された場合は確認後右下の 開始 をクリックします。

▼インストールが終了と同時に 有効化 をクリックしましょう。

これでインストールは終了です。このプラグインは特に設定の必要はありません

その他のインストール方法は、

 WP SVG Icons の使い方

WordPress 管理画面 ➡ 投稿 へ移動しましょう。

記事の中で Webフォントを入れる場所にマウスでクリックしておき上部の Add Icon をクリックします。

 

多種多様のアイコンが表示された画面に移動されます。この中から利用したいアイコンを見つけて ① クリックしましょう。

選んだアイコンがプレビューとして表示されます。

② の欄から スパン を選択します。(してもしなくても構わないようですが・・)

③ の アイコンを挿入する をクリックするとショートコードが記事編集上に挿入されます。

 

▼このようにショートコードが挿入されます。

 

▼Webフォントの色を変えたり、サイズを変えたい場合は、ショートコードをドラッグしながら選択肢しメニューからお好きなサイズ、色を選択することで変えることができます。

あとはプレビューで表示させて確認してみてくださいね。

このようにアイコンを画像で利用するのではなくWebフォントとして利用できるすぐれものです。

文字だけの文章より変化が出て読者様にも読みやすくなるのではないでしょうか。

Webフォントを利用して気がついたこと

僕も以前から使っていたわけではありませんが、最近 Google 先生のブログを読んでいて気がついたことがあります。

それは・・

Google 先生の文章は、日本語と英語を組み合わせているときは、単語の区切には前後に半角スペースをいれて読みやすくされています。

すなわち、上記の文章で。。

Google と先生の間には半角のスペースを入れているということです。

同様にWeb フォントの前後には半角のスペースを入れることで見栄えも良くなります。

理由は、、

英数と日本語の間に半角スペースを入れないと「音声読み上げが円滑に行えない」という理由もあるからそうです。

全然知りませんでした。

僕も心がけたいですね。

ということで、一つのプラグイン導入から思わぬことを知り大変勉強になりました。

それではまた~。

 

Sponsored Link

Sponsored Link

ピックアップ記事

  1. パソコンを健康な状態に保つために「Wise Care 365 PRO V4」を導…
  2. 誰でも出来るWindows10の起動を早くし動作を軽くする簡単な方法
  3. 年賀状作成なら、ゆうびん.JP の「はがきデザインキット」が超便利!|インストー…
  4. 無料の画像素材に自分のサイトの画像を嵌め込んでみたよ!ペイントツールFireAl…
  5. Feedlyボタンの取得からブログへの設置方法を分かりやすく解説しました

関連記事

  1. プラグイン

    プラグインWordPress Ping Optimizer|適切なPING送信|インストールから使い…

    こんにちは。“Wd-Labo”ディレクターのOtsukaです。今回…

Sponsored

おすすめ記事

ピックアップ記事

プラグインに関する記事

特集記事

携帯端末でお読みいただけます。

無料素材

■高品質なロゴとボタンが無料でご利用いただけます♪

 

 

【ボタンマルシェ - ButtonMarche】

 

 

【ロゴマルシェ - LogoMarche】

最近の記事

更新情報を受け取れます

follow us in feedly
  1. プラグイン

    プラグインDuplicate Post|記事雛形複製|インストールから使い方
  2. ブラウザに関すること

    Googleホーム画面をカスタマイズする方法
  3. プラグイン

    【緊急アップデート】WordPressプラグイン「WP GDPR Complia…
  4. レンタルサーバー

    サーバーのPHPとPleskってどういう意味?
  5. レンタルサーバー

    初めての挑戦!レンタルサーバー「ドメインキング」で常時SSL化を無料で行う方法・…
PAGE TOP