WordPressでGoogle Webフォント日本語早期アクセスを表示させる

SHARE

こんにちは。りょうへいです！
今回も実装するまでにいろいろと試行錯誤を繰り返していましたが

やっとちゃんとできました！

何がかって？

ウェブフォントを適用させて
WordPressブログに美しいフォントで
表示させることができました！

 

きっかけとしては
ブログのタイトル部分が寂しいので
ロゴ画像でも作ろうかなー！

なんて思って、調べてみると
今どきはロゴ画像作成より
ウェブフォントでスマートに
修飾するのが良さげだったんです。

これはぜひ利用してみたい〜！
と少し前から目論んでいたのですが
なかなかうまいこと適用できなくて…

いろいろと調べてみて、そういった記事を参考に
同じようにやっても全然うまくいかなかったり…

しばらく色々と試行錯誤していたんですよぉ〜！

とりあえず、参考にしたのが
ウェブフォントに関する古い情報だったり
自分の環境には効かなかったり…

かなり踊らされてｗ
ハマってしまったのでした (ToT)

当記事では利用方法が判りにくかった
Googleウェブフォントの設定方法を
しっかり書いておこうと思います♪

 

[2017年11月版] Google Fonts + 日本語 早期アクセスをWordPressに設定する方法

ウェブフォントを利用する方法はいくつかあるようで
@importを使う方法や <link>タグを使う 方法等があります。
りょうへいの環境としてはWordPressテーマにブログマーケッターJUNICHIさんという方が
STINGER5というテーマをもとに作成したものを
無料配布されている「Giraffe」を利用させてもらっています♪

なので、WordPressテーマ「Giraffe」や「STINGER5」を利用している方の参考になったらいいなって思っています♪

 

Webフォント って何？

機種や環境、デバイスに依存せずに、Web上で取得して表示させることができる、美しいフォントなのです！

ブログタイトルなどに画像でロゴを作って表示させるなんてもう古い！グラフィカルだったりおしゃれで特徴的なフォントを使用しつつ、
テキストとして認識されるからSEOにも強い！

これは使わない手はありません。

