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

関連記事

ワードプレスの記事内にSoundCloudの音楽を埋め込むには?【WPプラグイン】

  追記:2015-02-23 現在はURLコピペのみで簡単に埋め込み出来ます。

記事を読む

html tattoo by webmove, on Flickr

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

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

記事を読む

BrowserLabo亡き後、いろんなチェックサービスでシャドウと角丸のCSSチェックをしてみた "Select your web browser(s) by zipckr, on Flickr

ブラウザ表示チェック3大サービスを無料範囲内で試してみたよ♪

 各ブラウザによっての見え方を改めてテストしてみた Select your w

記事を読む

ああこれSTINGERだなとわかるブログの特徴 検索ボックス編 Magnified Eye_5364c by hoyasmeg, on Flickr

「オッス!オラSTINGER!」……のカスタマイズ、検索ボックス編 あとちょろっとbtn素材配布♪

本日は、『くつキッチュ/SCRAPス!』でもお世話になっておりますWordPressテーマ『

記事を読む

WordPress立ち上げメモ 助けて!TOC+の反映されない(><) TinyMCE Advancedってどんなプラグイン?等 アイキャッチ画像

ドキ!トラブルだらけのワードプレスブログ立ち上げ大会小ネタメモφ(. .)

1週間ほど前にこのブログを立ち上げまして… 思いがけないトラブルや、新規導入のプラグイン等のメモが

記事を読む

業務連絡のお詫びとWP怪奇現象の話 Chrome怪現象?「sample.com ページは機能していません ichipan.phpapps.jp でリダイレクトが繰り返し行われました。 次をお試しください: ページを再読み込みする Cookie を消去する ERR_TOO_MANY_REDIRECTS」 

【業務連絡】素材サイト告知に関するお詫びと、WP怪奇現象の話

    『イチパン!』 ログイン画面 登場人物:くつきちよこ ※管理人

記事を読む

Tumblrボタン(フォロー、共有)設置方法 記事下設置やプロフィールへの設置、その他シェア方法など イチパン!サンプル

WordPressでTumblrボタンを実装してみた(記事下、サイドバーへの設置、その他シェア方法など)

  Share on Tumblr こちら、昨日作ったくつキッチュの姉妹サイト『イチ

記事を読む

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

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

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

photonヤバイ!と思って切ったら、「EWWW Image Optimizer」line1674のエラーでダブルパンチ!……死ぬかと思った! パクリサイトが、パクラレサイトの画像に直リンして画像を盗用するイメージ

サイトをコピーされた? でも、JETPACKのphotonを有効にしてると、「画像の差し替えの反撃」ができないみたい

   直リンで画像を登用される時の説明画像   登場人物:くつきちよこ 

記事を読む

マルチサイト化とかサーバーどうするかとかの雑談会 Money - Savings by 401(K) 2013, on Flickr

流行りに逆らってサーバーを選択した話

  サーバー選びのリアルな話 順調だったwpXクラウドのマルチサイト化(サブディレクトリ型)に影

記事を読む

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

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

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