スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/41-d16bb006

「スポンサーサイト」へのトラックバック

- TrackBack -

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

↑突然ですがこれなんだと思います? そうあれです、Wi-fiのマークです。 では次です。これは何でしょう? そうこれは皆さんご存知マスターカードのロゴですよね(笑) 何が言いたいかといいますと、 これらは「フォント オーサム」というものを使って作っているということです。 こちら、「あると♪さんのブログ」に掲載されていた記事を見て 使い始めたん...
  • 2014-11-11 22:57
  • 「 アフィリエイトを始める方へ「シリウス」と「アンリミ」によるアフィリサイト作成手法完全公開ブログ 」

「スポンサーサイト」へのコメント

- 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
  • ひーさんさん@管理人
  • 編集

読んでいる分には・・・

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

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

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

そうなんですよね・・・ケーキ2個ってww

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

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

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

年末年始は、鬼門ですな(爆)
  • 2014-10-19 13:49
  • らいふさん@管理人
  • 編集

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

> らいふさん

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

あと、ケーキは小さめとは言え一人1ホールってのが...w
インパクトありましたw
  • 2014-10-19 20:07
  • あると♪さん@管理人
  • 編集

No title

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

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

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

またいいのがあったら教えてください<m(__)m>
  • 2014-10-19 22:05
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

お役に立てて何よりです♪
また何か良いネタを探してみますっ!!w
  • 2014-10-19 22:32
  • あると♪さん@管理人
  • 編集

No title

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

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

私の携帯IE7以下??と思ってました(^^♪

そもそもGoogleなのに。。。
  • 2014-11-07 21:30
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

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

「ちゃんと表示されない」「表示が変になる」って事があれば教えて下さい♪
出来る限り早急に対応しますっ!!ww
  • 2014-11-07 21:42
  • あると♪さん@管理人
  • 編集

「Font Awesome」いいですね!

こんばんは(^-^)

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

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

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

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

応援ポチ。

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

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

> じゅんぴーAさん

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

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

また、いつも応援ありがとうございます^^
  • 2014-11-08 07:16
  • あると♪さん@管理人
  • 編集

No title

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

ありがとうございます(*´▽`*)
  • 2014-11-09 22:30
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

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

無事スマホでも表示されて良かったです♪(。>ω<)b
  • 2014-11-09 22:55
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

「basic_white」にも Font Awesome を導入

 

2014.10.18

アイコン型Webフォント「Font Awesome」 アイコンを画像ではなくテキストで表示できる

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

Font Awesome 」のサイトは こちら



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


  1. 1.「Font Awesome」を使う為の設定
  2. 2.「Font Awesome」のアイコンを表示してみる
  3. 3.「FC2ブログ」のスマートフォン版で表示する方法



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」でアイコンを表示してみる 次は実際にアイコンを表示する手順の説明です。
まず「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 

「new_basic_white_ap」を追加


▼そして追加したスマートフォン用テンプレートの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」のアイコンが表示されてると思います
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-10-18 | 「basic_white」 | コメント(15) | トラックバック(1) | このページのトップへ

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
  • ひーさんさん@管理人
  • 編集

読んでいる分には・・・

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

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

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

そうなんですよね・・・ケーキ2個ってww

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

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

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

年末年始は、鬼門ですな(爆)
  • 2014-10-19 13:49
  • らいふさん@管理人
  • 編集

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

> らいふさん

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

あと、ケーキは小さめとは言え一人1ホールってのが...w
インパクトありましたw
  • 2014-10-19 20:07
  • あると♪さん@管理人
  • 編集

No title

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

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

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

またいいのがあったら教えてください<m(__)m>
  • 2014-10-19 22:05
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

お役に立てて何よりです♪
また何か良いネタを探してみますっ!!w
  • 2014-10-19 22:32
  • あると♪さん@管理人
  • 編集

No title

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

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

私の携帯IE7以下??と思ってました(^^♪

そもそもGoogleなのに。。。
  • 2014-11-07 21:30
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

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

「ちゃんと表示されない」「表示が変になる」って事があれば教えて下さい♪
出来る限り早急に対応しますっ!!ww
  • 2014-11-07 21:42
  • あると♪さん@管理人
  • 編集

「Font Awesome」いいですね!

こんばんは(^-^)

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

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

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

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

応援ポチ。

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

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

> じゅんぴーAさん

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

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

また、いつも応援ありがとうございます^^
  • 2014-11-08 07:16
  • あると♪さん@管理人
  • 編集

No title

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

ありがとうございます(*´▽`*)
  • 2014-11-09 22:30
  • ひーさんさん@管理人
  • 編集

Re: No title

> ひーさんさん

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

無事スマホでも表示されて良かったです♪(。>ω<)b
  • 2014-11-09 22:55
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

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

White
Black

プロフィールClick

プロフィール画像

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

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

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

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。