Isamu's Blog『Reboot』

【 雑記ブログ 】

ウェブデザインについて【フォント】

フォントについて

ウェブデザインについての第1回です。

今回は、ウェブサイトのフォントをカスタマイズする方法です。

ここでは、はてなブログにおけるフォントの変更方法を説明します。

 

 

Google Fonts

fonts.google.com

Google Fontsのサイトにアクセスし、好きなフォントを選択します。

 

Noto Sans JP

このブログでは、本文に「Noto Sans JP」というフォントを選択しました。

 

Notoのつくフォントは、GoogleとAdobeが共同開発したフォントです。

Notoは「No more tofu」の略で、文字化けした文字は豆腐の形のようですが、「文字化けを起こして豆腐が表示されないように」という意味を込めたものです。

 

Google Fontsのサイトの右側の「Languages」から「Japanese」を選択し、左側上部の「Noto Sans JP」の「+」(Select this font)を押します。

 

下部に詳細が縮小して表示されるので、クリックして詳細表示します。

「CUSTOMIZE」タブをクリックし、フォントウェイト、言語にチェックを入れます。

このサイトでは、フォントウェイトの「light 300」と「regular 400」、言語の「Japanese」にチェックを入れました。

フォントウェイトは読み込み時間(Load Time)の関係上、2つくらいを選択するのが望ましいでしょう。

Load Timeは「CUSTOMIZE」タブ画面の右上に表示されます。

 

「EMBED」タブをクリックし、「Embed Font」のコードをコピーします。 

 <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300,400&subset=japanese" rel="stylesheet">

はてなブログの「設定 ➡ 詳細設定 ➡ headに要素を追加」に、コピーしたコードを追加します。 

CSS

次にGoogle Fontsに戻り、先ほどの詳細表示の「Specify in CSS」のコードを参考にして、はてなブログの「デザイン ➡ カスタマイズ ➡ { }デザインCSS」にコードを追加します。 

/* タイトル */
#title a {
    font-family: 'Noto Sans JP', Sans-serif;
    font-size: 100%;
    font-weight: 400;
}


/* ブログ説明 */
#blog-description {
    font-family: 'Noto Sans JP', Sans-serif;
    font-size: 100%;
    font-weight: 400;
}


/* 全体 */
body {
    font-family: 'Noto Sans JP', Sans-serif;
    font-size: 105%;
    font-weight: 300;
}


/* 本文 */
.entry-content {
    font-size:17px;
}

「font-size」は、テーマにより微調整してください。 

 「font-weight」は「headに要素を追加」で指定した値になりますので、適切な値を指定してください。 

スマートフォン

スマホのデザインをレスポンシブデザインにしていない場合で、スマホのフォントを変更する場合は、「デザイン ➡ スマートフォン ➡ ヘッダ ➡ タイトル下 ➡ スマートフォン用にHTMLを設定する」にコードを追加してください。 

<style type="text/css">

/* タイトル */
#header #title a{
    font-family: 'Noto Sans JP', Sans-serif;
    color: #ffffff;
    font-size:110%;
    font-weight: 400;
}

 

/* ブログ説明 */
#header #blog-description {
    font-family: 'Noto Sans JP', Sans-serif;
    color: #face37;
    font-size:80%;
    font-weight: 400;
}

 

/* 全体 */
body {
    font-family: 'Noto Sans JP', Sans-serif;
    font-size: 105%;
    font-weight: 400;
}

 

/* 本文 */
.entry-content {
    font-size:17px;
}

</style>

 「font-size」や「font-weight」は調整してください。

 

まとめ

昔と違い、CSSによって随分とデザインの変更が楽になりました。

 

フォントはウェブデザインの重要な部分ですので、様々なフォントを使い分けて見やすく読みやすいフォントを適用してください。

 

f:id:futurecre8:20190510072603p:plain