Font Awesomeの使い方 はてなブログとワードプレスで他のブログと差をつけろ<デザイン編>

ABOUTこの記事をかいた人

イクミヤ

1987年2月生まれ。大阪在住。
このブログは2017年5月から運営、主にワードプレスやSEOについて書いています。フォローして頂ければ幸いです。

スポンサーリンク

Font AwesomeはブログやWEBサービスでアイコンを表示させることが出来るサービスです。

ブログを書く上でデザイン性は重要です。パッとみて読み手も楽しく読める点がおすすめです。初心者には少し設定が難しく感じるかもしれませんが、導入して損はないと断言できます。

それでは説明していきます。

Font Awesomeとは?

先ほどアイコンを表示出来るサービスと説明しましたが初心者にはイメージしにくいと思うので導入すると、どのようなことが出来るか見本を作成します。

このようなアイコンを簡単に作成できるサービスがFont Awesomeです。

CDN(コンテンツデリバリーネット)を使う

CDNとはダウンロードとは違いサーバー上に設置されたもの自身のサイトで使うことができるサービスです。ダウンロードが必要ないのでAddQuicktagに登録していればすぐに使えます。

ワードプレスでブログを書くなら必須のプラグイン AddQuicktag使い方

2017.07.16

CDN使用準備

アイコンを使用するには指定のコードを<head>〜</head>の間にコードを埋め込む必要があります。

下記コード又は下記URLからコードをコピーして下さい。

BootstrapCDN

 

<head>〜</head>タグに貼り付ける

外観→テーマ編集→header.phpまで行き<head>タグを探します。

<head>タグの直後に貼り付ければ完了となります。あとはアイコンを使うだけになります。

Font Awesome使ってみよう!

準備は整ったのでアイコンを選んでみましょう!

The Icons

上記リンクからアイコンを選びます。

リンクをクリックするとアイコンが表示されるので選んでみましょう。

スポンサーリンク

アイコンを選択するとコード表示されるのでコピーします。

これがこのアイコンを使用するコードになります。ワードプレスで使う場合投稿画面の「ビジュアル」と「テキスト」の2種類があるのでテキストで入力してください。

サイズを調整する

デフォルトの場合だと小さくなるので大きくしてみましょう。

大きくするには下記のように入力します。

fa-lg(1.333倍)fa-2x(2倍) fa-3x(3倍) fa-4x(4倍) fa-5x(5倍)

色を変更する

デフォルトは黒っぽく地味な色なので色を変えてみましょう。

このように色の指定コードを入れてあげれば色の変更が可能になります。

動きを付ける

動きを付けるアニメーションに必要なタグのコードはこちらです。

先ほどと同じように<head>〜</head>の場所に貼り付けてください。このタグを貼り付ければアニメーションアイコンが使えるようになります。

アニメーションのクラス名

下記の例の場所にクラス名を入力してください。

fa-spin

スポンサーリンク

faa-wrench animated

faa-ring animated

faa-horizontal animated

faa-vertical animated

faa-flash animated

faa-bounce animated

faa-spin animated

faa-float animated

faa-pulse animated

faa-shake animated

faa-tada animated

faa-passing animated

faa-passing-reverse animated

faa-burst animated

角度を変えるクラス名はこちらです。

fa-rotate-90:90度傾ける fa-rotate-180:180度傾ける fa-rotate-270:270度傾ける fa-flip-horizontal:水平方向に反転 fa-flip-vertical:垂直方向に反転

マウスオンの時だけ動かす

親要素に「faa-parent animated-hover」というclass名を追加

アイコンには「faa-◯◯」というclass名だけ追加(「animated」はつけない)

マウスオンの時だけ動かす

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です