サイトイメージががらりと変わるWebフォントを導入してみた。簡単で効果はでかい。使用前後のイメージを添えて。

公開日: : 最終更新日:2016/03/30 programing

large_4398242368

元旦の朝、ガキ使の録画を見るという重大なミッションが残されているハマコー(@hamako9999)です。

最近は、CSSの勉強がてらブログデザインを、あっちはホイホイ、こっちはホイホイと変えるのがマイブーム。その延長でWebフォントにも手を出してみたら、簡単ぽぽーんで、サイトイメージが結構変わったのでオススメしてみます。

photo credit: arnoKath via photopin cc

スポンサーリンク

サイトロゴを変えようと思った

デザインいじりの延長で、トップヘッダー画像にサイトロゴを乗っけてみたんだけど、デフォルトフォントだとイマイチイケてない

スクリーンショット 2014-01-01 7.37.21

なんだろう、日常の延長的な。いつも行くコンビニみたいな。サイトのイメージを印象づける重要部分なので、やっぱりある程度はこだわりたい。イケてる非日常感をだしたい。

そんなサイトロゴをお洒落にするには、主に2つの方法がありました。

サイトロゴ画像を用意する

最初はこちらにしようかなと考えました。それっぽいWebサービスやアプリを探してみたけど、自分のイメージしているサイトロゴは、ゴテゴテ凝るつもりはなくシンプル。それに、慣れてない自分にはデザイン変更のメンテナンスが面倒臭そうなので却下。

おしゃれフォントを使ってみる

サイトロゴにおしゃれフォントを使ってみるか?

ただ、ネックなのはMacとWindowsで同じフォントを揃えるのは無理なところ。OSにより同梱されているフォントが全然違うので、せっかく使った、おしゃれドヤフォントも、皆さんに同じように見ていただけるわけではない。

そんなこんなで、うんうん悩んでいた自分に福音をもたらしたのが、Webフォントでございました。

 

Webフォントって

以下より引用
 Webフォントとは 〔 ウェブフォント 〕 【 Web Font 】 – 意味/解説/説明/定義 : IT用語辞典

Webページの見栄えを記述するCSS(Cascading Style Sheet)のバージョン3.0で新たに導入された仕様で、ページ中のテキスト(文字)の表示に利用するフォント(書体)データを指定した場所からダウンロードして適用できるようにするもの。

これまでもフォントの指定は可能だったが、Webページを閲覧しているコンピュータに指定したフォントが存在しない場合には、そのフォントでの表示はできなかった。Webフォントを利用すると、フォントが存在しない場合にWeb上の指定されたアドレスからフォントデータを自動的に読み込んで表示に使用することができる。

なんと!!フォントをWebからダウンロードすると。凄い世の中になったもんだ。 

でも、ダウンロードだとサイトパフォーマンスが気になる。通常、各端末に有るフォントを、都度ダウンロードするって遅くなったらどないしよ・・・

この点に関して、あれこれぐぐってみたところによると、使用する場所を限定して、日本語を使わないのであれば、たいして気にする必要は無いとのこと。

まぁ、とりあえず試してみて、あまりにもダメそうだったら諦めるということで、Webフォントでいくことに決定。

 

Webフォントの導入方法

Webフォントにもいろいろ種類があって、有償、無償、欧文、和文とバリエーションが豊富。

自分は、すべて無料で導入も簡単なGoogle Web Fontsを使ってみることに。また、Google先生への依存度があがる・・・

Google Fonts

スクリーンショット 2014-01-01 9.05.13

 

 使い方はこちらがシンプルでわかりやすいです。ググっていて、たまたま見つけたサイトが、OZPA先生でした。検索にも強いなぁ。

今さらながらWebフォント「Google web fonts」の使い方・実装手順メモ | OZPAの表4

導入方法を簡単に説明すると、気に入ったフォントを選んで、headerにWebフォントへのリンクコードを貼る。後は使いたいところのCSSにfont-familyを指定するだけ。

ほんまそれだけ、まじで簡単。

追記(2014/1/11)

Google Web Fontsを物凄くわかりやすく分類している記事がありました。これで好みのフォントを選ぶのが無茶苦茶簡単にできます。オススメです。

あなたは見分けられる!?定番フォント代わりに使えるGoogle Fonts 27書体 | Design | WebNAUT


Webフォントの使用前、使用後

というわけで、こんな感じになりました。なんとなく、シャレオツになったはずだと思ってますが、どないでしょ。

