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

関連記事

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 その上「サイトの状況が赤点です」とGoogle様にも怒られました(/_;) アイキャッチ画像 IconDesign by くつきちよこ

「要求されたアクションを実行するには、WordPress が Web サーバーにアクセスする必要があります。 次に進むには FTP の接続情報を入力してください。」とWPに怒られた件 ※解決済み

    Upload出来ない(/_;) ファイルの

記事を読む

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

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

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

記事を読む

Initial thoughts on Bilski by opensourceway, on Flickr

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

Initial thoughts on Bilski by opensourceway,

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

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

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

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

記事を読む

Q&A by opensource.com, on Flickr そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

そんなに良くある感じじゃない質問(検索ワード)への回答 第二弾

検索キーワードで(個人的にツボに入ったという意味での)ヒットしたもの、及び当サイトでは該当す

記事を読む

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

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

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

記事を読む

scream and shout by Mindaugas Danys, on Flickr 『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!時の対処法。

「記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!」場合の対処法。

記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』を適用

記事を読む

くつキッチュ!SCRAPス WPにデフォルトでインストされてるプラグイン『HelloDolly』って一体何者?

WordPress謎のプラグインHelloDollyを有効化してみた結果www

  Photo by Stéfan  いかにもなタイトルですが、釣りじゃありません。 結論から申し

記事を読む

スポンサードリンク

スポンサードリンク

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

スポンサードリンク

スポンサードリンク

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

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

  • くつキッチュ!SCRAPス アイコン 創作支援 カテゴリへ《創作支援》

    くつキッチュ!アイコン カテゴリwordpress全般へ 《WP関係》

    くつキッチュ!アイコン-copyright-著作権カテゴリへ  《著作権関係》

    くつキッチュ!アイコン小ネタ/物語用小ネタ カテゴリへ  《小ネタ/物語用小ネタ etc...》
    ※オンマウスでタイトルが表示されます。




『創作支援屋くつキッチュスクラップス!』は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。