ターゲットのサイズを適切に調整するのうち『コンテンツのサイズを表示域に合わせる』について修正していきましょう。←今ここ前回は子テーマにCSSを追記するだけでしたが、今回はテーマファイルも修正する必要がありますので、必要なデータをちゃんと子テーマにコピーしてから作業するようにしましょう。目次まずはエラーの原因を知ろう前回同様、『コンテンツのサイズを表示域に合わせる』の詳細を表示したのが↓の図です。コンテンツの幅が表示域に対して広すぎるため、水平方向へのスクロールが必要になります。コンテンツのサイズを表示域に合わせてください。コンテンツを誤って作成しやすくなります。ビューポートよりも広い幅で表示される画像があると、ビューポートの横へのスクロールが生じる場合があります。ユーザーが横にスクロールしなくて済むように、ビューポートの幅に収まるようにコンテンツを調整してください。怒られている状態、ということですね。スポンサーリンク意外とわかりづらいエラーの原因それじゃあさっそく、エラーの原因となってる要素を修正しようじゃないか、と思うんですが、じつはここで問題がひとつ。゚Д゚)ハァ??そうなんです。横方向にスクロールしなければ見えないコンテンツなんて『存在しない』んですよ。自分のAndroidスマホや妻のiPhone、Kindleなど、様々なデバイスで調べてみましたが問題なし。なんでやねーん、と思いつつ、仕方がないのでブラウザのWeb開発ツールを使ってソースを順番に見てみることに。Σ(゚д゚lll)ガーン改めてStinger5-Cheetahのページ全体の構成を見てみると、↓のようになっていました。*/}この構造のままでフッターに背景色を設定すると、本来はコンテンツの幅までしか色は付きません。これを避けるためにCSSで幅2000pxを指定し、marginとpaddingで擬似的に領域を広げることで、今のデザインを実現していたのです。スポンサーリンクエラーを修正しよう今の構造で、エラーを回避するのはちょっとむずかしそうです。(というか少なくとも僕はわかりません)そこで、フッターに<div>を増やし、↓のような構造にすることによって、無理にCSSを使ってフッターの大きさを変えるのではなく、最初から背景色のついたボックスの上にフッターを配置すれば良いのです。親テーマのfooter.phpをローカル等にコピーして子テーマのフォルダにアップしましょう。(ファイルのコピー方法については前回記事参照。?></body></html>そして、子テーマのCSSに↓のように追記します。Insight』のエラーは出なくなりました。TSUNJI(@tsunji1983)的まとめ今回で、Stinger5-Cheetahカスタマイズ速習の基礎編は終了です。エラーの修正をしつつ、CSSの追記の仕方やテーマファイルの修正も練習してみたので、今後はみなさん自身の財産としてブログを育てていけるように、Stinger5-Cheetahをいっぱいカスタマイズしてあげてくださいね。つづいてすぐに応用編を始めたいところではありますが、他ジャンルで書きたいこともちょっと溜まってきたので、様子を見つつ、機能追加しつつで記事書いていきます。コメント貰ったら、全力で予定変更しますけどね(笑)書いている内容で分かりにくいところや、もっと知りたいところなどあれば、お気軽にお問い合わせやTwitter(@tsunji1983)へご連絡ください。介護系の会社のたった1人のWeb担当。2015年の夏に、かわいい息子が生まれたことをきっかけにブログを開設しました。Plusの初心者向け使い方講座、WordPressで雑多ブログを運営する人向けのアクセスアップについてお届けします。コメントをキャンセルメールアドレスは公開されることはありません。