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

フォントについて

ウェブデザインについての第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）を押します。

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

head

「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>