キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

これは便利!Retina で拡大・縮小しても美しいまま表示される魔法のアイコン

      2015/07/29

HARIBO を買ったつもりが HALALBO でちょっとショック、キャリコ( @calicocatxyz )です。

確認しないでお会計した自分が悪いんですけど、帰って袋から出して食べる直前まで気づきませんでした… さて、本日はアイコン型ウェブフォントの導入についてです。それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

サイドバーに設置してる SNS アイコンはウェブフォントを使用してるにゃ。これを使うことによって色々なメリットを得られるにゃ。

例 )

STINGER5 ではタグ、購読ボタン、検索ボタン、記事の公開日時、更新日時などに使われてるにゃ。

Ads by Google

ウェブフォントって何?

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。

アイコン型ウェブフォントって何?

アイコン型ウェブフォントはアイコンをフォントとして扱うものにゃ。こうすることによってさまざまなメリットを得ることが出来るにゃ。

アイコン型ウェブフォントを使うメリット

いくらでも大きく出来る

サイトをどれだけ拡大しても、くっきり美しいまま表示されるにゃ。

Retina ディスプレイに対応

2010年6月に発売された iPhone4 以降に発売された全モデルに搭載されている高精細ディスプレイでも、くっきり美しいまま表示されるにゃ。

レスポンシブデザインに対応

画像では不可能なデバイスの幅にあわせた文字改行が可能になるにゃ。

CSS でカスタマイズ可能

テキスト扱いされるから当然 CSS での装飾が可能になるにゃ。サイズや色を簡単に制御可能なのはもちろん、CSS3 での表現も簡単にゃ。

作成・更新・変更が楽

タイトルやロゴ部分などのパーツを画像化する必要がなくなり、画像パーツが少なくて済むにゃ。

サイトが軽くなる

画像ファイル数が減ることによって表示速度もアップするにゃ。

オリジナルアイコンを作成できる

使いたいアイコン型ウェブフォントがなければ自分で作っちゃうことだって出来るにゃ。

アイコン型ウェブフォントを使うデメリット

日本語フォントは重い

文字数が多くてフォントデータが重いため、ページの表示速度が遅くなってしまうにゃ。

アイコン型ウェブフォントサイト

Font Awesome

リンクFont-Awesome

Font Awesome の最新版 Version 4.2.0 を導入したアイコン型ウェブフォントの使い方

ああああああああ、ULTRA JAPAN に行きたすぎるキャリコ( @calic …

calico.xyz

Ico Moon

リンクIcoMoon

なければ作ればいい!アイコン型ウェブフォントが自作できる IcoMoon

イギリスで一人暮らしをするかもしれないキャリコ( @calicocatxyz ) …

calico.xyz

genericons

リンクGenericons/

アイコンの装飾

アイコン型ウェブフォントで表示した SNS アイコンに CSS3 でアニメーションをつける

暖房の暖かさに幸せを感じてるキャリコ( @calicocatxyz )です。 部 …

calico.xyz

まとめ

iPhone6 の発売でさらにスマートフォンが普及し、ファイルサイズが軽くてレスポンシブデザインも求められる時代になってきているにゃ。サイトの軽量化やちょっとしたデザインに、アイコン型ウェブフォントは強い味方になると思うにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - ウェブサービス

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

忍者 AdMax が Google AdSense よりも稼げる理由
忍者 AdMax の年間平均クリック単価は62円?!

そんなバカな、キャリコ( @calicocatxyz )です。 実は忍者 AdM …

アクセスアップには Twitter を極めるのが近道な理由とメリット
アクセスアップには Twitter を極めるのが近道な理由

時間差で読書の秋が訪れてるキャリコ( @calicocatxyz )です。 外気 …

カエレバなどで楽天ボタンを表示してるブログは要確認。その商品は本当にオススメ出来る?

こんにちは、キャリコ( @calicocatxyz )です。 先日こんな記事を目 …

お題に答える「 言えるかな? 」が面白い!キャリコも問題作ったよ!

47都道府県を全部言えませんでした、キャリコ( @calicocatxyz )で …

Web アイコン Font Awesome の最新版 Version 4.4.0 が公開
Web アイコン Font Awesome の最新版 Version 4.4.0 が公開

良いタイミングで気付いた、キャリコ( @calicocatxyz )です。 半年 …

SNS 連携サービス「 Paper.li 」の登録方法。キャリコ新聞も創刊したよ!

ひょんなことから新聞を創刊したキャリコ( @calicocatxyz )です。 …

Facebook の変更に合わせた記事の拡散につながる OGP 設定【 最新版 】

口内炎に苦しんでるキャリコ( @calicocatxyz )です。 そりゃペペロ …

忍者 AdMax が Google AdSense よりも稼げる理由
忍者 AdMax が Google AdSense よりも稼げる理由

忍者 AdMax をブログに導入、キャリコ( @calicocatxyz )です …

なければ作ればいい!アイコン型ウェブフォントが自作できる IcoMoon

イギリスで一人暮らしをするかもしれないキャリコ( @calicocatxyz ) …

軽いブラウザを比較した、おすすめの使い分け方法とは?
軽いブラウザを比較した、おすすめの使い分け方法とは?

ブラウザは使い分けるタイプ、キャリコです。 皆さんはブラウザを使い分けていますか …