「basic_white」にも Font Awesome を導入

ホーム > ブログカスタマイズ > 「basic_white」 > 「basic_white」にも Font Awesome を導入

「basic_white」にも Font Awesome を導入

2014.10.18

アイコンを画像ではなくテキストで表示できる

このブログでは、すでに色んなとこで使ってる「Font Awesome」を現在カスタマイズ中のテンプレート「basic_white」の方でも使えるようにしました♪（ヘッダー部分に一行記述を追加しただけですが...ｗ）
まぁそんな簡単な設定で、アイコンを画像ではなくテキストで表示出来るようになるのでとっても便利です♪
種類も豊富で、このブログの「」やSNSボタン部分の「」もこれで表示してます

「 Font Awesome 」のサイトは こちら

アイコンをWebフォントで表示する「Font Awesome」の使い方

1.「Font Awesome」の導入方法

とにかく簡単なので、まずは設定からご説明♪
まず、導入したいWebサイトやブログのヘッダー部分（<head> ～ </head>の間）に下記の1行を記述
（ソースコードの上でダブルクリックすると全選択の状態になるのでコピペする時に便利です♪）

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

テンプレート「basic_white」では、「テンプレートの設定」の「basic_white のHTML編集」内に記述されてる「<link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />」のすぐ下に書き足しました。※記入した場所はHTMLのかなり上部なので分かり易いと思います。

<link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

こんな感じで1行追加するだけでOKっ!! これで設定完了です
あとは実際にアイコンとして表示したい箇所に、コードを挿入するだけです♪

このページのトップへ

2.「Font Awesome」のアイコンを表示してみる

次は実際にアイコンを表示する手順の説明です。
まず「Font Awesome」の画面上部にある「Icons」をクリックすると沢山のアイコンが並んだ画面になるのでその中から使いたいアイコンを選んでクリックします。
※今回は例として、右の画像のサッカーボールを表示してみます

一覧の中から、このサッカーボールのアイコンをクリックすると右の画像のような画面になるので、赤い線で囲ってる部分のソースコードをコピーして、アイコンを表示したい箇所に貼り付けます。

例として、下記のようにHTMLを記述してみます。

「 <i class="fa fa-futbol-o"></i> ← ここにサッカーボールは見えますか？」

表示結果　＝　「 ← ここにサッカーボールは見えますか？」

こんな感じになります♪　ちゃんとサッカーボールが表示されてますね^^
そして、これは画像では無く “テキスト” なので、CSSで大きさや色を簡単に変更出来ちゃいますっ!!
※画像だと拡大・縮小をすると画質が悪くなったりしますが、そう言う心配も無いです

■ 大きさと色を変えたサンプル
① ② ③ ④ ⑤ ⑥ 　 ⑦ ⑧ ⑨ ⑩ ⑪ ⑫

<span style="font-size:10px;color:#fff;"><i class="fa fa-futbol-o"></i></span>
<span style="font-size:20px;color:#ffc;"><i class="fa fa-futbol-o"></i></span>
<span style="font-size:30px;color:#ff9;"><i class="fa fa-futbol-o"></i></span>
<span style="font-size:40px;color:#ff6;"><i class="fa fa-futbol-o"></i></span>
<span style="font-size:50px;color:#ff3;"><i class="fa fa-futbol-o"></i></span>
<span style="font-size:60px;color:#ff0;"><i class="fa fa-futbol-o"></i></span>
<span style="font-size:100%;color:#fff;"><i class="fa fa-futbol-o"></i></span>
<span style="font-size:150%;color:#fcf;"><i class="fa fa-futbol-o"></i></span>
<span style="font-size:200%;color:#f9f;"><i class="fa fa-futbol-o"></i></span>
<span style="font-size:250%;color:#f6f;"><i class="fa fa-futbol-o"></i></span>
<span style="font-size:300%;color:#f3f;"><i class="fa fa-futbol-o"></i></span>
<span style="font-size:500%;color:#f0f;"><i class="fa fa-futbol-o"></i></span>

※①＝ソースの1行目、⑫＝ソースの12行目と言う感じです。

「Font Awesome」では、その他様々なオプションが用意されてるので詳しくは、「Font Awesome」の上部にある「Examples」をクリックしてみて下さい♪

説明文は英語ですが、英語が苦手な私でも見ただけで何となく分かるような内容です♪

このページのトップへ

3.「FC2ブログ」のスマートフォン版で表示する方法

FC2ブログの場合、PC版とスマートフォン版で適用される「HTML」と「CSS」が異なるので、スマートフォン版でも「Font Awesome」のアイコンを表示する際は以下の設定も必要です。

▼FC2ブログの管理画面から「テンプレートの設定」をクリックして、以下の画像のようにスマートフォン用「公式テンプレート追加」をクリックします。
（すでにスマートフォン用のテンプレートを追加してる場合は「テンプレート管理」の方をクリック）

