WordPress Snippet

twentyeleven　テーマについて

Responsive WEB http://d.hatena.ne.jp/tenman/20110616/p1(b:関連) を意識しておりTwentyelevenはページ幅を持たない構成になっています。

twentyeleven　1.6

2013/8/14　バージョン　1.6に更新されました

今回の変更は、Twenty Eleven – 1.6 Diffで確認する事が出来ます

• 投稿フォーマット各種、スタンダードの場合に、投稿タイトルから、title属性が削除
• style要素のIDに、twentyeleven-header-css,twentyeleven-admin-header-cssの値が新設
• functions.php twentyeleven_get_first_url()が新しくなりました
• functions.php twentyeleven_get_gallery_images()　追加

他、の修正が行われた模様です。

http://wordpress.org/extend/themes/duster(b:Duster)をベースにしている
内容物の大きさによって、上限幅が設定されているだけで、UAのPage幅にくっついていく設計で650px以下については、フォントのサイズをちょっと変えるなどに、とどまっている。

http://d.hatena.ne.jp/tenman/20110714/p2(b:関連メモ)

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1060px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}
#secondary {
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
}

#page {
	margin: 2em auto;
	max-width: 1000px;
}

/* One column */
.one-column #page {
	max-width: 690px;
}

@media (max-width: 800px) {
	/* Simplify the basic layout */
	#main #content {
		margin: 0 7.6%;
		width: auto;
	}
}

@media (max-width: 650px) {
	/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
	body, input, textarea {
		font-size: 13px;
	}
}

@media (max-width: 450px) {
	#content .gallery-columns-2 .gallery-item {
		width: 45%;
		padding-right: 4%;
	}
	#content .gallery-columns-2 .gallery-item img {
		width: 100%;
		height: auto;
	}

}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
	}
	#page {
		margin-top: 0;
	}
	#branding {
		border-top: none;
	}

}

htmlのあらまし

Gist