WordPress 人気の有料テーマ「Dive」には、投稿記事をサクサク作成するための入力補助が色いろあるのですが、そのうちのひとつが「アイコンフォント」。

Diverの「アイコンフォント」は、FontAwesome」を利用しているのですが、なんとその数786種類もあります。

慣れないうちは、目当てのフォントを見つけるだけでひと苦労です。そんなときの心強い味方が「Search for Font Awesome」なのです。

Diverのアイコンを使うときは「Search for Font Awesome」を一緒に使うだけで、ずいぶん効率よく記事作成ができるようになります

アイコンフォント「Font Awesome」

「Font Awesome」とは、ウエッブページ上でアイコンを文字として表示できるサービスです。

画像ではなく文字なので、アイコンの色も大きさも自由に変更できます

Diverのアイコンフォントの使い方

【入力補助】→【アイコン】を選択

色と大きさを指定できます。

Diverアイコンには「Search for Font Awesome」が便利

Diverのアイコンは786種類あリます。 なのでDiverの選択画面の中から自分の使いたいアイコンを探すにはちょっと時間がかかります。

 そんなときは、アイコンを検索できる「Search for Font Awesome」というサイトを使います。

Font Awesomeのアイコンを日本語でも英語でも、一発検索することができます。

「Search for Font Awesome」の使い方

1サイトにアクセス

Search for Font Awesome

2使いたいアイコンを検索する

3Diverでアイコン検索

名前がわかれば、Diver入力補助のアイコン検索で探します。

めんどうなら「Search for Font Awesome」からコピーをして書き換えることもできます。

1アイコンのhtmlをコピー

赤枠のところをクリックしてhtmlをコピーし、アイコンを表示したい位置の貼り付けます。

<i class="fa fa-plane" aria-hidden="true"></i>

アイコンの色を変える

アイコンの色を変えたい時は、iタグに以下を追加して下さい

style="color: #6AC7E6;"

<i class="fa fa-plane" style="color: #6AC7E6;"aria-hidden="true"></i>

アイコンの大きさを変える

FontAwesomeでは、アイコンの大きさを簡単に変えることができます。以下のコードをi class="〜"内に追加して下さい

  • fa-lg (1.333…倍)
  • fa-2x (2倍)
  • fa-3x (3倍)
  • fa-4x (4倍)
  • fa-5x (5倍)
<i class="fa fa-plane fa-5x " aria-hidden="true"></i>

Diver アイコンフォントのまとめ

Font Awesomeは、その他にも角度を変えたり反転させたり動かしたりできるのですが、カスタマイズに時間をとられるとせっかくのDiverの意味がなくなってしまいます。

大きさや色を自由にカスタマイズするだけでも十分だと思います。

Search for Font Awesome」を使えば、検索も簡単できます。

 

あらゆるデザインがDiverで叶う☆究極のワードプレステーマ

サイトはただ作るだけで満足ですか?あなたのコンテンツはとっても有益なものがたくさんあります。よいコンテンツも埋もれてしまっては全く意味がありません。

Diverを使えば、SEO対策はもちろん、ユーザビリティーを考えられたデザインで、サイト回遊率、直帰率、再訪問がアップします。

アフィリエイターだってブロガーだって関係無しです!!しかし、スケールの小さいサイトを量産するような方法には向いていません。

サイトを育てて、長い間愛されることの出来るコンテンツを作成出来るのは、このDiverだけです。

おすすめの記事