しかし、英数文字のフォントは、かなり個性的な様々なフォントが存在しているのですが
当ブログを含め、りょうへいの運営サイトは日本語のタイトルが多いんです(^^;

そうなると、日本語が表示できるウェブフォントを利用しないとなりません。
しかも、日本語OKなウェブフォントってあまり無いようでしたが
ちょっと探してみたら Googleが提供している
素敵なWebフォントを発見したので適用させてみました。

 

どんなフォントがあるの？

現在公開されいるフォントはこんな感じ↓

けっこうかわいいものもありました。
普通にメイリオ表示よりも絶対見栄えがよくなりそう！

 

設定1 利用するフォントの選定

Google Fonts + Japanese Early Access (日本語早期アクセス) の公式サイトで利用したいフォントをチェックしましょう。

次に利用するフォントを決めたら ↑の①と②のタグをテキストエディタなどにコピペしておいてメモしておきます。

 

設定２ 子テーマのheader.php と style.css に追記してカスタマイズ

設定方法は簡単でした！
こちら↓のエントリーで実施した子テーマのファイルに編集を行います。

[WordPress]親テーマに施しちゃったカスタマイズを子テーマに移行する

子テーマファイルの編集は、WordPress管理画面の「外観」→「テーマ」の編集からも可能ですが
安全のため、FTPを介して元のファイルのバックアップをとりつつ
ローカルで作業して、編集後のファイルを再びアップロードして反映させていました。

りょうへいはつい色々試してしまい、WordPress環境を破壊することがけっこう多いもので、最近はちょっと作業も慎重になってきました(^^;

 

テーマヘッダー(header.php) に控えておいた①をコピペで追記

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]> <html class="i7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]> <html class="ie" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
<script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script>
<meta charset="<?php bloginfo('charset'); ?>" />

7行目と8行目が追記した内容です。
<head>タグの直下に追記しました。
上記の例では、Google Webフォント２種を利用することにしたので２つ分のタグをコピペしています♪

 

スタイルシート(style.css) に控えておいた②をコピペ追記

style.cssの編集の前に、元の style.css のチェックからはじめましょう。

テキストエディタなどで「font-family」でCSSの中を検索してみると
既存のフォト設定を行っているコードを見つけることができます。

つまり、そこが追記するターゲットです！

* {
  font-family:"Rounded Mplus 1c",  "メイリオ", Meiryo,  "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
  margin: 0px;
  padding: 0px;
}
main, article, aside, header, canvas, details, figcaption, figure, footer, nav, section, summary {
  display: block;
}
body {
  min-width: 320px;
  word-wrap: break-word;
  background-color:#f2f2f2;
}
body.mceContentBody {
  background-color:#fff;
}

/*ブログタイトル*/

header .sitename {
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  line-height: 32px;
  font-family:  "メイリオ", Meiryo,  "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif;
  padding: 10px 0px 0px;
  margin-bottom: 10px;
}
header .sitename a {
  font-family: "Nico Moji";
  color: #333;
  text-decoration: none;
  font-weight: extra bold;
}
header .sitename a:hover {
  -moz-opacity: 0.8;
  opacity: 0.8;
}

 

（１）上記のコードの2行目のフォント指定のはじめに利用したいフォントを追記
全部のフォントを設定している部分のはじめに利用したいWebフォントを追記しました。
これで、通常の文章も「Rounded Mplus 1c」フォントになりました！

（2）「ブログのタイトル」のフォント指定を 「Nico Moji」フォントにしたいので30行目を追加して設定しています。元のコードにはフォント指定自体が無かったので追記しました。

 

ついにGoogle Web Fontが適用できたよ！

Webフォント適用前のブログタイトル部分
 
                 ↓

Webフォント適用後のブログタイトル部分 （ニコモジ を利用）

残念ながらニコモジフォントには漢字はありません。
そのため、優先順位として、その次に指定されている
フォントが適用されて漢字が表示されることになります。

ニコモジを利用してみて判ったのですが
漢字と織り交ざって表示されてもなかなか良い感じになりました！
（筆者の個人的感想ですｗ）

イケるよ！ すごいよ ニコモジ！

個人的に気に入ったので、しばらくコレでいってみようと思います♪

あと、タイトル以外に適用させた Rounded Mplus 1c フォントは
ちょっと丸文字っぽいテイストでかわいいのが気に入りました！
（いま、この文章をご覧いただいているフォントです）

 

あとがき：ウェブフォントをWordPressブログに適用させてみた感想

Webフォントを適用させると
ブログの雰囲気もけっこう変わるので
効果的に利用してみるのがよさそうです！

※自分の場合は、気に入ってしまったので全部に適用させておいて、そういう事言ってますｗ

今回、ウェブフォントの設定は
りょうへいの無知によりｗ
少々手こずってしまいましたが
やってみてよかったです♪

正しい設定が判ったら途端にｗ
意外と簡単なカスタマイズだということがわかりましたので！

この記事を読んでみて
ちょっと試してみようかな♪

なんて気になったら
あなたも是非チャレンジしてみてくださいね♪

 

当ブログ「ほぼゼロ」では、以下のような
WordPressに関連した記事を他にも書いていますので
よろしかったら、そちらもあわせて読んでみてくださいね♪

WordPressブログトップの記事一覧にインフィード広告を溶け込ませて表示する方法

WordPressプラグイン Contact Form7 で「お問い合わせ」フォームを追加する方法

既存投稿記事をコピーですぐに新規作成できるWordPressプラグイン Duplicate Post が便利

りょうへい諸々ブログランキングにも参加中です♪
ランキングバナークリックで応援よろしくお願いします♪


WordPressランキング
にほんブログ村 IT技術ブログ CMSへ
にほんブログ村

 

 

よく読まれている記事

9 COMMENTS

まりあん

はじめまして
ブログサークルから来ました。
フォローありがとうございます♪
フォローと、ツイートと
Twitterの相互フォローさせて頂きましｔｑ～。よろしくお願いしますー。

返信する
ryohei

まりあんさん コメントありがとうございますm(__)m
数カ月前レンタルサーバーってなに？というところから始めたブログですので、何かの参考になれたら嬉しいです(^^)>
Twitterもとりあえず開設した程度だったのでありがとうございます♪

返信する
まりあん

こんばんは。
afi-bのASPお使いなんですか。
すごいですね。
私、100記事位の時に
審査申し込んで落ちましたー。
広告貼ってるだけじゃねー。
今は少しはマシかなぁ。
そろそろリベンジ審査申し込もうかなー。
WordPressも、レンタルサーバー
借りるようになったら勉強しないとです。
ツイートとぽち応援させて頂きました。

返信する
ryohei

まりあんさん コメントありがとうございます！
ええ！？afbって申し込みで審査落ちなんてあるんですね…
私の右ウィジェットのバナーで募集してるくらいなので今は雰囲気変わってるかもしれません。
このブログ見直してみたらまだ35記事でした(汗
やっぱWordPressだと何か違うのかもしれません。
あと一通りのASPさん普通に取得してました。稼ぎはいまだほぼゼロですが(^^;
りょうへいはA8セルフバックでお金作ってレンサバ代にしてはじめました！
といっても激安Quiccaさんなんで1年で４千円もしてません(汗
キャンペーンで .comドメインも１個もらいまして、そちらは別サイトで活用しています♪
レンサバもちょっと前と比べるとかなりリーズナブルなもの多いので
無料体験ででもはじめてWordPressしてみるといろいろ勉強になりますよ♪

返信する
まりあん

こんにちはー♪
働いてる人はセルフ利用で
クレジットカード作って現金貰えるのをやって
現金ゲットという手が使えますよね。

私は働いてないから楽天と
ジャパンネット銀行以外は落ちたー。
なので働いてた時に作ったクレカは
下手に解約出来ないのよね。

今年の５月に審査申し込んで落ちました。
えぇ！落ちるんだーとびっくりしちゃった。
ははは。

私はまだ
Ａ8ともしもと、
リンクシェアとＴＧアフィリエイト
アイモバイル、アクセストレードと
インフォトップ、

あとは落ちたので間あけてるところ。
Ａ8は158円成果、
リンクシェアは100円成果
あとはマジほんの0円。
ユーチューブが61円、大笑い。

地道にやるしか無いもんね。
レンサバ代稼いでからスタートしたんだから
すごいね～！

フジト

こんにちは。
WEBフォント、今までより個性あふれるフォントですね。
記事内容に合わせたフォントを選んだりと楽しく使えそうです。
WEBフォントを紹介して頂きありがとうございました。

返信する
ryohei

フジトさん コメントありがとうございます！
Webフォント楽しいです！
やってみて発見したのはニコ文字は漢字ないけどほかのフォントと合わせても味が出ることがわかりました♪

返信する
ryohei

まりあんさん クレカの件、失礼いたしました。
やはり環境や境遇は人さまざま。
もっと視野を広げなくてはと痛感いたしました。
クレカ不要のレンサバ体験ネタを追加しましたが記事書くの時間かかりすぎです(꒪ཀ꒪」∠)

ASPはTGとimobile、アクセストレードはまだ持ってませんでした！ASPコレクターなのでチェックしておきますw

成果についてはまとめられてないのでショボい初心者アフィリエイターのリアル暴露ネタとして近く書きたいと思います(｀・ω・´)ゝ

返信する

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

前の記事

[WordPress]親テーマに施しちゃったカスタマイズを子テ…

次の記事

WordPressプラグイン Contact Form7 で「…