レスポンシブデザイン

2015年9月23日

を参考にやってみた。

（１）css.styleを、w900.css という名前で、「名前をつけて保存」する。

（２）一番下の行に、

/* =responsive design 20150923
————————————————————– */
// ウインドウ幅が狭くなった時に表示がおかしくならないように、メイン部分の幅はmax-widthで指定します。
#wrapper {
max-width: 558px;
}

// 画像には縦横比が保持されるよう、max-widthと一緒にheight指定を行います。
img {
max-width: 100%;
height: auto;
}

// スマートフォンを回転させた時に文字のサイズが変わらないようにする
body {
-webkit-text-size-adjust: 100%;
}

を加える。

（３）ここでいきなり、「<head>内を書き換える」と説明があるが、私の使用いているテーマでは、

header.php

の中に、<head>があった。

<head>と、</head>の間に、

ただし、実際は、(画像の絶対パス) は、http://~~.jpg としている。

→ これをやったが、うまくいかなかった。

右のサイドバーが、下にいってくれない。

—————————

とりあえず、プラグイン WPtouch使ってごまかしたが、納得いかない。

—————————

気をとりなおして、ほかのページを見る。

→いろいろごちゃごちゃいじったが、うまくいかず。あきらめた。

デザイン的に気にったのがなく、最終的に、

Unite というテーマの、スタイルシートの色をいじって、使用することとした。