TwentyTwelve サイトの表示幅を変更する

ワードプレステーマTwentyTwelveで、サイト全体の表示幅を変更する方法です。テーマTwentyTwelveのサイト内コンテンツの幅を変更する方法はコチラ♫

さて、ワードプレステーマは、全体的に幅の広いテーマが多い様に感じます。大きい方が好まれるんでしょうか?(笑 特に無料ブログをしていた人にとっては、とても大きく広く感じることと思います。

実際に表示させてみると、やっぱり広い…(汗 日本人は、幅が狭めの方が好むのでしょうかね?(笑 ってことで、少し表示枠を狭めてみようと思います。

幅を変更しただけでも見やすくなりますね!!

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

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}
	.author-description {
		float: right;
		width: 80%;
	}
	.site {
		margin: 0 auto;
		max-width: 960px;
		max-width: 68.571428571rem;
		overflow: hidden;
	}
	.site-content {
		float: left;
		width: 65.104166667%;
	}

デフォルト表示だと、横幅が’960px’に設定されている事が分かります。そんなに広過ぎることはないと思うのですが、チョッと狭めてみましょう♫では、下記の様に編集してみて下さい。

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}
	.author-description {
		float: right;
		width: 80%;
	}
	.site {
		margin: 0 auto;
		max-width: 860px;
		max-width: 61.42857143rem;
		overflow: hidden;
	}
	.site-content {
		float: left;
		width: 65.104166667%;
	}

恐らくは、日本人好みの幅になったのでははいでしょうか?(笑 ’rem’については、コチラ⇒’TwentyTwelve rembase’

ちなみに、サイト全体の表示幅を変えても、サイトコンテンツへの影響はありませんのでご安心下さい。これで、さらにサイトが見やすくなったことでしょう☆


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

 

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

コメントを残す

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