現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

webフォントNoto Sans Japanese

所要時間目安：約3分

This session is using　 IPv4 　is established in

webフォントNoto Sans Japaneseがとても綺麗

この記事は2016年4月1日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く･戻る

2025年4月24日 (木曜日)本日の人気記事トップ１０

カーメンテナンスWAKO'S

2025年4月24日 (木曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間
  1. ニトリのバスピロー

    風呂枕、バスピローおすすめはニトリ製品 1PV

    先日、お風呂の枕ことバスピローについて書きました。 テレビの女神のマルシェで何年か前にバスピローについて紹介されていたので、 まずはイトーヨーカドーに行ってみましたが、すでに商品はなく…。 その後、い…

    もっと読む

  2. 桜花見

    花見の季節・時期ももうすぐ終わり…。地域により異なるが…。 1PV

    花見の季節が、 花見に時期がもうすぐ終わってしまう…。 幼い頃は、 桜まつりなるものに言ってはいたものの幼心だったせいか、 桜の花見という情緒あふれる日本人ならではの文化を意外と理解できていなかったと…

    もっと読む

  3. Windowsスポットライト画像

    Windowsスポットライト画像保存場所と方法 1PV

    Windows10においてロック画面の時に表示される画像がとてもきれいになりました。 この機能は、Windows10以前のバージョンの時には単なるロック画面でした。 そんな綺麗な画像が気になったので、…

    もっと読む

  1. T32エクストレイルマイナーチェンジ後ステアリング外し方

    エクストレイルT32マイナーチェンジ後ステアリング外し方 36PV

    エクストレイルT32型（NT32も含め）がマイナーチェンジしてから早いもので、もうすぐ2年になります。エンジンなどの大きな変更などはなく、室内の内装デザインや外装のちょっとしたデザイン変化、そして、一…

    もっと読む

  2. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 23PV

    初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  3. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 23PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  1. T32エクストレイルマイナーチェンジ後ステアリング外し方

    エクストレイルT32マイナーチェンジ後ステアリング外し方 36PV

    エクストレイルT32型（NT32も含め）がマイナーチェンジしてから早いもので、もうすぐ2年になります。エンジンなどの大きな変更などはなく、室内の内装デザインや外装のちょっとしたデザイン変化、そして、一…

    もっと読む

  2. キーレスリモコン破損

    車のキーナンバー確認方法。キーレス紛失や壊れた時 23PV

    初めての経験でした。（汗）…。 キーレスエントリー、キーレスリモコンがついた鍵がエンジンを回す時にボキッと折れてしまいました。（汗）…。 プラスチックの本体部分と鉄のキー部分が分裂してしまいました。 …

    もっと読む

  3. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 23PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

今日は2025年4月24日です。

メルカリ招待コード：

webフォントNoto Sans Japanese

以前にwebフォントの導入方法を記載しました。

こちらでは、
webフォントのubuntuを使用しています。

しかし、
ひょんなことからwebフォントでNoto Sans Japaneseというとっても綺麗なフォント（webフォント）があるのを知りました。

この記事を読む方へのオススメ


それは、RBB TODAYのメルマガでサイトを訪れた時です。

なんかやけにフォント（文字）が綺麗だなぁ…。(・・;

と思いソースを拝見させていただきました、。

そしたら、
見たことのないフォント名がありました。

 

それが、
Noto Sans Japaneseというwebフォントです。

もうwebフォントに関してはどのようなものなのか説明は不要かと思いますのでしませんが、

アドセンス336pxPC閲覧記事下表示1つ目コード

Noto Sans Japaneseに関しての説明はWikipediaのものを以下に引用させていただきます。

 

世界中の言語をサポートすることを目標に、Apache License 2.0 のライセンスで配布が開始された。2015年9月29日に、SIL Open Font License 1.1 にライセンス変更。 コンピューターで表示できない文字がある場合、文字の代わりに小さい四角(□)が表示されることが多いが、Googleではそれを"豆腐"と呼んでおり、Webから取り除くためにNoto(no more tofu)フォントを作った

ということですが、

具体的な使い方（方法）は以前の記事と同様です。

ただ、
まだ正式版？ではないようで、
Early Access!にて公開されています。

GoogleFont Early Access!
Google FontのNoto Sans Japanese
Early Access!

正規版は、
GoogleFontsに現在2016年4月1日時点で708種類のフォントがあります。

webフォントのGoogleFonts
708 font families shown
GoogleFonts

 

しかし、
ほんとに綺麗です！！

当サイトでも導入してみようと思い導入してみたのですが、
今までのwebフォントのubuntuに慣れたせいかNoto Sans Japaneseはとっても綺麗なのですが、
inline-heightが若干違ったのでちょっと元に戻してしまいました。

^^;

でも、
明日にはNoto Sans Japaneseにしちゃっているかもしれません。

だって、
本当にとっても綺麗なんだもん！！

びっくりしました。

当サイトでNoto Sans Japaneseを導入した際のスクリーンショットです。

webフォントNoto Sans Japanese

そして、
以下がwebフォントubuntuでのスクリーンショットです。

webフォントubuntu

この画像を見ていただくと一目瞭然ですが、
明らかにNoto Sans Japaneseの方が綺麗です。

しかし、
CSSで調整すれば良いのですが…。

横幅がちょっとだけ広く感じてしまいました。

時間のある時にNoto Sans Japaneseにしたいと思っています。

 

一応具体的な導入方法です。

 

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
 * {
 font-family: "Noto Sans Japanese",sans-serif;
 }

上記コードを、
CSSに追加するだけです。

 

この場合だと、
font-familyにNoto Sans Japanese以外にsans-serifしかないので、

最悪の場合はMSゴシップとかになっちゃうこともあるようです。

なので、
一応、ローカル内にもあるフォントも指定しておいた方が良いのかと思われます。

* {
 font-family: "Noto Sans Japanese","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
 }

といった具合にです。

そうすれば、
Macではヒラギノ角ゴが、
Windows7（WindowsXPでもメイリオ導入済み）以降はメイリオにて表示されます。

 

唯一、
webフォントのデメリットとして良く多くのサイトで書かれていますが、
私がこれまでwebフォントのubuntuを使用してきてページ表示速度が遅いなぁ。

とは感じたことはありません。
（鈍いだけかなぁ…。）

 

参考サイト）

グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？
今日は、Webフォントの話題を。日本語Webフォントは、「使いたい、でも重くなるからちょっと」という人が多いと思います。でも、グーグルがクラウド上でWebフォントを提供し始めたことで……。
impress

Windows10サポート終了まで

【AmazonタイムセールSALE車＆バイク】！


人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」

出展：Amazonタイムセール

人気の商品が日替わりで登場。毎日お得なタイムセール

年金倍増で日本経済は大復活する!デフレの終わり、第二の「高度成長」の始まり
Amazon
楽天市場
Yahooショッピング
メルカリ

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたにおすすめな関連記事

Stinger6右サイドバー上に別広告

AdSense Stinger6 WordPress カスタマイズ

Stinger6右サイドバー上に別広告を表示する方法

はぁ…。やっと、できた！！って何がという感じですが、 とても使い勝手の良いテーマStingerの最新版Stinger6を選ばせて頂いて、四苦八苦の日々が続いていたわけですが、アドセンス広告は1ページ当…

もっと読む

インフィード広告アドセンス

SearchConsole警告なし

PC ツール 伝えたいこと 備忘録 時事ネタ

サイトマップの警告表示を3秒で解決・対処する方法

昨日SearchConsole（旧ウェブマスターツール）にてサイトマップを確認するとサイトマップを送信する画面で「警告」という文字が表示されていました。何かいけないカスタマイズでもしたのか、それとも.…

もっと読む

インフィード広告アドセンス

国民の祝日、山の日

伝えたいこと 備忘録

山の日8月11日で2016年から年間祝日（国民の祝日）が増える

国民の祝日として今現在（2016年1月4日）定義されているのは、 16日です。 （去年までは15日。） なぜ1日増えて16日間となったのかは、 1996年に施行された海の日についで、 今年から山の日が…

もっと読む

インフィード広告アドセンス

クリックアイコン

AdSense スマホ 伝えたいこと 備忘録

クリック率(CTR)や広告配置について考えてみる…。

当ブログはGoogle AdSense（グーグルアドセンス）による広告配信？をしています。そんな中で多くの方々が考えたことのあるであろう広告の配置の仕方についてです。広告配置にはいろいろな配置の場所。…

もっと読む

インフィード広告アドセンス

スマホファースト

Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

WordPressアイキャッチ画像を自動で投稿記事に表示する方法

いまやブログにおいてアイキャッチ画像は無くてはならない存在になりつつあります。 特にWordPressにおいては、基本的にアイキャッチ画像を設定することが出来るようになっているテーマがほとんどです。 …

もっと読む

インフィード広告アドセンス

PC Windows10 カスタマイズ ツール ブラウザChrome 伝えたいこと 備忘録 設定

スクリーンリーダー不要でブラウザ以外も音声再生なWindows標準拡大鏡

Webサイトやご自分で記述した文章などを音声にて読み上げて確認してみたい場合には、Windows標準で搭載されている拡大鏡というアプリを使用すると、メモ帳やテキストエディタやWordなどの文書作成ソフ…

もっと読む

「WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録」の人気記事

入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告


お小遣い稼ぎにアンケート。

Multiplex 広告

Total711


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

この記事タイトルとURLをコピー

-WordPress, カスタマイズ, カスタマイズ, 伝えたいこと, 備忘録
-,

目次に戻る

目次に戻る

コメントを閉じる

comment

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.