TwentyTwelve 記事コンテンツの背景に色をつける

ワードプレステーマTwentyTwelveの記事コンテンツの背景に色をつける方法です。TwentyTwelveのサイドバーの背景色を変更する方法はコチラ♫

また、TwentyTwelveのサイト全体の文字(フォント/色/大きさ)の変更方法はコチラ♫

サイトコンテンツの背景色を変更するだけでも、かなりインパクトを与える事が出来ます。また、文字を際立たせる事により読みやすくもなりますし、印象深さを与えることにもなるでしょう。

ポイントは、あまり’濃い色’ではなく薄めの色を使われると良いのではないでしょうか。当サイトの場合は反対に、サイトに背景色をつけて記事コンテンツは白地にしてあります。

どちらも意味合いとしては同じ事です。記事コンテンツの背景に色をつけて、読みやすさと目立ちやすさを表現してみましょう。

記事コンテンツに背景色をつけるのはこんなに簡単!!

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

/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

~~~~~~~~~ 中略 ~~~~~~~~

.entry-content,
.entry-summary,
.mu_register { /* ココです!! */
	line-height: 1.714285714;
}

なんの設定もされていません。まっさらです(笑 ココに以下の様に追加/編集してみて下さい。

/* =Main content and comment content
-------------------------------------------------------------- */

.entry-meta {
	clear: both;
}
.entry-header {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

~~~~~~~~~ 中略 ~~~~~~~~

.entry-content,
.entry-summary,
.mu_register { /* ココです!! */
	background: #fafafa;
	line-height: 1.714285714;
}

たったコレだけです(笑 ねっ?超簡単だったでしょ?色は、お好みの色をカラーコード入力すればOKです。

これで、記事コンテンツの背景に色がついたハズです。これだけでも、かなりテンション上がっちゃいますよね☆


ランディングページ作成ができるワードプレス用2カラムテンプレート「LP Designer」レスポンシブWEBデザイン対応

 

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

TwentyTwelve 記事コンテンツの背景に色をつける” への2件のコメント

  1. ピンバック: TwentyTwelve 記事コンテンツの左右に余白を入れる | 初めてのワードプレス カスタマイズ

  2. ピンバック: TwentyTwelve 記事コンテンツに影をつけて立体的に見せる | 初めてのワードプレス カスタマイズ

コメントを残す

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