▼今回は「basic_white」に追加なので、以下のテンプレート「new_basic_white_ap」を選択します。
ダウンロードするには「詳細」の部分をクリックし、ダウンロードをすればOKです。
※すでにスマートフォン用のテンプレートを追加してる場合は、この手順は飛ばしてOK　

▼そして追加したスマートフォン用テンプレートのHTML編集部分にも以下の1行を追加で記述します。
※HTMLのhead要素（<head> ～ </head>の間）に記述すればOKです。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

▼スマートフォン用テンプレートの「new_basic_white_ap」に上記の1行を追加した例は以下の通り。
「new_basic_white_ap」に記述を追加

上記の通り、記述を追加したら「更新」をクリックして保存して下さい♪
これでFC2ブログのスマートフォン版でも「Font Awesome」のアイコンが表示されてると思います

ブログランキングに参加中♪
良かったらポチっとお願いします

この記事にトラックバックする(FC2ブログユーザー) トラックバックって何！？って場合はこちら: http://interest2014.blog.fc2.com/tb.php/41-d16bb006

「「basic_white」にも Font Awesome を導入」へのトラックバック

- TrackBack -

「フォント　オーサム」を使ってみた(゜-゜)

↑突然ですがこれなんだと思います？そうあれです、Wi-fiのマークです。では次です。これは何でしょう？そうこれは皆さんご存知マスターカードのロゴですよね(笑) 何が言いたいかといいますと、これらは「フォント　オーサム」というものを使って作っているということです。こちら、「あると♪さんのブログ」に掲載されていた記事を見て使い始めたん...

2014-11-11 22:57
「アフィリエイトを始める方へ「シリウス」と「アンリミ」によるアフィリサイト作成手法完全公開ブログ」

「「basic_white」にも Font Awesome を導入」へのコメント

- Comment -

No title

SNSまでこれで表示してたんですか？驚きです。画像だと思ってました…☆*:.｡. o(≧▽≦)o .｡.:*☆おしゃれ〜♫

2014-10-18 10:31
ひーさんさん@管理人
編集

Re: No title

> ひーさんさん

実はそうなんです^^

他にもスクロールしたら右下に出るボタンなんかも「Font Awesome」のアイコンです♪

色んなとこをちょこちょこ変更したりするので、
画像だと場合によっては、画像その物を作り直して、さらにアップロードし直して...
と言う手間が出ちゃう事もありますが、「Font Awesome」を使ってアイコンを表示すれば
簡単にCSSで調整出来るので便利なんです♪^^

さらに、よく使うアイコンはパソコンの辞書登録をしてたりします^^

2014-10-18 11:29
あると♪さん@管理人
編集

No title

さっそくやってみます！！(^｡^)
もう一つきいてみるんですが、パソコンの辞書登録って何ですか？

2014-10-18 19:37
ひーさんさん@管理人
編集

Re: No title

> ひーさんさん

是非お試し下さい♪

また、パソコンの辞書登録についてですが
windowsのヘルプページに説明があったのでコピペしてきました♪
http://windows.microsoft.com/ja-jp/windows-8/ime-register-tool

私はよく使うHTMLのタグやCSSなんかも辞書登録してます♪
結構便利なので、辞書登録もおススメです^^

2014-10-18 22:23
あると♪さん@管理人
編集

No title

ありがとうございます。便利そう！！(*´▽｀*)

2014-10-19 00:46
ひーさんさん@管理人
編集

読んでいる分には・・・

簡単そうに思えても、実際に自分でやろうとすると、
難しそうです（大汗）

そもそも用語が・・・　英語が・・・
って、感じですが、年末までに私もテンプレートを、
カスタマイズしたいと企んでいます（笑）

コメントありがとうございます♪

そうなんですよね・・・ケーキ２個ってｗｗ

でも、パンチ（奥さん）が言うように、
パティシエが作ったケーキって、

ホールでも意外と小さいサイズなので、
意外とペロリといけちゃうんですよねー。

ダイエット中なのに・・・。

年末年始は、鬼門ですな（爆）

2014-10-19 13:49
らいふさん@管理人
編集

Re: 読んでいる分には・・・

> らいふさん

難しそうに見えて、実際やってみると案外簡単だったって事もあるので、きっと大丈夫ですｗ
どんなカスタマイズをされるのか楽しみにしてますね♪

あと、ケーキは小さめとは言え一人１ホールってのが...ｗ
インパクトありましたｗ

2014-10-19 20:07
あると♪さん@管理人
編集

No title

こちらこそ記事ネタありがとうございます(^^)

いろんなのがあるので記事中でもたくさん使えそうですね。

