2ステップでお手軽簡単な『GoogleWebフォント』を使ってみたよ!「不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。」

くつキッチュ!アイコン wordpressカテゴリへ
前から気になっていたWebフォントを使ってみました♪

Image taken from page 113 of 'Lilliput Lyrics ... Edited by R. Brimley Johnson. Illustrated by Chas. Robinson' by The British Library, on Flickr googleWebフォントを使ってみたよ!サンプル:SSの日記サイトのヘッダー画像とWebFont使用のサイトタイトル

Image taken from page 113 of 'Lilliput Lyrics … Edited by R. Brimley Johnson. Illustrated by Chas. Robinson' by The British Library, on Flickr

まえがき

 

未だ『甥っ子姪っ子の初夏の陣』中でワタワタのくつきでございますε≡≡ヘ( ´Д`)ノ

ということで前から気になっていたウェブフォントですが、ワタワタ中でもお手軽に使える『Google Web Font(グーグルウェブフォント)』を使ってみました。

 

トップのアイキャッチ画像はSSの日記サイトのヘッダーに使用している『Special Elite』
現在当ブログで表示されているのは、今回の記事用にわかりやすいWebフォント『Gloria+Hallelujah(グロリアハレルヤ)』
……となります。
※当ブログの『Gloria+Hallelujah』は、一週間ほどでもう少しスタンダードなフォントに変更する予定です。

 

ちなみに、タイトルの「不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。」ですが、こちらはフォント表示サンプルのテキスト「Grumpy wizards make toxic brew for the evil Queen and Jack.」をGoogleがポエマーっ気たっぷりに翻訳してくれたようです。

元は不思議の国のアリスかなんかでしょうかね?

SSが大ウケして、このセリフをテーマにめちゃくちゃヘンな短編書きたいと言ってました(笑)

 

 

2ステップで使える!『GoogleWebフォント』使用方法:準備

まずは準備として、下記URLより『GoogleWebフォント』のページへ移動し、お好みのフォント詳細ページヘ移動しておきます。

https://www.google.com/fonts

googleWebフォントを使ってみたよ!副題『不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。』 任意のフォントの『クイック使用』をクリック
[クイック使用]よりフォント個別ページへ移動できます。

 

 

2ステップで使える!『GoogleWebフォント』使用方法:設定

いよいよWebフォント表示の設定です。

googleWebフォントを使ってみたよ!副題『不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。』 1のタグ、2のタグ

※画像をクリックすると今回サンプルで使用した『Gloria+Hallelujah(グロリアハレルヤ)』の個別詳細ページへ移動します。

 

 

1.のタグをheader.phpの<head></head>の間に記述します。


<head>

<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>

</head>

 

 

2.style.cssのデフォルトのフォント指定部分を ⇒ 2.のフォント指定のcssに書き換えます。

 font-family: 'Gloria Hallelujah', cursive;

※サンプルコードはGloria+Hallelujahの場合です。

以上です。

 

 

補足

フォント指定部分に関して

『stinger3ver20140327⇒style.cssの場合』37行目あたりにフォントの指定があります。※BASEコメントすぐ下です。


/*-----------------------------
BASE
------------------------------*/

* {
 font-family: arial, helvetica, osaka, "MS PGothic", sans-serif;
 margin: 0px;
 padding: 0px;
}

 

”2希望する文字セットを選択します。”

”2希望する文字セットを選択します。”に関しては、「あまり多くを選択すると読み込みが遅くなります」ということだと思います。

基本的にデフォルトで問題ないかと思います。

 

”希望のスタイルを選択します。”

フォントによっては、太さや斜体などの様々なバリエーションの中から選択することが出来ます。

googleWebフォントを使ってみたよ!副題『不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。』 サンプル:文字スタイル選択

必要に応じて設定してみてください。

 

 

 

部分ごと表示

上記の設定ですと、基本的にはサイト全体の欧文フォントが全てWebフォントに変更されてしまいます。

変わったフォントも少量でしたら抜群に目を引くのですが、使いまくるとただのカオス。

本文までもがあまりに変わったフォントですと、読み易さに支障をきたします↓

googleWebフォントを使ってみたよ!副題『不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。』 サンプル:見出しも本文もウェブフォントの場合

というわけで、見出し、小見出しなどのアイキャッチ要素のある部分以外の本文などはベーシックなままにする、部分ごとのWebフォントの表示設定をしてみたいと思います。

 

部分ごとの表示設定方法

先ほどの設定方法とは違い、デフォルト設定をコメントアウトせず残します。

その後、Webフォントを適用したい部分(h2など)のfont-familyの記述を変更します。

 

h2にだけWebフォント指定した場合

.demo h2 {
font-family: 'Gloria Hallelujah', cursive;
	~省略~
}
h2 {
font-family: 'Gloria Hallelujah', cursive;
	~省略~
}

2ステップでお手軽簡単な『GoogleWebフォント』を使ってみたよ!副題「不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。」 h2と本文

 

記事タイトルにWebフォントを指定した場合


/*記事タイトル*/

.entry-title {
font-family: 'Gloria Hallelujah', cursive;
font-size: 30px;
line-height: 35px;
color: #333;
margin-bottom: 20px;
}

googleWebフォントを使ってみたよ!副題『不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。』 サンプル:chrome

このように必要な項目だけ設定するやり方でしたら、サイドバーのh4(side h4)だけWebフォントを設定し、記事内のh4(post h4)は通常表示など細かい設定も出来ます。

◆記事内h4サンプル◆

googleWebフォントを使ってみたよ!副題『不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。』 サンプル:記事内h4は通常表示

 

◆サイドバーh4サンプル◆

googleWebフォントを使ってみたよ!副題『不機嫌ウィザードは、邪悪な女王とジャックのための毒性醸造を行います。』 サンプル:サイドバー

 

その他:記事内で、任意の箇所にスタイル指定をする

記事編集の際、divタグでスタイル指定をします。

<div style="font-family: 'Gloria Hallelujah', cursive;">Sample Text</div>
Sample Text

こうすると、cssで指定していない箇所でも自由にWebフォントを適用できます。
※header.phpへコードを記述済みの前提です。

 

 以上です。

まとめ

今回お手軽に表示出来る最低限の方法ということで『GoogleWebフォント』の使用方法でしたが、やっぱり欧文だけでなく和文(日本語部分)もカスタマイズしたいところです。

和文対応の日本語Webフォントもあるにはあるのですが、しかしながらこちらはほとんどが有償だったり制限付きで利用可能でも登録が必要だったりちょっぴりハードルがお高め。

日本語Webフォントに関しては、いつか使用する機会があった時にでもトライしてみたいと思います。

 

でっは~(*´∀`*)ノシ
ブログランキング・にほんブログ村へ
にほんブログ村

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

