TwentyTwelve ヘッダーディスクリプション(キャチフレーズ)の文字(色/大きさ/フォント)の変更

ワードプレステーマTwentyTwelveのヘッダーディスクリプション(キャチフレーズ)の文字(色/大きさ/フォント)の変更仕方です。

こちらも、ヘッダータイトル同様非表示にされて入る方には不要の項目です。表示設定にされていて、変更されたい方は参考にしてみて下さい。

私個人的には、デフォルトのままで良いと感じています。ですから、今回は変更はしていません。変更部分/変更の仕方を書き残して置きます。

フォントについては、サイト全体のフォント変更をなさって入る方は、特に変更点はありません。個別で設定する場合に追加/編集して下さい。

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

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

/* Header */
.site-header {
	padding: 24px 0;
	padding: 1.714285714rem 0;
}
.site-header h1,
.site-header h2 {
	text-align: center;
}
.site-header h1 a,
.site-header h2 a {
	color: #515151;
	display: inline-block;
	text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
	color: #21759b;
}
.site-header h1 {
	font-size: 24px;
	font-size: 1.714285714rem;
	line-height: 1.285714286;
	margin-bottom: 14px;
	margin-bottom: 1rem;
}
.site-header h2 {
	font-family: お好きなフォント;   /* フォントの変更をする場合 */
	font-weight: normal;
	font-size: 13px;        /* 大きさ */
	font-size: 0.928571429rem;    /* 大きさ */
	line-height: 1.846153846;
	color: #757575;     /* 色 */
}
.header-image {
	margin-top: 24px;
	margin-top: 1.714285714rem;
}

赤い文字の部分を追加/変更するだけでOKです。なお’font-weight’の部分は’normal’だと細身の文字、’bold’にすると太字になります。’color’には、お好みの色のカラーコードに変更して下さい。

文字の大きさを変更する際には、’rem’や’line-height’の数値にお気を付け下さい。詳細は、スタイルシートの冒頭部分をお読み下さい。

ヘッダーテキストを非表示にしていた方も、表示させたくなったかもしれませんね(笑

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

 

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

コメントを残す

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