ワードプレステーマTwentyElevenのサイトタイトルの文字のフォント/色/サイズなどの変更方法です。

テーマTwentyElevenのデフォルト表示をよくよく見ていると、やっぱいぃですよね(笑　なんかそのままでもいぃか?って思えてきちゃう。

目立つのはとにかく余白部分(笑　とにかくムダに広いですよね!!あぁ、TwentyElevenのサイトタイトル部分の余白撤去についてはコチラをご覧ください。

しかし、デフォルトタイトルだと、確かに黒単色で味気ない気もします。ってことで、サイトタイトル部分のカスタマイズをしていきましょう。

TwentyElevenのカスタマイズは比較的簡単です

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

’スタイルシート’の中から、次の箇所を見つけて下さい。

/* =Header
----------------------------------------------- */

#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}
#site-title {  /* サイトタイトルの位置 */
	margin-right: 270px;
	padding: 3.65625em 0 0;
}
#site-title a {　/* サイトタイトル文字の設定 */
	color: #111;
	font-size: 30px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {　/* サイトタイトル文字をマウスオーバした時の設定 */
	color: #1982d1;
}
#site-description {　/* キャッチフレーズの設定 */
	color: #7a7a7a;
	font-size: 14px;
	margin: 0 270px 3.65625em 0;
}
#branding img {　/* ヘッダー画像の設定 */
	height: auto;
	display: block;
	width: 100%;
}

こんな感じになっています。フォントについては、サイト全体の文字の変更で設定したモノが反映されます。それとは別にフォント指定されたい場合は、ココに入力して下さい。

#site-title a {　/* サイトタイトル文字の設定 */
	font-family: お好きなフォントスタイル;
	color: #お好きなカラーコード;
	font-size: 文字の大きさpx;
	font-weight: bold;　/* 文字の線の太さ */
	line-height: 36px;　/* 行間(縦) */
	text-decoration: none;
}
#site-title a:hover,
#site-title a:focus,
#site-title a:active {　/* サイトタイトル文字をマウスオーバした時の設定 */
	color: #お好きなカラーコード;
}
#site-description {　/* キャッチフレーズの設定 */
	color: #お好きなカラーコード;
	font-size: 文字の大きさpx;
	margin: 0 270px 3.65625em 0;  /* キャッチフレーズの位置 */
}

こんな感じですね。色と大きさはお分かり頂けるかと思います。

font-weight: 文字の線の太さ;

デフォルトの’bold’は太線。これを’normal’にすると普通の線の太さになります。数値を入力する事もできます。

line-height: 行間(縦);

キャッチフレーズとの間の余白と行っても良いでしょう。だいたい、’font-size’と同じ値で良いかなぁ、とは思います。

この辺りに決まりはないので、表示して見てさらに編集する様にしてみて下さい。これで、見栄えの良いサイトタイトルになったハズです。

サイト作成に弾みがつきましたね☆

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