TwentyTwelve サイト全体の文字(フォント/色/大きさ)の設定

ワードプレステーマTwentyTwelveのサイト全体の文字(フォント/色/大きさ)の設定の仕方です。

とは言え、基本的にデフォルトのままでも全然いぃとは思います。強いて言うなら、フォントを読みやすくする程度でしょうか。変更されたい方は、以下を参考に変えてみて下さい。

それでは、管理画面より「外観」⇒「テーマ編集」からスタイルシートを開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

スタイルシートの中から次の部分を探して下さい。

/* =Basic structure
-------------------------------------------------------------- */

/* Body, links, basics */
html {
	font-size: 87.5%;
}
body {
	font-size: 14px;
	font-size: 1rem;
	font-family: Helvetica, Arial, sans-serif;
	text-rendering: optimizeLegibility;
	color: #444;
}
body.custom-font-enabled {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

↓コレを以下の様に追加/編集して下さい。

/* =Basic structure
-------------------------------------------------------------- */

/* Body, links, basics */
html {
	font-size: 87.5%;
}
body {
	font-size: 14px;      /* 文字の大きさ */
	font-size: 1rem;      /* 文字の大きさ */
/*	font-family: Helvetica, Arial, sans-serif; */    /* デフォルトのフォント */
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;     /* フォント:追加部分 */
	text-rendering: optimizeLegibility;
	color: #444;        /* 文字の色 */
}
body.custom-font-enabled {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

赤色の部分を追加/編集するだけです。今回は、文字の大きさ/色については変更していません。大きさを変えたい場合は、’font-size’の数値を変えてみて下さい。その際は、’rem’の数値にお気をつけ下さい。詳細は、スタイルシートの冒頭をお読み下さい。

また、色を変更したい場合は、’color’のカラーコードをお好みで変更して下さい。これで、サイト全体の文字の変更が出来たハズです。

後は、コンテンツを充実させるだけです(笑

WordPressデザインブック ステップバイステップ形式でマスターできる
WordPressデザインブック ステップバイステップ形式でマスターできる

 

にほんブログ村 ブログブログ ブログノウハウへ

TwentyTwelve サイト全体の文字(フォント/色/大きさ)の設定” への3件のコメント

  1. ピンバック: TwentyTwelve グローバルナビゲーションのメニュー文字(色/サイズ/フォント)の設定 | 初めてのワードプレス カスタマイズ

  2. ピンバック: TwentyTwelve 記事コンテンツの背景に色をつける | 初めてのワードプレス カスタマイズ

  3. ピンバック: WordPressテーマ Twenty Twelve のフォント変更ー自分の場合ー | murataな日記

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です