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

関連記事

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

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

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

記事を読む

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像 Favicons by Loozrboy, on Flickr

「サイトの名刺?」ファビコン設置方法 -ファビコンテスト前哨戦-

本日はサイトの名刺『ファビコン』に関しての記事です。 Favicons by Loozrb

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

マウスコンピュータのHDが壊れました illust by 3104o ©佐藤利音

ヱ□カテゴリにアドセンスを表示させない『Display Widgets』『Widget Logic』は創作家サイトに必須のWPプラグイン!

26歳社畜之図 佐藤利音 on Twitter  ハイ、広告表示されてないですね?

記事を読む

サイトの名刺ファビコンテスト前哨戦-ファビコン設置方法-* アイキャッチ画像

動くファビコン、今ならアリ?

最近とんと見かけなくなった気がする動くファビコン… 今ならすごく目立つ気もしますが…実

記事を読む

とつぜんですがここでクイズです。「発酵」に関する画像にチェックを入れてください。

面倒な画像認証を楽しいぷちクイズにできるGoogleAPI『reCAPTCHA』設定方法♪

※ダミー認証画像です(笑)くつきちよこ 登場人物:くつきちよこ ※管理人   佐藤 ※ゲス

記事を読む

html tattoo by webmove, on Flickr

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

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

記事を読む

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

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

記事を読む

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

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

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

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Time limit is exhausted. Please reload CAPTCHA.

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

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

  • パソコン工房「CLIP STUDIO PAINT PRO推奨パソコン」エントリーモデル登場