リニューアル!! ルートドメインへ変更&MediaQueriesでスマートホンレイアウトに対応しました。

今回サイトのサーバー移行と一緒に、いままで無料のDDNSで利用していたサブドメインを、
独自ドメインを取得してルートドメインに変更しましたw

http://e-com.webhop.net/wordpress/ → http://matsudapress.com

また、移行先もwordpressにしhtml5&CSS3対応にし、スマホで表示してもレイアウトが崩れないようまえから気になっていたmedia queriesを利用したブログに変更しました。

Media Queriesを利用することで、ブラウザの画面サイズによって利用するCSSを変更できるので、ブラウザの画面サイズを意識し、スマホでも見やすいサイト作成ができます。
このブログでもサイズによってこんな感じに変わります。

media queries

サイズ小(主にスマホ用)

media queries

中サイズ(サイドバー分スペースを下へ折り返しています)

media queries big width

サイズ大(基本のレイアウト)

 

下記のように横幅の最小と最大を指定し、そのサイズ内ならこのCSSを適用するということができます。

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

上記を利用しスマホの画面サイズを意識て作ることできれいなPCデザインをいかしつつスマホにも同時に適用できるのが魅力的です!
ちなみにいままでwordpressのプラグインでスマホ用の画面を用意してましたが、この方法なら好きにカスタマイズできるし、PC&スマホ両方に適用させたい場面など大変便利になります。

実は今回利用しているテーマですがデフォルトテーマで、最初からMedia Queriesに対応しているので、気になる部分をカスタマイズして利用させていただいております♪