一撃でブログの雰囲気をガラリと変える方法 @font-face | アメブロカスタマイズ辞典

アメブロカスタマイズ辞典

「アメブロカスタマイズ」など多数のキーワードで検索順位1位を獲得する実績
ウェブ制作や集客コンサル、SEOコンサルなどのお仕事もお気軽にご相談ください!

@font-face

自分のブログ、デザインに悩んだり色々あると思います。

自分のブログにしかないオリジナリティを出すには?そんな風に悩んだりする事もしばしば・・・・

タイトルの通り、実は一撃で自分のブログの雰囲気を変える方法があります!

フォントです!

ブログは特にテキスト中心のページが多いと思います。

テキストが多いからこそ、フォントを変える事で劇的に雰囲気が変わります!

でも普通にフォントを指定するとなると、WindowsとMac、環境によってインストールされてるフォントが異なります。

簡単に言うと、お使いのPCによって見え方(字体)が違うのです!

これは本当に厄介でいつも悩まされます・・・・

そこでこんな解決策があります!

それが@font-faceです!

環境に左右されずに同じフォントで見せる技です!

どう言う事かというと、フォントファイルをサーバーにアップロードしてそれを読み込んで表示させます!

そうすることによって、どのような環境でも同じフォントで見せれます!

でもフォントを変えるだけでそんな劇的に雰囲気が変わるかぁ?

とか思っちゃったら想像して下さい。

自分のブログの文字が全部”手書き風”になったらどうですか?

おそらくビックリするくらい雰囲気は変わります(・∀・)


でも注意する点がいくつかあります。

フォントって実は”作品”なんです。
作者の方が1つ1つ気が遠くなるような作業を繰り返して作って行きます。
実は、僕も昔挑戦した事がありますが、途中で断念しました・・・・
そんな苦労の結晶のようなフォントにはもちろん著作権があります。
WEBFONTとして使用して良いかなど、フォントによっては禁止されてる物もありますので、
十分注意して、WEBFONTとして使って良い物を使いましょう。

もうひとつ、フォントファイルって実はめっちゃ重たいんです・・・
重いファイルだと8Mとか普通にあります。
当たり前ですが重たいファイルだと読み込むのにも時間がかかって、
テキストが表示されるまでにイライラして待つ事になりかねません。
重たいフォントファイルはWEBFONTとしては不向きなので避けましょう。
目安は1M、この辺がギリギリストレス無く表示される重さだと思います。


では上記に注意しながらご紹介します!

まずはこちらの記事をご覧下さい!
WEBFONTとして使用OKなモノをリストアップしてくれてます!
記載が無い分には作者に問い合わせて確認してくれてるので間違いないと思います!
WebFontsとして利用出来るフリーの和文フォント ヨモツネットさん素晴らしい記事ありがとうございます!

ヨモツネットさんがご紹介してる他にも沢山のフリーフォントが存在します。

そこはGoogle先生に聞いてみるのが一番かと思いますw

ちなみにヨモツさんところのフォントはCinecaptionだと思います。


フォントをダウンロードしたら、こんな拡張子のファイルがあると思います。
.ttf(TrueType)または.otf(OpenType)こんな拡張子が付いてると思います。(圧縮されてると思うので解凍して下さいね)

そのまま使いたいのですが、

ここでまたIE(Internet Explorer)さんがやってくれます!
この.ttfや.otfじゃなくて.eotという独自の拡張子しか認識しないという、なんとも面倒な仕様なんですね・・・

こうなってくると、ttfまたはotfとeotを両方サーバーに上げるしかありません。

そこでまずeotを作らなければ行けません。でもご安心を!全自動でやってくれるサイトがあります!
ttf2eot
ダウンロードしたフォント.ttfファイルを選択して、Converrt to .eotというボタンを押すだけで、
勝手に出来て、勝手にダウンロードします。

出来上がったfont.eotファイルとfont.ttfファイルを外部のサーバーにアップロードしておいて下さい。


ではCSSの指定方法を書きます!

@font-faceをCSSで指定する



CSS編集にこう書きます。

@font-face {
font-family: 'フォント名'; /*フォントの名前を入れます*/
src: url(http://www.hogehoge.com/フォント名.eot); /*IE用のeotファイルURL*/
src: local('フォント名'), local('フォント名'), /*もし指定フォントを閲覧者が持ってる場合、ローカルを参照*/
url(http://www.hogehoge.com/フォント名.ttf) format('truetype'); /*IE以外の指定*/
}



昔はこんな書き方じゃなかったんだけど、今はこれが良いらしいです。
Bulletproof @font-face syntax参照


あとはfont-familyで指定するだけです!


ブログ全体に指定するには、

body {font-family: 'フォント名';}



記事のタイトルだけ変えるんだったら

.entry h3.title {font-family: 'フォント名';}



サイドバーのタイトルは?

h4.menu_title {font-family: 'フォント名';}




使いたいフォントがあるけど、重たくて表示に時間がかかる場合は、記事のタイトルのみとかに使うと軽いです!


さてどうでしょうか??難易度的には結構高めなのかな?

でもこれが出来たら、雰囲気は抜群に変わりますので、挑戦してみる価値はありそうです!


最後に、前の記事でフリーサーバーをご紹介しましたが、コメントにてデータ保管用に使うのは規約違反とのご指摘があるように、

ほとんどの無料サーバーがデータ保管だけの為に使う事は禁止していると思います。

でも今はサーバーも本当に安く借りれる時代ですので、これを機に借りてしまうのも良いかもしれません!

または、どなたかフリーのストレージで『ここ使えるんじゃない?』って情報お持ちでしたら、是非ご教授くださいm(..)m

フリーのオンラインストレージなんて山ほどあるんですが、
定期的にアップロードしたファイルのURLが変わったり、イマイチ探しきれてません。


では、今日はこの辺で!