「音楽×テクノロジー」の話題を中心に、DTM、iPhone・iPad・Mac、最新テック情報、ガジェット・書評レビューなんでも書きます。ガンガンいこうぜ!みんなの訪問を、全力で待ってます。

7.22.2017

LIGの記事が読みやすい秘密は「Google Web Fonts」だから導入するぞって話


LIGの秘密 Google Web Fonts 導入したって話

 

どうも、サウンドオルビスです。

みんな大好き 株式会社 LIG ( ※以後 LIG ) 。もうね、むっちゃ好き。デザインも、おもしろいのも、まじめ記事も、とにかく最高です。

LIG の記事は「このライター読みづらいな〜」なんてことは、まずない。なにか、秘密があると思いませんか? 

個人的には、フォント(文字のデザイン)が臭うので、調べてみました。

 

LIG の読みやすさの秘密は Google web fonts の「 Quicksand 」にあった

Ligのフォントを解析

臭う、臭うぞ〜。読者がずっと目にするフォント。 LIG のフォントって、クセがなくて読みやすいんだよな〜って思ってたけど、ついにその秘密を暴いちゃんだからね〜。

さて親愛なる LIG 様よ。そのフォントを Google Chrome 拡張機能「 Whatfont 」で解析してみました。その結果は... ...

Google Web Fonts の「 Quicksand 」 

間違いねぇ〜、臭うのはコイツだ! いい感じに丸くて、親しみあるフォント。

さらに調べると「 Quicksand 」はオンライン無料フォントだってことがわかりました。しかも、ブログテンプレートにたった 2 行加えるだけで、導入できるっていうじゃありませんか。これは導入するしかないでしょう!

それでは、LIG の読みやすさの秘密Google web fonts「 Quicksand 」の導入方法を、解説していきます。

 

Google web fonts「Quicksand」の導入方法

Google web fontsアイキャッチ

さあ、Google web fonts にアクセスしましょう。

https://fonts.google.com/

 

「 Quicksand 」検索して、「 Family Selected 」を開こう

検索とgotit

Google web fontsページ右上の虫眼鏡に「 Quicksand 」と入力し検索。赤文字の「 GOT IT 」をクリック

 

SELECT THIS FONTをクリック

赤文字の「 SELECT THIS FONT 」をクリック

画面下に出た「 Family Selected 」をクリックして、開く。

 

「 Family Selected 」の CUSTOMIZE と EMBED で HTML コードを作成しよう

Family selected customize

何はともあれ CUSTOMIZE を開き、カスタマイズします。「 Quicksand 」の太さ 300 と 400 は細くて読みづらいので、チェックを外しても OK ですよ。

 

Family selected

EMBED を開いてください。指定したフォントの数字が、HTMLコードに反映されているはずです。「 Embed Font 」は、「 STANDARD 」のままで大丈夫です。

 

あなたのブログテンプレートに、Google Web Fonts「 Quicksand 」を記述しよう

<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">

<head></head>内に、↑このコードを記入します。めんどうな方は、コピペでOKですよ。ちなみに「 @IMPORT 」のやり方もありますが、今回は簡単な STANDARD 方でトライしてみました。

 

Googlewebfonts head内の記述方法

Blogger の場合ですが、画像のように記入します。

 

Bodyにquicksandを記述する方法

font-family: 'Quicksand', sans-serif; 

ブログのフォントを指定している場所に記述します。基本的には、body の CSS に書いちゃえば OK ですね。

使っているブログテンプレートによっては、フォントの指定場所が違ったりするので、要確認ですよ。

 

Google web fonts「Quicksand」の導入方法は、終了です。

超絶簡単っ LINE Notify でWebサービス LIG 友人と母に DTMerのため soundorbis

手順通りに試していけば、soundorbis.com のように、憧れの LIG と同じフォントを実現することができます。

photo 超絶簡単っ!「LINE Notify」でWebサービスからの通知をどしどし受けとってみよう!

いいね!!! 今までよりも、もっと自分のブログが好きになってきました。Google web fonts「Quicksand」の導入方法は、これで終了です。

 

まとめ

習うより慣れろ、学ぶとは真似ることである。徹底的に LIG 様から吸収していきたい。

LIGの読みやすさの秘密、Google web fonts の「 Quicksand 」をあなたのブログや、サイトに導入できましたか? あの超巨大サイトと同じフォントが、無料であなたのものに

超、興奮してくるぜ♪( ´▽`)

 

以上、サウンドオルビス(@soundorbis)でした。

親愛なる 株式会社LIG へのリンク

株式会社LIG | 台東区上野にあるウェブ制作会社

soundorbis
このブログを書いてる人
サウンドオルビス フリーBGM アーティスト

よく一緒に読まれている記事

以前の記事  以前の記事
新しい記事  新しい記事