スポンサーリンク

レスポンシブデザイン

http://ruucb.com/blog/2013-12-20/fixed-width-wordpress-theme-responsive/

を参考にやってみた。

(1)css.styleを、w900.css という名前で、「名前をつけて保存」する。

(2)一番下の行に、

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

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

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

を加える。

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

header.php

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

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

<link rel="stylesheet" media="screen" href="style.css">
<link rel="stylesheet" media="screen and (max-width: 900px)" href="w900.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="apple-touch-icon" href="(画像の絶対パス)" />

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

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

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

—————————

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

—————————

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

http://viral-community.com/wordpress/wordpress-customize-4986/

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

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

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

スポンサーリンク