CSSでサイトを簡単レスポンシブ化、と、右にできる余白を解決する方法

えっ?Wordpressをレスポンシブ化ってどういうこと2020年、Wordpressテーマは初めからモバイルフレンドリーがデフォでしょ

……だが、何と公式テーマ「Twenty Ten」は未だにレスポンシブ化されていないのです。それすらも自力で書けという公式テーマ。鬼なのか、宿題をくれる先生なのか。(Twentyシリーズ、「Twelve」からデフォルトでレスポンシブ化されています。)

twentyten

 

ということで、やってみれば静的ホームページ作成などにも役立つ覚書き。

「Twenty Ten」の子テーマでサイトをレスポンシブ化してみよう

まずは、PHPの編集から。

header.phpにviewportを設定する

タグ“viewport”

<head>~</head>

の間に貼ります。

つまり、「TwentyTen」の場合は“header.php”の中に貼ればOKということ。位置は</head>の上が良いです。(「<head>~</head>の中に貼りましょう」と言われているものは何でも”</head>”の上を推奨します)

ここに以下のコードを貼り付けます。
<meta name="viewport" content="width=device-width,initial-scale=1">

 

PHP編集はこれで終わり。

子テーマの style.css に追記

 

後は、子テーマの“style.css”に追加記入していくだけ。

パソコンサイズ、タブレット、スマホと3種類設定します。

/* レスポンシブ */
@media (max-width:  1024px) {
     #container, #content, #primary, #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
          float: none;
          margin: 0;
          width: auto;
     }
     #access {
          width: 100%;
     }
     #branding img {
          max-width: 100%;
          height: auto;
          display:block;
     }
}

@media screen and (max-width: 896px) {
     #container, #content, #primary, #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
          float: none;
          margin: 0;
          width: auto;
     }
     #access {
          width: 100%;
     }
     #branding img {
          max-width: 100%;
          height: auto;
          display:block;
     }
}

@media screen and (max-width: 480px) {
     #container, #content, #primary, #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper {
          float: none;
          margin: 0;
          width: auto;
     }
     #access {
          width: 100%;
     }
     #branding img {
          max-width: 100%;
          height: auto;
          display:block;
     }
}

 

これで完成です。

簡単すぎる、CSSレスポンシブ化講座でした。

しかし……
なぜか、スマホサイズで表示した時だけ、右側に大きく空白が出来てしまうのだった。

CSSの勉強になる「Twenty Ten」 カスタマイズまとめ

レスポンシブ化スマホ表示で出来る右側の空白を消したい

すっ……ごく右に動いてしまう……なんやこれはっ!!

これでも、Google先生は「このページはモバイルフレンドリーです」と認めてくださる。くださるけれども、何だか気持ち悪い。

 

Google先生をあてにフラフラ検索してみると、“wrapper”に”overflow: hidden”をかけただけで直ったという記事がチラホラ。

参考サイトさま

ocws BLOG

レスポンシブデザインを制作時に右側に空白ができました。これはどういうことなのか。僕がとった解決策を踏まえ解説しています。…

wrapperにoverflow: hidden をあててみる

 

で、書いてみる。

#wrapper {
	overflow: hidden;
}

 

本当に、これだけで直った!!秒!!

確認してみましょう

 

「Demonstrating Responsive Design」で見てみます。

Demonstrating Responsive Design in a manner everyone 'gets'.…

 

CSSの勉強になる「Twenty Ten」 カスタマイズまとめ

 

直っている。
どのサイズからも綺麗に見えるようになりました。

やってみれば簡単だけれど、overflow: hidden;だけで直る理屈がちょっと分からないわ。

そして、ヘッダーが地味なのが気になるので、次はここに着手してみます。

サポートよろしくお願いします

 

いつもありがとうございます。この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。


Amazonギフト券- Eメールタイプ – Amazonベーシック


金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。

※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

 

 

 

よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』