Let's Enjoy Single Life

from my delightful room

【ブログの彩はこれでバッチリ!】身に付けたい『ウェブフォント』をWordPressで使う方法

      2016/05/04

ウェブフォントでもっとブログが楽しくなる!

Sponsored Links

こんにちは!さわひで(@DelightfulRoom)です。

みなさんはウェブフォントを知っていますか?

普通のフォントは、ローカルPCに保存してあるフォントデータをウェブブラウザなどが使って表示しています。(ローカルPCとは、自分のパソコンのことです。)

ですが、ウェブフォントならリモートに保存されているフォントデータを使うことができるんです!(リモートとは、広大なネット世界のことです。)

ネットを見ている時に気になるフォントを見つけたら・・すぐにそれを自分のブログに取り入れることができるんです。すごいですよね!

ここでウェブフォントがどんなものか、いくつか面白いフォントを見てみましょう。まずは、僕の大好きな「銀魂」のタイトル風フォントからです。

 

銀魂のタイトルみたいでしょう?

 

次は女の子から ”カワイイ!” って言われそうなポップなフォントです。

 

おんなのにピッタリなフォント。

 

こんなのだってあります。

 

ABCDEFGHIJKLMN

 

面白くないですか?ウェブの世界には星の数ほどフォントが存在しています。
その中の気に入ったフォントを自分のブログに取り入れてみませんか?

ウェブフォントを使う時に気をつけて欲しいのは、アルファベットだけしか用意されてないもの、漢字は少ししか用意されてないものなど様々なフォントがあるということです。

それでは、ウェブフォントの使い方の説明をします。
まずは注意から読んで下さい。

気に入ったフォントが有償の可能性もあります。ライセンスには十分注意して下さい。

今回はウェブフォントをダウンロードして、WordPressのサーバーにアップロード、WordPressのブログで使うことを目標に説明を進めます。

この使い方を身に付ければ、ウェブから直接使う方法なんてカンタンなんです。

ウェブフォントの使い方

● ウェブフォントのダウンロード

まずはウェブフォント探しから始めましょう。ネットで探してみて下さい。
この記事を書く時に使った面白いフォントがたくさん紹介してあるサイトへのリンクも貼っておきます。

【デザイナーお役立ち】商用可・デザイン性の高いフリーフォント&お遊び – NAVER まとめ

無料で使える日本語フォント20選「人気順」 | creive【クリーブ】

気に入ったフォントが見つかったらダウンロードしましょう。

説明のためのサンプルには『たぬき油性マジック』というフォントを選びました。『たぬき油性マジック』はコチラのページからダウンロードできます。

フリーフォント『たぬき油性マジック』を公開しました。 | たぬきフォント
たぬき油性マジック …

ページを下にスクロールさせて行くと「ダウンロードリンク」というところが見つかります。そこをクリックしてzipファイルを保存して下さい。

保存したzipファイルを解凍するとtxtファイルttfファイルが現れました。必要なのはttfファイルだけですが、txtファイルにも目を通しておきましょう。

 

● ウェブフォントのアップロード

次にttfファイルをWordPressのあるサーバーにアップロードします。ftpクライアントを使ってアップロードして下さい。

サンプルではttfファイルを

このパスに保存しました。”ブログのURL” のところはみなさんのブログのURLに置き換えてみて下さい。
次にあるpublic_htmlフォルダは僕の使っているサーバーが「Xserver」なので存在します。みなさんの環境ではこのフォルダはないかも知れません。

パスの最後の方にあるfontフォルダは、今さっき僕が作ったフォルダです。

 

● CSSコードの記述1

次にウェブフォントを使うためのCSSコードを書きましょう。コードを追加するファイルはWordPressの ”style.css” です。

ウェブフォントを使うためにはニックネームを付けて、フォントへのパスを教える必要があります。
そのためにはCSSの ”@font-face” を使います。下のコードを見て下さい。

こんな感じで使います。

font-family属性の ”フォントのニックネーム” のところに他のフォントとカブらない好きなニックネームを入れて下さい。
サンプルでは ”TanukiMagic” と入れました。

src属性にはフォントへのパスを書きます。パスの最後にある
フォントファイルの名前” にはttfファイルの名前を入れて下さい。
サンプルでは ”TanukiMagic.ttf” と入れました。