Webフォント使用前

スクリーンショット 2014-01-01 7.37.21

Webフォント使用後

スクリーンショット 2014-01-01 7.34.11

今回はサイトロゴだけじゃなくて、トップメニュー部分にもWebフォント入れてみました。

Webフォントは普通のフォントなので、CSSのtext-shadowとかももちろん使えます。サイトロゴ部分がちょっと存在感が薄い気がしたので、こんなかんじでtext-shadowいれてみます。

text-shadow前

スクリーンショット 2014-01-01 7.58.09

text-shadow後

スクリーンショット 2014-01-01 7.57.45

ええんやないやろうか!!デザインは終わりが無いので、そろそろ切り上げ。最初にトップを見た時の、芋っぽさが解消されました。解消されたはず。やな、まぁデザイン関連は自己満足の領域っすよ。

自分の普段の作業環境はMacなんだけど、念のためWindowsでも確認してみました。良ござんす!!

 

まとめ

いかがでしょう。導入するのにそれほど手間かからないけれど、導入前後のイメージ、結構変わって見えますよね?

パフォーマンスの懸念があるので、記事本文とかに使うのはやめておいたほうが無難です。ただ、トップメニューとかサイドバーのヘッダー部分に導入すると、一気にサイトのイメージが変わるので、知っておいて損はないかと思います。

デザイン、追求果てなし・・・最近サイトデザインばっか触っていて、記事更新が疎かになっていたで、やったことを記事にしてみました。ブログ人生のあるべき姿でございますね。

 

さて、お雑煮食うぞ!!後、今更だけど、あけましておめでとう!!今年もよろしく。

それでは、今日はこのへんで。ハマコー(@hamako9999)でした。

PC-記事下-サブ(Amazon)


  • このエントリーをはてなブックマークに追加
  • Pocket
  • 641
    follow us in feedly

ブログ主について

ハマコー(@hamako9999
hamako9999
ブログとtwitterはAndroid成分多め。WordPressやガジェット少々。たまに子育てやランニングが混ざります。お問い合わせはhamako9999.netについてよりお願いします。

関連記事

Linux初心者から抜け出すための最適本「シェルプログラミング実用テクニック」

しばらく、LinuxやらMacのターミナル触ってると、こんなことを感じる人も多いのでは。 「c

記事を読む

技術評論社の無料小冊子「電脳会議」がITエンジニアにおススメ

この、電脳時代!!音楽でも本でもなんでもかんでも電子化されている昨今だけど、技術評論社が発行してい

記事を読む

応答速度28.8倍。WordPressをApacheからNginxに移行して感じたブログ運営

昔からやろうやろうと思って出来ていなかった、このブログ(Wordpress)のWebサーバをAp

記事を読む

WordPressの任意の記事にだけ目次をつける方法(Table of Contents使用)

ブロガーの皆さん、記事に目次つけてますか?   「つけたい日もあれば、つけたくない日もある」

記事を読む

10分で設定完了。WordPressに監視サービスNewRelicを無料で導入してみた

アカウント登録からはじめて設定完了まで10分程度。恐ろしいほど手軽に導入できるくせに、情報量が半

記事を読む

日本初のDrupalイベントでスピーカー登壇してきました in Drupal Camp Japan Kyoto

春うららかな4月の京都。日本初のDrupalCampというイベントで、光栄にもスピーカー登壇して

記事を読む

フラットデザインな配色やレイアウトを参考にする時におすすめのページ。CategoryやColorShemeでの分類が便利

最近ようやく、WordPressで自分が採用しているテーマStingerのデフォルト状態から、デ

記事を読む

オンラインプログラミング学習の雄、Codecademyのスマフォアプリが出た。その狙いは?

以前から激賞しまくっているCodecademy。 Codecademyがプログラミング学習に最

記事を読む

WordPressのStingerを自由自在にカスタマイズするための8つの修行

Stinger Advent Calendar 2013、19日目担当のハマコー(@hamako9

記事を読む

ValutPress使いは要注意!WordPressバックアップの落とし穴

WordPressで日々ブログを更新されている皆さん、ブログデータのバックアップはとっていますか

記事を読む

a8.net DMMmobile

adsense

ハマコー(@hamako9999
hamako9999

SIerでコンシューマ向けサービスの開発してます。ブログはAndroid成分多め。WordPressやガジェット少々。たまに子育てやランニングが混ざります。

お問い合わせはhamako9999.netについてよりお願いします。

PAGE TOP ↑