クリエイティブライフハック

写真とオンラインメディアの話をしよう。ブログ、ソーシャルメディア、オウンドメディア、ホームページ、ハンドメイドマーケット、Etsy、minne、Creema、iichi…

オンラインメディア

WordPressの記事にビジネス向け絵文字を使う方法。

投稿日:2014/10/09 更新日:

WordPressの記事に絵文字アイコンを使いたい。

そんな願いが叶う方法がいくつかあります。

調べてみると「TypePad 絵文字 for TinyMCE」というプラグインを利用している人が多いようです。

スポンサーリンク

ビジュアルエディタで簡単に下の画像のようなカラフルな絵文字を挿入することができます。

TypePad 絵文字 for TinyMCE

画像を見ていただくとわかりますが、ビジネス用途では少し使用をためらってしまいそうな絵文字が並んでいます。
他にも、「WP Emoji2」「Emoji Emoticons」というプラグインがオススメされていますが、いずれも派手な装飾系の絵文字です。

読者に「読みやすさ」を提供したいというのが絵文字を使う理由ではないかと思います。
このブログの読者の方は、「使ってみよう!」と思わないかもしれませんね。

そこで、実用的なビジネス用途で使える落ち着いた絵文字アイコン(400種類以上)が簡単に使えるようになる WordPress のプラグインをご紹介します。

どんな絵文字アイコンなのか先にいくつか見ていただきます。

                                                                                                  

落ち着いた読みやすい記事になりそうです。
そして、これはテキストと同様に扱えるため、サイズや色を自由に変えることができるのです。

では、ご紹介します。

WordPressの絵文字プラグイン「WP Visual Icon Fonts」

このプラグインは、Webフォントアイコンセットでよく利用されている「Font Awesome」の369種類のアイコンと、WordPressデフォルトテーマTwentyFourteenでも使われている「Genericons」の62種類のアイコンが含まれています。

画像のアイコンではないのでページが重くなる心配もありません。また、簡単に色やサイズの変更も可能です。
使い方も簡単。ビジュアルエディタのプルダウンメニューで選択するだけです。記事の見出しに使うと視覚的な効果で読みやすくなることが期待できます。

WP Visual Icon Fonts のインストール

WP Visual Icon FontsWordPress.com からダウンロードすることも可能ですが、管理画面のプラグイン新規追加で検索する方が簡単です。

プラグイン新規追加

WordPressプラグインの新規追加

プラグイン検索

プラグイン検索枠に「WP Visual Icon Fonts」を記入して検索するとプラグインが表示されます。
よく似た名前のプラグインと間違えることがありますので、作成者の名前「Paul van Zyl」を確認して「いますぐインストール」ボタンをクリックしてください。

プラグイン「WP Visual Icon Fonts」を検索

投稿エディタツールの上に「icons」ボタン

投稿編集画面のツールの上に「icons」というボタンがあらわれるのでクリックする。

投稿画面にicons

すると絵文字選択プルダウンメニューが表示されて、絵文字を挿入することができます。

iconsプルダウン

試しに、Pinterestのアイコンを挿入してみます。

pinterest iconの挿入

icon-pinterest

icon-arrow-up 小さくてわかりにくいので大きくしてみましょう。

icon-pinterest

色も変えてみましょう。

icon-pinterest

簡単に使えました。

見出に使うとどうでしょうか。

 icon-star 絵文字付き見出しの効果はあるのか?

見出しの頭に星マークを付けてみました。
他にもたくさんの絵文字アイコンが揃ってます。

使いすぎは逆効果になりかねませんが、効果的に使うことで読みやすい記事になるのではないでしょうか。

絵文字サンプル

他にどんな絵文字アイコンが使えるのか知りたいですか?
よく使いそうな絵文字アイコンを少しだけ並べておきます。

icon-android  icon-angle-double-right  icon-angle-right  icon-apple  icon-arrow-circle-down  icon-arrow-circle-left  icon-arrow-circle-right  icon-arrow-circle-up  icon-arrow-down  icon-arrow-left  icon-arrow-right  icon-arrow-up  icon-asterisk  icon-ban  icon-bar-chart-o  icon-bell  icon-bookmark  icon-calendar  icon-camera  icon-caret-right  icon-caret-square-o-right  icon-certificate  icon-chain  icon-chain-broken  icon-check  icon-check-circle  icon-check-square-o  icon-chevron-circle-right  icon-chevron-right  icon-circle  icon-circle-o  icon-clipboard  icon-clock-o  icon-coffee  icon-comment-o  icon-credit-card  icon-cutlery  icon-desktop  icon-download  icon-dropbox  icon-edit  icon-envelope  icon-envelope-o  icon-exclamation  icon-exclamation-circle  icon-exclamation-triangle  icon-external-link  icon-facebook  icon-facebook-square  icon-female  icon-fighter-jet  icon-file  icon-file-o  icon-film  icon-flag  icon-flickr  icon-folder  icon-folder-o  icon-folder-open  icon-folder-open-o  icon-google-plus  icon-google-plus-square  icon-hand-o-right  icon-heart  icon-heart-o  icon-home  icon-info-circle  icon-instagram  icon-key  icon-laptop  icon-leaf  icon-linkedin  icon-location-arrow  icon-lock  icon-long-arrow-right  icon-male  icon-map-marker  icon-microphone  icon-microphone-slash  icon-mobile  icon-moon-o  icon-music  icon-paperclip  icon-pause  icon-pencil  icon-phone  icon-picture-o  icon-pinterest  icon-pinterest-square  icon-plane  icon-play  icon-play-circle  icon-plus  icon-plus-circle  icon-plus-square  icon-power-off  icon-print  icon-puzzle-piece  icon-question  icon-question-circle  icon-quote-left  icon-quote-right  icon-rss  icon-rss-square  icon-search  icon-shopping-cart  icon-sitemap  icon-skype  icon-square  icon-square-o  icon-star  icon-star-half  icon-star-half-empty  icon-star-half-full  icon-star-half-o  icon-star-o  icon-tag  icon-tags  icon-thumb-tack  icon-thumbs-o-up  icon-tumblr  icon-tumblr-square  icon-twitter  icon-twitter-square  icon-umbrella  icon-unlock  icon-unlock-o  icon-user  icon-video-camera  icon-vimeo-square  icon-volume-down  icon-volume-off  icon-volume-up  icon-warning  icon-windows  icon-wrench  icon-youtube  icon-youtube-play  icon-youtube-square 

今日も元気に楽しく♪

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で畑本伸一|CreativeLifeHackをフォローしよう!

-オンラインメディア
-, ,

運営者プロフィール

畑本伸一

icon-maleSINTO Hatamoto (畑本伸一)
写真とオンラインメディアの話が大好きです。ワードプレス、インスタグラム、ピンタレストの活用方法、初心者ハンドメイド作家さん向けの商品写真の撮り方、編集方法、オンラインメディア活用などをセミナー講師としてお伝えしています。 I Love Fujifilm X-E2
icon-arrow-circle-right 詳しいプロフィール

共著

Facebookページ「Creative Life Hack」TwitterGoogle+ページ「自分メディアの育て方」instagramPinterestFeedly RSS

Copyright© クリエイティブライフハック , 2016 AllRights Reserved.