Stinger5-Cheetahカスタマイズ速習 基礎編最後となる第07回では、インストール直後のStinger5-Cheetahを、Googleの『PageSpeed Insight』でチェックした際に表示される2つのエラー

  • コンテンツのサイズを表示域に合わせる
  • タップ ターゲットのサイズを適切に調整する

のうち『コンテンツのサイズを表示域に合わせる』について修正していきましょう。

 

目次はこちら:

基礎編 第01回 まずはStinger5-Cheetahをインストール

基礎編 第02回 最初に絶対子テーマを導入すべし!

基礎編 第03回 管理画面でデザインを変更しよう

基礎編 第04回 ナビゲーションやフッターを設定しよう

基礎編 第05回 テーマファイルでSNSの設定をしよう

基礎編 第06回 タップ ターゲットのサイズを適切に調整する

基礎編 第07回 コンテンツのサイズを表示域に合わせる ←今ここ

 

前回は子テーマにCSSを追記するだけでしたが、今回はテーマファイルも修正する必要がありますので、必要なデータをちゃんと子テーマにコピーしてから作業するようにしましょう。

 

 

まずはエラーの原因を知ろう

前回同様、『コンテンツのサイズを表示域に合わせる』の詳細を表示したのが↓の図です。

fixed-footer-01

ページ コンテンツの幅が表示域に対して広すぎるため、水平方向へのスクロールが必要になります。ユーザー エクスペリエンスを向上させるためにページ コンテンツのサイズを表示域に合わせてください。

 

Google Developersの方を見てみても

メタ ビューポート タグを使ってモバイル サイトを開発する場合、指定されたビューポートに収まらないページ コンテンツを誤って作成しやすくなります。たとえば、ビューポートよりも広い幅で表示される画像があると、ビューポートの横へのスクロールが生じる場合があります。ユーザーが横にスクロールしなくて済むように、ビューポートの幅に収まるようにコンテンツを調整してください。

となっています。

 

つまり <div id=”footer_w”>ここはスマホ用フッター</div> は 横スクロールしなければならないくらい大きい領域になっていますよ と怒られている状態、ということですね。

 

 

Sponsored link

意外とわかりづらいエラーの原因

それじゃあさっそく、エラーの原因となってる要素を修正しようじゃないか、と思うんですが、じつはここで問題がひとつ。

スマホ、問題なく表示されてますけど( ゚Д゚)ハァ??

fixed-footer-02

 

そうなんです。

横方向にスクロールしなければ見えないコンテンツなんて『存在しない』んですよ。

 

自分のAndroidスマホや妻のiPhone、Kindleなど、様々なデバイスで調べてみましたが問題なし。

なんでやねーん、と思いつつ、仕方がないのでブラウザのWeb開発ツールを使ってソースを順番に見てみることに。

(Web開発ツールについては前回の記事を参照)

 

一番外の<div>が『#wrapper』で~その中にfooterが入っていて~パソコンの時とスマホの時の条件分岐があって~

 

ん?<div id=”footer_w”>の大きさが2000px…だと Σ(゚д゚lll)ガーン

fixed-footer-03

 

改めてStinger5-Cheetahのページ全体の構成を見てみると、↓のようになっていました。

fixed-footer-04

 

フッター部分のCSSは↓の通り

※436行目~

 

※1397行目~

 

この構造のままでフッターに背景色を設定すると、本来はコンテンツの幅までしか色は付きません。

これを避けるためにCSSで幅2000pxを指定し、marginとpaddingで擬似的に領域を広げることで、今のデザインを実現していたのです。

 

 

Sponsored link

エラーを修正しよう

今の構造で、エラーを回避するのはちょっとむずかしそうです。

(というか少なくとも僕はわかりません)

 

そこで、フッターに<div>を増やし、↓のような構造にすることによって、無理にCSSを使ってフッターの大きさを変えるのではなく、最初から背景色のついたボックスの上にフッターを配置すれば良いのです。

 

fixed-footer-05

まずは親テーマのfooter.phpをローカル等にコピーして子テーマのフォルダにアップしましょう。

(ファイルのコピー方法については前回記事参照。FTP等からアクセスしてそのままコピーするだけでOKです)

 

 

まずは、footer.phpを↓のように書き換えましょう

 

そして、子テーマのCSSに↓のように追記します。

 

この2つを実施することで、見かけ上に変化は無くとも、『PageSpeed Insight』のエラーは出なくなりました。

fixed-footer-07

fixed-footer-08

 

TSUNJI(@tsunji1983)的まとめ

今回で、Stinger5-Cheetahカスタマイズ速習の基礎編は終了です。

エラーの修正をしつつ、CSSの追記の仕方やテーマファイルの修正も練習してみたので、今後はみなさん自身の財産としてブログを育てていけるように、Stinger5-Cheetahをいっぱいカスタマイズしてあげてくださいね。

 

つづいてすぐに応用編を始めたいところではありますが、他ジャンルで書きたいこともちょっと溜まってきたので、様子を見つつ、機能追加しつつで記事書いていきます。

このテーマ待ってんだから早くしろよヽ(`Д´)ノウワァァァン!! とかコメント貰ったら、全力で予定変更しますけどね(笑)

 

書いている内容で分かりにくいところや、もっと知りたいところなどあれば、お気軽にお問い合わせやTwitter(@tsunji1983)へご連絡ください。

 

Stinger5-Cheetahカスタマイズ速習 目次

基礎編 第01回 まずはStinger5-Cheetahをインストール

基礎編 第02回 最初に絶対子テーマを導入すべし!

基礎編 第03回 管理画面でデザインを変更しよう

基礎編 第04回 ナビゲーションやフッターを設定しよう

基礎編 第05回 テーマファイルでSNSの設定をしよう

基礎編 第06回 タップ ターゲットのサイズを適切に調整する

基礎編 第07回 コンテンツのサイズを表示域に合わせる ←今ここ

Sponsored link