テキストだから重くならないし(^^♪

またいいのがあったら教えてください<m(__)m>

2014-10-19 22:05
ひーさんさん@管理人
編集

Re: No title

> ひーさんさん

お役に立てて何よりです♪
また何か良いネタを探してみますっ!!ｗ

2014-10-19 22:32
あると♪さん@管理人
編集

No title

さっそく解決策ありがとうございます(*´▽｀*)

こんなの自分じゃ解決できなかったです。

私の携帯ＩＥ7以下？？と思ってました(^^♪

そもそもＧｏｏｇｌｅなのに。。。

2014-11-07 21:30
ひーさんさん@管理人
編集

Re: No title

> ひーさんさん

いえいえ♪
と言うか、そもそも説明不足ですみませんでした...^^;

「ちゃんと表示されない」「表示が変になる」って事があれば教えて下さい♪
出来る限り早急に対応しますっ!!ｗｗ

2014-11-07 21:42
あると♪さん@管理人
編集

「Font Awesome」いいですね！

こんばんは（＾－＾）

あると♪さんの記事を見て先程から「Font Awesome」の実験をしていました。

おもしろいですね。これは役に立ちそうです(^o^)

早速次回から記事に使ってみます。

記事と全然関係ないアイコン使っちゃったりしてヽ(^o^)丿

応援ポチ。

2014-11-07 23:39
じゅんぴーAさん@管理人
編集

Re: 「Font Awesome」いいですね！

> じゅんぴーAさん

コメントありがとうございます♪
「Font Awesome」ホントおすすめですｗ
色んな種類のアイコンがありますし、工夫次第で色々出来ますからね(≧∀≦)ｂ

次回の記事、楽しみにしてますね♪

また、いつも応援ありがとうございます^^

2014-11-08 07:16
あると♪さん@管理人
編集

No title

スマホでも見れるようになりました(^^♪

ありがとうございます(*´▽｀*)

2014-11-09 22:30
ひーさんさん@管理人
編集

Re: No title

> ひーさんさん

いつもコメントありがとうございます^^

無事スマホでも表示されて良かったです♪(｡>ω<)ｂ

2014-11-09 22:55
あると♪さん@管理人
編集

コメントの投稿

- Post a Comment -

▼クリックすると配色が変更されます　
このボタンの設置方法はこちら♪

White

Black

プロフィールClick

Author：あると♪
ブログ開始：日目
公開記事数：件

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

【当ブログのご案内は こちら♪ 】

カテゴリClick

つぶやき(12)

ブログカスタマイズ(45)

テスト的な感じ(1)

テスト的な感じ2(0)
のカテゴリをクリックでツリー表示します

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

いつもチェックしてるブログ＆便利なツールやサービス

- Link -

Font Awesome
便利なアイコン型Webフォント
ブログ内の参考記事はこちら
Stripe Generator
色んなストライプ柄を簡単作成
ブログ内の参考記事はこちら
Gyazo
スクリーンショットを簡単に共有
ブログ内の参考記事はこちら
0to255
指定した色のグラデーションを表示
Ultimate CSS Gradient Generator
CSSのグラデーションを簡単作成
Css Text Shadow
text-shadowを使って文字を装飾

INTEREST

「basic_white」にも Font Awesome を導入

アイコンをWebフォントで表示する「Font Awesome」の使い方

1.「Font Awesome」の導入方法

2.「Font Awesome」のアイコンを表示してみる

3.「FC2ブログ」のスマートフォン版で表示する方法

「「basic_white」にも Font Awesome を導入」へのトラックバック

「フォント　オーサム」を使ってみた(゜-゜)

「「basic_white」にも Font Awesome を導入」へのコメント

No title

Re: No title

No title

Re: No title

No title

読んでいる分には・・・

Re: 読んでいる分には・・・

No title

Re: No title

No title

Re: No title

「Font Awesome」いいですね！

Re: 「Font Awesome」いいですね！

No title

Re: No title

コメントの投稿

プロフィールClick

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

スポンサーリンクClick

このページの目次Click

人気ランキングClick

いつもチェックしてるブログ＆便利なツールやサービス

INTEREST

「basic_white」にも Font Awesome を導入

アイコンをWebフォントで表示する「Font Awesome」の使い方

1.「Font Awesome」の導入方法

2.「Font Awesome」のアイコンを表示してみる

3.「FC2ブログ」のスマートフォン版で表示する方法

「「basic_white」にも Font Awesome を導入」へのトラックバック

「フォント オーサム」を使ってみた(゜-゜)

「「basic_white」にも Font Awesome を導入」へのコメント

No title

Re: No title

No title

Re: No title

No title

読んでいる分には・・・

Re: 読んでいる分には・・・

No title

Re: No title

No title

Re: No title

「Font Awesome」いいですね！

Re: 「Font Awesome」いいですね！

No title

Re: No title

コメントの投稿

プロフィールClick

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

スポンサーリンクClick

このページの目次Click

人気ランキングClick

いつもチェックしてるブログ ＆ 便利なツールやサービス

「フォント　オーサム」を使ってみた(゜-゜)

いつもチェックしてるブログ＆便利なツールやサービス