「僕のサイトもそろそろアイコン欲しいなー」とずっと思っていたのですが、ようやく導入しました。

動画とか記事リンクとか、アイコンがあるとちょっと可愛らしいじゃないですか。

ちょっと変化があると「おっ、ここは何かあるのかな」と必要な部分で止めることができるじゃないですか。

で、「手軽に使えるやつがいいなー」とググってたら、こんな記事を見つけました。

既にWordpressに入っているアイコンを読み込むタイプなので、多分これが一番楽だし実際かなり簡単に導入できました。

導入方法は↑リンクを参照していただくとして、今回の記事では「こんな感じで使うと便利よ」っていう話をしていきます。

動画や関連記事リンクに超便利!

dashicons

 

テキストにYoutube動画のリンクを貼る場合は、例えば『The Killers – Somebody Told Me』みたいな感じで良いですが。

アイコンを加えると『The Killers – Somebody Told Me』となり、かなり見やすくなります。

さらにYoutubeっぽく、アイコンの色を指定すれば『The Killers – Somebody Told Me』。とても良い!

これでも良いかも『The Killers – Somebody Told Me』。アイコンをクリックで動画にジャンプ!

他にも、関連記事を表示するときには『ライティングで成約率を高めるならこちら』みたくできます。

これもせっかくなので色を付けて目立つようにしてみると、

『ライティングで成約率を高めるならこちら』な感じで、「ははーん、これリンクやな?」度がアップします。

頻繁に使うものだけ辞書登録

dictionary-book

アイコンは全部で473種類あります(数えました)。

とはいえ、よく使うものは限られてくるはずなので、利用するならWordPressのDeveloper Resources: Dashiconsはブクマしておきましょう。

その上で、よく使うアイコンはそれぞれ辞書登録しておけばかなり楽にアイコンを入れられます。

Macでいえば(Google日本語入力をダウンロードする必要があります)

Macでの辞書登録の仕方

  1. Google日本語入力を開く
  2. 環境設定→辞書
  3. ユーザ辞書の編集

ここからドンドコ追加していけば、アイコンを一瞬で入力でき、効率化も図れそうです。

たとえば先ほどのYoutubeのアイコンは「ytc」(YouTubeiConの略)で登録しています。

SNSのアイコンなども

Twitterもfacebookもアイコンがあるので、ブログやサイトでSNSを連携する場合はさらに見やすくなるのでおすすめです。

「Amazonへのリンクですよー」って分かりやすくするアイコンや吹き出しなどのアイコンもあるので、上手く使えば言葉数も減らして説明もしやすくなるかもしれません。

まとめ

  1. DashiconsはWordpressに最初から入っているアイコン
  2. リンクが視覚的に分かりやすくなる
  3. 辞書登録すれば楽