2018年版 ウェブサイトを30分でレスポンシブ(スマホ対応)に90%実装する方法

手軽にウェブサイトをレスポンシブウェブデザイン(iPhoneなどのスマホに対応)にする方法です。

右側にメインコンテンツ部、左側にサイドメニューがある一般的なデザインで、スマホで見るとサイドメニューをメインコンテンツの下に表示するようにします。
スマホの判別は

@media screen and (max-width: 48em),screen and (max-device-width:480px)

でやります。
ホントは画面サイズによっていろんな要素の最大幅・最小幅を設定した方がいいのですが、とりあえずこれで80%対応できます。
凝りだすとたいへんなんですよね~。だから費用対効果のいいところでやめます。(笑)
“2018年版 ウェブサイトを30分でレスポンシブ(スマホ対応)に90%実装する方法” の続きを読む

WordPressのテーマTwenty Seventeenのカスタマイズ

WordPressのテーマ、Twenty Seventeenいいですね。シンプルで今風のフラットなデザイン。
でも私は古い人間なので、5~10年ぐらい前に流行ったデザインにカスタマイズすることにしました。
うすーい灰色のバックに、白い紙を置いたイメージで。あとは空白を詰めます。

全体の横幅をデフォルトより広く設定する

まず、PC画面で横幅を1200ピクセルに設定します。

media screen and (min-width: 48em) {
	.wrap {
		max-width: 1200px;
	}
	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 67%;
	}
	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 29%;
	}
	.navigation-top .wrap {
		max-width: 1100px;
	}
}
  • media screen and (min-width: 48em)

は、PC画面などで幅が十分広い機種は、の意味です。
.wrapのmax-widthで横幅を設定(1200px)します。
記事部分の横幅は全体の67%、ウィジェット部分の横幅を29%としています。

@media screen and (max-width: 48em) 
{
  .wrap{
	padding: 0px;
	margin: 0px;
  }
}

逆にスマホでは画面全体にブログを表示させるため、padding・marginともに0px(余白なし)に設定します。
“WordPressのテーマTwenty Seventeenのカスタマイズ” の続きを読む