Twenty Thirteenのフォントサイズを変更

「Twenty Thirteen」のデフォルトのフォントサイズは、日本語には大きすぎます。フォントサイズを変更して見やすくします。

はじめに

「Twenty Thirteen」で使用するフォントサイズを変更します。
・本文のフォントサイズを変更
・見出しのフォントサイズを変更

本文のフォントサイズを変更

「style.css」でフォントサイズの指定を追加して、本文のフォントサイズを変更します。以下の例では、「13px」に変更しています。フォントサイズを指定しない場合は、ブラウザで設定されているフォントのサイズが使用されます。

<変更前>

html,
button,
input,
select,
textarea {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
}

<変更後>

html,
button,
input,
select,
textarea {
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 13px;
}

見出しのフォントサイズを変更

「style.css」で、見出しのフォントサイズを変更します。

<変更前>

h1 {
	font-size: 48px;
	margin: 33px 0;
}

h2 {
	font-size: 30px;
	margin: 25px 0;
}

h3 {
	font-size: 22px;
	margin: 22px 0;
}

h4 {
	font-size: 20px;
	margin: 25px 0;
}

h5 {
	font-size: 18px;
	margin: 30px 0;
}

h6 {
	font-size: 16px;
	margin: 36px 0;
}

<変更後>

h1 {
	font-size: 24px;
	margin: 24px 0 0;
}

h2 {
	font-size: 22px;
	margin: 24px 0 0;
}

h3 {
	font-size: 18px;
	margin: 24px 0 8px;
}

h4 {
	font-size: 16px;
	margin: 24px 0 8px;
}

h5 {
	font-size: 14px;
	margin: 24px 0 8px;
}

h6 {
	font-size: 14px;
	margin: 24px 0 8px;
}

おわりに

「Twenty Thirteen」で使用するフォントサイズを変更しました。全体に影響のある指定ですが、個別にも指定個所があるため、すべてのフォントサイズが変更されるわけではありません。サイドバーやコメント欄等は、個別に設定する必要があります。

関連記事(Twenty Thirteenのサイト全体の表示をカスタマイズ)

  1. Twenty Thirteenをメニューからカスタマイズ
  2. Twenty Thirteenの画面の幅を調整
  3. Twenty Thirteenのフォントを等幅フォントに変更
  4. Twenty Thirteenのフォントサイズを変更
  5. Twenty Thirteenの背景色と文字色を変更
  6. Twenty Thirteenの段落のマージンを調整

関連記事(目次)

  1. インターネットで情報発信!
ムームードメイン ロリポップ!レンタルサーバー

コメント記入欄

※メールアドレス(任意入力)は非公開です。コメントはお気軽にどうぞ!

内容を確認して、「コメント送信」ボタンを押してください。

post date*

※日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)