味気ない記事タイトルをWebフォントで華やかに彩るプラグイン「WP Visual Icon Fonts」

2020/2/25 追記：当記事のプラグインは現在使用できないようです。以下のような類似プラグインもご活用いただけます。

記事を書く上でわかりやすさ、読みやすさという部分の工夫は欠かせませんよね。その影響もあってか、専門分野の記事を書くとなるとどうしても文章量が長くなってしまい、それを読む読者は文字ばかりを目で追い、読み疲れてページを離脱してしまいがち。

そんな時に使いたいのが、今回ご紹介する「WP Visual Icon Fonts」です。これを使うことで、記事内にWebフォントを設定できるようになり、記事を読む際に生じる読み疲れを軽減させ、記事を見映え良く仕上げることが出来ます。

記事中にWebフォントを簡単に設置できるプラグイン「WP Visual Icon Fonts」

「WordPress Visual Icon Fonts」は、ブログデザインの際に用いられるFont AwesomeのWebフォントを記事中で使えるようにするプラグインです。

これを利用することで、ずらずらと書かれる文章の外観を見映え良く魅せることができ、読者に見やすく読みやすい印象を与えます。また画像と比較してWebフォントは、読み込みに割く時間も少ないので、ページ読み込み速度の遅さを理由とした読者の離脱率を下げることにも繋がります。

ちなみにその他、Webフォントを使うメリットについては以下の記事でも言及されていますので、気になった方は合わせてチェックしてみてください↓

「WP Visual Icon Fonts」の使い方

それではさっそく使い方についても見ていきましょう。まずはWordPressの管理画面から「プラグイン」>「新規追加」で「WordPress Visual Icon Fonts」と検索してプラグインをインストールして有効化します。

もしWordPress上の検索結果に「WordPress Visual Icon Fonts」が表示されない場合は、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールすることでも利用可能です。

WP Visual Icon Fonts

Webフォントを設定して文章の見映えをカスタマイズする方法

プラグインを導入できたら、後は簡単。「投稿」画面より「ビジュアル」エディタを開き、Webフォントを挿入したいポイントにマウスポインタを合わせます。

その状態で「投稿」画面に追加されている「Icons」欄をクリック。

するとプルダウンメニューより多種多様なWebフォントを選択できるようになるので、文章の雰囲気に合ったWebフォントを選びましょう。

最後に投稿を保存すれば設定は完了です。

実際にプレビュー画面で確認してみるとこの通り。このように文中はもちろん、記事タイトルへWebフォントを設定するだけで目を惹く構成へと変化させることが出来ましたね。

Webフォントをオシャレに彩るには…？

また「WordPress Visual Icon Fonts」では、ただWebフォントを文中に追加するだけでなく、少し工夫することでアイコンのサイズを変えたり、自分のブログやサイトの色に合わせてWebフォント自身の色を変えることも可能です。

Webフォントを設定できたら「テキストエディタ」に切り替え、<i class>～の記述で始まる欄にstyleタグを挿していきます。

colorでWebフォントの配色をfont-sizeでWebフォントの大きさを設定すれば完了です。

またTCDテーマでは、カスタムCSS欄よりstyle変更がまとめて行えます。とくにフォントサイズをプレビュー画面と照らし合わせながら調整したい時には、直書きよりカスタムCSSを使うことでカスタマイズ変更・管理もしやすくなりますので、場面に合わせて使い分けてみましょう。

まとめ

今回は、味気ない記事タイトルをWebフォントで華やかに彩るプラグイン「WP Visual Icon Fonts」の機能とその使い方をご紹介しました。Font Awesomeと比較してオプション要素の強いものとなっているので、導入必須なプラグインというわけではありませんが、少しでも記事の見映えをこだわりたい方にはピッタリです。

とくにWebフォントは、Retinaディスプレイのようなディスプレイ環境に左右されず、CSSひとつで色やアイコンを入れ替えられるので使い方も簡単。

そのため、たまには記事を華やかに仕上げたいという時にでも使ってみてください。