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

関連記事

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

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

rss_watercolor_icon by mfinleydesigns, on Flic

記事を読む

html tattoo by webmove, on Flickr

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

俺の妹が?モバイルサイトを爆速にしてくれるAMP(アンプ)を、WPプラグインで導入したら、エラーが出たので対処してみた件 「PageSpeed Insights」にて、AMP導入後の爆速さ!!!

俺の妹が?モバイルサイトを爆速にしてくれるAMP(アンプ)を、WPプラグインで導入したら、本当に爆速になった件

AMPページサンプル 登場人物:くつきちよこ ※管理人   佐藤 ※ゲスト 本日は、サイ

記事を読む

shout! by su neko, on Flickr Wordpressの画像編集に絶望したーっ アイキャッチ画像

WordPress3.9更新後の画像編集画面に絶望したーっ!…ので、よく使うスタイル指定をメモメモ…

なんだか最近Wordpressの画像編集機能が微妙です。 3.9に更新してからというも

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

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

Initial thoughts on Bilski by opensourceway,

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

Photo by Flickr CJ'sフォトストリーム

Stingerの『Page Top↑』を可愛くカスタマイズしてみた♪

    Stingerで『Page Top↑』を可愛くカスタマイズしてみた♪ WordPressブ

記事を読む

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

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

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