Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

❶ 導入チュートリアル / @Noto Sans Japanese(β版)

おとこわり(お断り←)
β版です。今後の予告なく変更の可能性ありなので、急に使えなくなったりする場合もあります。僕も既に1度ありました?w?

あくまで16.06.24現在の内容です。予めご了承下さい(。•ㅅ•。)? 

 

 

 

 

 

 

 

 

Noto Sans Japanese(β版)

 Google Font / Early Access  

f:id:DDramonQ:20160613225939j:image

 (ページ中段辺りにあります)

 

上記のページに導入方法が書いてあります。

が、今回ここでも改めて「Noto Sans を、はてなブログに導入する方法」を解説したいと思います。

 

 

 

 

導入方法

Webフォントをブログに導入する方法(コード)は、大きく分けて3種類あります。

1, <link href= タイプ

2, @import タイプ

3, Javascript タイプ

 

 

 

今回は、他の2フォント(M+, IPA)も@import タイプで解説します

又機会があれば、他の方法も書きたいと思います。

 

導入チュートリアル

❶以下のコードをコピー

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
      
body
記事本文の事を示しています。
{
   font-family: 'Noto Sans Japanese' ;
   font-weight
フォントの太さをここで指定します。
400-- 一般的な記事本文の文字の太さ
700 -- 太字
:700;
   font-size
フォントの大きさを決定します。
Webのフォントの大きさの基準は、一般的に16pxです。
:20px;
}
 
 
 
 

❷ブログ管理画面/  デザイン /カスタマイズ / カスタムCSS

/* <system section= --- @import..... --- /* </system> */

下に一旦ペーストして…

f:id:DDramonQ:20160624215338j:plain

f:id:DDramonQ:20160624215342j:plain

f:id:DDramonQ:20160624215344j:plain

『 設定を保存』をお忘れなく?

 

 

 

導入に功すれば、こんな感じに。。

f:id:DDramonQ:20160624215702j:plain

 

 

 
?必ず @import url(http://fonts.googleapis....sansjapanese.css);の部分を1番上

テーマストアのコード
/*system ---- system*/ の部分
の上に@import.... sansjapanese.css); が来るようにしないと、Noto Sans Japaneseが適用されません。︎

"順番"が非常に重要です。必ず、図の様になる様にしましょう。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 導入できたでしょうか。できない場合は、今一度、セミコロンやダブルクオーテーションマークが抜けていないか、確認して下さいね。一つでも抜けていたり、多かったりすると、正しく表示されませんので注意が必要です(*⚫︎ー⚫︎)b ?w
 
さて、これで設定は完了です。後はいつも通りで大丈夫です。「 」「 i 」ボタンを押せば太字, イタリックになります。  
 
ここではあえて「太字・大きい文字」に設定してあります。フォントがキチンと導入できたか、分かりやすくする為です。
導入が確認できた方は、
   - font-weight:400;
       

   - font-size:16px;      /   もしくは   /  
   - font-size:100%;


にして下さいね~(。•ㅅ•。)? >

f:id:DDramonQ:20160624215347p:plain

   ↓↓

f:id:DDramonQ:20160624215710j:plain

 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

「本文全体の文字を太くしたい人/ 細くしたい人」は引き続き、以下をご覧下さい。
 
 
 
 
 
 
 

本文全体を「太いフォント/ 細いフォント 」にしたい人は

使えるフォントの太さ

ソースファイルを確認しました。使える太さは、
100,  300, 400, 500, 700, 900
 
の6種類です。400が通常 700が太字として、一般的には使われています。
要領は先ほどと同じです。
Jamp back↑      font-weight : ##   ;


の箇所
に先の 6種類 の好きな値に変えれば、太さが変わります。
 
 
 
 
 
 
 
 
 
 
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️