Twenty Thirteenのフォントを等幅フォントに変更

ICT関連の記述では、等幅フォントを使用すると、表示位置を揃えて簡易的な表組みを作成したりと便利なことあります。ICT実験室では、本文を記載する際に等幅フォントを使用します。

はじめに

「Twenty Thirteen」で使用するフォントを、可能な限り日本語の等幅フォント(ゴシック体)に統一します。

すべてのフォント指定を変更

style.cssで「font-family」および「font」で指定されたフォントの種類を、すべて等幅フォント「Osaka-mono, “MS Gothic”, monospace」に変更します。

<変更前>

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

h6 {
	clear: both;
	font-family: Bitter, Georgia, serif;
	line-height: 1.3;
}

code,
kbd,
pre,
samp {
	font-family: monospace, serif;
	font-size: 14px;
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
}

pre {
	background: #f5f5f5;
	color: #666;
	font-family: monospace;
	font-size: 14px;
	margin: 20px 0;
	overflow: auto;
	padding: 20px;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.site-description {
	font: 300 normal 14px Osaka-mono, "MS Gothic", monospace;
	margin: 0;
	padding: 3px 4px;
	text-shadow: 3px 6px 6px rgba(0,0,0,0.2), 0px -5px 16px rgba(255,255,255,0.3);
}

~以下font指定多数~

<変更後>

textarea {
	font-family: Osaka-mono, "MS Gothic", monospace;
	font-size: 13px;
}

h6 {
	clear: both;
	font-family: Osaka-mono, "MS Gothic", monospace;
	line-height: 1.3;
}

code,
kbd,
pre,
samp {
	font-family: Osaka-mono, "MS Gothic", monospace;
	font-size: 14px;
	-webkit-hyphens: none;
	-moz-hyphens:    none;
	-ms-hyphens:     none;
	hyphens:         none;
}

pre {
	background: #bde0a0;
	color: #333;
	font-family: Osaka-mono, "MS Gothic", monospace;
	font-size: 14px;
	margin: 20px 6px;
	overflow: auto;
	padding: 7px;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.site-description {
	font: 300 normal 14px Osaka-mono, "MS Gothic", monospace;
	margin: 0;
	padding: 3px 4px;
	text-shadow: 3px 6px 6px rgba(0,0,0,0.2), 0px -5px 16px rgba(255,255,255,0.3);
}

~以下font指定多数~

おわりに

「Twenty Thirteen」で使用するフォントを等幅フォントに変更しました。「Osaka-mono, “MS Gothic”, monospace」の指定は、試行錯誤の結果です。フォント名に”MS ゴシック”のように日本語名の指定を含めると、IEでは英字が日本語ではなく英字の等幅フォントになるなど、うまく表示されないことが多々あるので、IE、Chrome、Firefoxなどいろいろなブラウザで表示確認することが必要になります。

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

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

関連記事(目次)

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

コメント記入欄

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

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

post date*

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