Twenty Thirteenの背景色と文字色を変更

「Twenty Thirteen」で使用する背景色と文字色を変更を変更します。

はじめに

「Twenty Thirteen」で使用する背景色と文字色を変更を変更します。
・サイト全体の背景色と文字色を変更
・サイドバー(右)の背景色と文字色を変更
・サイドバー(下)とフッターの背景色と文字色を変更

サイト全体の背景色と文字色を変更

サイト全体の背景色と文字色を、カスタマイズします。

<body指定の背景色と文字色>
bodyに対する指定ですが、背景色の指定はフッターより下側のみに有効です。サイドバーがフッターを突き抜けた場合などに使用されます。文字色は、リンクではない文字全般に有効な指定になります。

body {
	background-color: #d0d0d0;
	color: #505050;
	line-height: 1.5;
	margin: 0;
}

<site指定の背景色>
siteに対する指定ですが、実際にはサイドバーより本文の高さが低い場合に発生する余白のみに有効です。

.site {
	background-color: #f0f0f0;
	border-left: 1px solid #f2f2f2;
	border-right: 1px solid #f2f2f2;
	margin: 0 auto;
	max-width: 1600px;
	width: 100%;
}

<site-main指定の背景色>
site-mainに対する指定で、記事のエリアに対する背景色になります。

.site-main {
	background-color: #f0f0f0;
	margin : 0;
	padding: 0;
}

サイト全体のリンクの文字色を変更

リンクの文字色を指定します。マウスボタンを乗せたときは、色が変わるようにします。

a {
 color: #209020;
 text-decoration: none;
}

a:visited {
 color: #209020;
}

a:focus {
 outline: thin dotted;
}

a:active,
a:hover {
 color: #808080;
 outline: 0;
}

a:hover {
 text-decoration: underline;
}

サイト全体の「Preformatted Text」の背景色と文字色を変更

「style.css」で「Preformatted Text」の背景色と文字色を変更します。

pre {
	background: #bde0a0;
	color: #505050;
	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;
}

<表示例>

Preformatted Text

サイドバー(右)の背景色と文字色を変更

「style.css」でサイドバー(右)の背景色と文字色を変更します。

.widget {
	background-color: rgba(225, 255, 205, 0.4);
	font-size: 12px;
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	margin: 0;
	padding: 20px;
	word-wrap: break-word;
}

.widget .widget-title {
	font: 700 normal 14px Osaka-mono, "MS Gothic", monospace;
	margin: 0 0 9px;
	padding       : 0 2px 4px 2px;
	border-bottom : 4px solid #d0d0d0;
	text-shadow: 3px 6px 6px rgba(0,0,0,0.2), 0px -5px 16px rgba(255,255,255,0.3);
}

.widget ul,
.widget ol {
	list-style-type: none;
	margin: 0;
	padding: 0 4px;
}

.widget li {
	border-bottom: 1px solid #d0d0d0;
	padding: 2px;
}

.widget .children li:last-child {
	padding-bottom: 0;
}

.widget li > ul,
.widget li > ol {
	margin-left: 0;
}

.widget a {
	color: #209020;
}

.widget a:hover {
	color: #808080;
}

サイドバー(下)とフッターの背景色と文字色を変更

「style.css」でサイドバー(下)とフッターの背景色と文字色を変更します。

.site-footer {
	background-color: #d0d0d0;
	color: #606060;
	font-size: 14px;
	text-align: center;
	margin  : 0;
	padding : 0;
}

.site-footer .widget-area,
.sidebar .site-footer {
	text-align: left;
}

.site-footer a {
	color: #606060;
}

.site-footer .sidebar-container {
	background-color: #d0d0d0;
	padding: 10px 0;
}

.site-footer .widget-area {
	margin: 0 auto;
	max-width: 1040px;
	width: 100%;
}

.sidebar .site-footer .widget-area {
	max-width: 724px;
	position: relative;
	left: -158px;
}

.site-footer .widget {
	background: transparent;
	color: #666;
	float: left;
	margin-right: 20px;
	width: 245px;
}

.sidebar .site-footer .widget {
	width: 228px;
}

.sidebar .site-footer .widget:nth-of-type(4),
.sidebar .site-footer .widget:nth-of-type(3) {
	margin-right: 0;
}

.site-footer .widget a {
	color: #606060;
}

.site-footer .widget-title,
.site-footer .widget-title a,
.site-footer .wp-caption-text {
	color: #666;
}

おわりに

「Twenty Thirteen」で使用する背景色と文字色を変更しました。

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

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

関連記事(目次)

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

コメント記入欄

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

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

post date*

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