関連記事

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その1『忍者レコメンド』

  rss by TEIA MG, on Flickr もくじ 《くつキッチュ/スクラ

記事を読む

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

ブラウザのみでWordPressが使える無料サービスCloud9を使ってみたッチュ!

クラウド最強エディタ「Cloud9」が、WordPressもブラウザのみでインスト・開発・公開が

記事を読む

html tattoo by webmove, on Flickr

ワードプレスの記事内でコード表示をするには?【WPプラグイン】

html tattoo by webmove, on Flickr もくじ ドキ!トラ

記事を読む

検索しても対策が見つからない!WordPressのバグ忘備録 panic by nate steiner, on Flickr

検索しても対策が見つからない!見出し、行間のWordPressバグ忘備録

    2014/02/28追記: こんな記事を書

記事を読む

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その2『Google Feed API』

フィード取得サービスを利用して『画像付きカテゴリ別記事』を表示させる方法 その2『Google Feed API』

もくじ Laser engraved RSS icon by Book Wor

記事を読む

創作ブログに最適な「LINEトーク吹き出しCSS」で、表示が崩れるときの忘備録 カスタマイズサンプルアイキャッチ画像

創作ブログにピッタリな「LINEトーク風フキダシCSS」の表示が崩れるときの忘備録

あけましておめでとうございます。   会話形式の多いブログにピッタ

記事を読む

Advertising and Rain by Jakob Montrasio, on Flickr ネットオウル『WPblog』の広告表示位置が変わったのでルール範囲内で位置を調整するよ♪

ネットオウル『WPblog』の広告表示位置が変わったのでルール範囲内で位置を調整するよ♪

Flickrの上ヤコブMontrasioによる広告や雨   ネットオウルか

記事を読む

boxo fart by boxo, on Flickr Some rights reserved ネットオウルWPblog利用中方はプラグイン「w3-total-cache」インストールしちゃダメ!ゼッタイ! アイキャッチ画像

ネットオウルWPblog利用中方はプラグイン「w3-total-cache」をインストールしちゃ、ダメ!ゼッタイ!

なあ……ワードプレスなんですぐ死んでしまうん?~~(  ゜  ゜) なあ……なんでなん

記事を読む

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!奥の手! 【アプリケーションの初期化】を試す価値あり!※自己責任でお願いします。

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!

くつきちよこ年末のご挨拶バージョン   登場人物:くつきちよこ ※管理人 

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

amazonJsで「amazonへのレスポンスがパース出来ません」エラーが出たときの対処法

Initial thoughts on Bilski by opensourceway,

記事を読む

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

  • マウスコンピューター/G-Tune