src属性の最後にformatというのが付いてますよね。これはあまり深く考えなくてOKです。
ttfファイルなら ”truetype” と、otfファイルなら ”opentype” と入れて下さい。

このコードをstyle.cssファイルの好きな場所に書き込めばOKです。

 

気が付いた方もいると思いますが、パスの ”public_html” の部分がなくなっていますよね。

僕のサーバーは「Xserver」でした。使用しているサーバーなどの環境によって様々ですが ”ブログのURL” にアクセスするとpublic_htmlフォルダの中にアクセスするようになっています。
そのためフォントへのパスはこういう形になるんです。(分かりにくいですね~・・)

重要なのはパスを指定してもウェブフォントが使えない場合は、パスが間違っている可能性があるということです。その時はパスの見直しをして下さい。


 

● CSSコードの記述2

CSSコードの追加点はもう1ヶ所あります。それは、使用したい場所へウェブフォントを適応させる記述です。

サンプルに付けたニックネームは ”TanukiMagic” でした。
ウェブフォントを使いたい場所に次のようなコードを書いて下さい。

上のコードを見ると、サンプルではdivタグにウェブフォントを適応させているのが分かります。使う場所に応じて他のhtmlタグやクラス、IDなどをタグセレクタに指定して下さい。

font-family属性の1番最初のパラメータが『たぬき油性マジック』に付けたニックネームになっているのが分かります。このようにしてウェブフォントを適応させるんです。

font-familyにはもう2つパラメータが指定してあります。これは別のフォントのニックネームです。前で指定したフォントが使えなかった場合、次に使って欲しい候補のリストなんです。

サンプルの場合は “TanukiMagic” がなかったら ”Oswald” を使って欲しいという意味になります。

その他の属性の細かい説明は省きますが
font-sizeはフォントの大きさを決める属性です。
colorはフォントの色を決める属性なんです。

これで完成です!
それでは反映されているかチェックしてみましょう。

 

「 この文章は ”TanukiMagic” を使用しています。これは面白いフォントですね!漢字もちゃんと出力されています。 」

まとめ

ウェブフォントが使えるようになると色んなフォントを試したくなりますよ!

 - HTML・CSS | >

Sponsored Links1

Sponsored Links

Sponsored Links1

Sponsored Links

さわひで


執筆者のさわひでです。
1000000PVを目指して始めたブログですが・・・
今のところその気配は全くありません。
ヘンなブログですが、楽しい記事でいっぱいです♪

この記事で笑った方は是非、SNSの「いいね!」を下さい!

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

  絶対面白い!関連記事はいかがですか?

黒板消し
WordPress『STINGER5』で「カテゴリ・タグ、検索結果一覧ページ」の見出しを表示させない方法

Prologue 『STINGER5』でカテゴリやタグの一覧ページを開くと表示さ …

リラッくまのストラップ
【ブログの完成度を上げよう!】WordPressのブログに『ファビコン』を導入する方法

もう1つのブログの顔、ファビコンを付けてみよう! さわひで(@Delightfu …

あやつり人形
【CSSでアニメーション!】transformとtransitionでクルクル回るイメージをブログに取り入れよう

CSSでアニメーションが作れる!? さわひで(@DelightfulRoom)で …

ガラスの玉_影
【プレミアム・イメージの作り方】box-shadowでブログのイメージを立体的に見せよう【影がつくよ!】

box-shadowを使ってブログをアートに! みなさんはCSSのbox-sha …

積み木
【Genericons】クールに記事をデコれる『アイコンフォント』を使ってみよう!【WordPress-STINGER5】

アイコンフォントなら記事を書くのが楽しくなる♪ さわひで(@Delightful …

question
【お手軽!】WordPressテーマ『STINGER5』でイメージを横に並べる方法【※positionは一切不使用です】

STINGER5ってイメージが横に並ばない・・・ さわひで(@Delightfu …

つないだ手
【ShareHtml】カッコ良いリンクをブログの記事に貼ろう!【プラグインは不使用です】

テキストだけのリンクを卒業しよう ブログに貼り付けるリンクはカッコ良くキメたいで …