CSS

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

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

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

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

Font Awesomeとは?

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

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

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

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

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」はつけない)

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

関連記事

  1. CSS

    ATOM 5倍捗るテキストエディタmac,win対応<初心者向き> 

    こんにちは!modeetです。みなさんはテキストエディタを使ってい…

  2. WPプラグイン

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

    ワードプレスの醍醐味と言えばカスタマイズですよね?CSSをカス…

  3. アクセスアップ

    はてブをなめていた!アクセスアップだけじゃない!?

    お勧めする「はてブ」こんには!ブログ中毒気味のmoddetです…

  4. WPプラグイン

    ワードプレスで吹き出しを使って演出する方法!3倍ブログが楽しくなるプラグインSpeech bubbl…

    ブログを継続していく上で僕が大切にしているのが楽しんで書くというこ…

  5. CSS

    サイトスピードの高速化でアクセスアップ

    重要なサイトスピードワードプレスを運営しているとコンテンツの増加と…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。


最近の記事

最近のコメント

    1. その他

      iPhoneユーザー必見!iPhone8の新情報 Androidユーザーが減るか…
    2. ebay

      ebay 輸出 ebayを使って売り上げアップ!
    3. アドセンス

      アドセンスのクリック単価1円!?8000円の壁
    4. アクセスアップ

      はてブをなめていた!アクセスアップだけじゃない!?
    5. その他

      出世で人格が変わったクラッシャー上司の対処!
    PAGE TOP