タブレット・スマホに対応したサイトを作る【Twenty Fifteen編】

初級編となりますが、簡単にざっくりと書きたいと思います。ブラウザのchromeにあるデベロッパーツールを使うとタブレットや各スマホにどのように自分のサイトが見えるか分かります。また、このツールを使わなくてもブラウザの大きさを縮小すると、どのようにサイトが変わっていくかも分かります。

とりあえず、どう見えるか程度しか使っていませんが、一応、デベロッパーツールの説明のサイトを紹介しておきます。

 Build Insider  426 shares 699 users

Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

http://www.buildinsider.net/web/chromedevtools/01

そして、こういったツールを使い自分のサイトを見ながら正しく表示されていない部分を修正していくことになります。私もまだやり始めで気づいたばかりなんですが。気づきは重要です。

将棋の世界でも直感は重要です。私は将棋ウォーズ1級です。関係ありませんが。
ついでに言うと初段に中々なれませんが。。一応、マスターです。ログインあんまりしてませんが。。将棋のたとえ話が多くて申し訳ございません、、、

さて話が脱線しましたので話を戻しまして、このテーマに関して言うと、ipadのサイズになると、サイドバーがなくなるようになります。これは「レスポンシブデザイン」というものが影響します。

「レスポンシブデザインとは・・・・・」

レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。

注意したいところは、

私の場合はそうでした。

(具体的に言うと、この記事の上のバナーを右寄せにしていますが、これがタブレットで余白があると余白部分にバナーがはみ出して不格好になってしまうというただそれだけです。。。ただ、これができると一つ広告を切り替えるだけで全部適応しますので、スマホにはこの広告、PCにはこの広告というような手間が省けます。）

私は、マージン0にしてipadでは大きくサイトを見てもらうようにしています。
無難なのは、2%くらいにして少し余白をつけるのが良いとは思います。で、どこのCSSを弄っていけばいいのかということですが、分からなければ、弄っていきたい場所をまず確認することです。

例えば、タイトルの月別、カテゴリー別のタイトル部分のサイズを最大に広げたい場合は、archive.phpを見て、classを確認して、CSSでその部分のマージンを修正する。
以下のところのpage-header

<header class="page-header">

で、cssに戻ってpage-headerのマージンを修正する。

.hentry,
	.page-header,
	.page-content {
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		margin: 0 0%;

同様なやり方で、ipadで見た場合、左右の余白がある部分と、ない部分がどこか。そして修正する。修正場所は、@media screen and (min-width: 38.75em)

この中のマージンを弄る。ということです。間違えた場合は、違うところが幅が変わるので、なんでそこ。。とか言いながら自問自答していくのも成長のひとつでしょうか。

.hentry,
	.page-header,
	.page-content {
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		margin: 0 0%;
	}

.comments-area {
		border-top: 0;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		margin: 0% 0% 0;


.site-footer {
		border-top: 0;
		box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
		margin: 0% 0% 0% 0%;
		padding: 3.84615% 7.6923%;
	}

というように、幅は重要です。そして、修正しやすいです。全てのブラウザ・スマホに対応という事は分かりませんが、プロでなくてもある程度分かっていないと。というざっくりとした話でした。初級編終わります。