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> は 横スクロールしなければならないくらい大きい領域になっていますよ と怒られている状態、ということですね。

 

 

スポンサーリンク

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

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

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

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行目~

/* フッターの背景のサイズ */	
	#footer_w {
		width: 2000px;
		margin: 20px auto;
		text-align: left;
	}

 

※1397行目~

/* フッターの背景のサイズ画面いっぱい */		
html {
		overflow: auto;
	}
	
	body {
		overflow: hidden;
	/*はみ出た部分をどうするか*/
	}
	
	footer {
		margin: 0 -200%;

	/* マージンを追記 */
		padding: 20px 200%;
	
	/* マージンで横にはみ出した部分を戻す */
	}

 

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

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

 

 

スポンサーリンク

エラーを修正しよう

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

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

 

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

 

fixed-footer-05

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

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

 

 

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

</div>
<!-- /#wrapper をここに移動 -->

<footer id="footer">
	<div id="footer_layout">
	<!-- /#footer_layout を新規追加 -->

		<?php if(is_mobile()) { ?>
		<!-- 追加ウィジェット ここから-->
		<div id="footer_w">
			<div class="footer_s">
				<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(8) ) : else : ?>
				<p>ここはスマホ用フッター</p>
				<?php endif; ?>
			</div>
		</div>
		<div class="clear"></div>
		<!-- 追加ウィジェット ここまで-->
		<?php } else { ?>
		<!-- 追加ウィジェット ここから-->
		<div id="footer_w">
			<div class="footer_l">
				<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
				<p>ここはフッター左側</p>
				<?php endif; ?>
			</div>
			<div class="footer_c">
				<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : ?>
				<p>ここはフッター中側</p>
				<?php endif; ?>
			</div>
			<div class="footer_r">
				<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(7) ) : else : ?>
				<p>ここはフッター右側</p>
				<?php endif; ?>
			</div>
		</div>
		<div class="clear"></div>
		<!-- 追加ウィジェット ここまで-->
		<?php } ?>

		<h3>
			<?php if (is_home()) { ?>
			<?php bloginfo( 'name' ); ?>
			<?php } else { ?>
			<?php wp_title(''); ?>
			<?php } ?>
		</h3>

		<p>
			<?php bloginfo('description'); ?>
		</p>
		<p class="copy">Copyright&copy;
			<?php bloginfo('name');?>
			,
			<?php the_date('Y');?>
			All Rights Reserved.</p>
		<p><span style="color: #e6e6e6; font-size: 8pt;">WordPress Theme<a style="color: #e6e6e6;" href="https://junichi-manga.com/stinger5-cheetah-download/" target="_blank"> "Stinger5-Cheetah</a>"</span></p>

	</div>
	<!-- /#footer_layout 終わり -->
</footer>


<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る 終わり -->
<?php  wp_enqueue_script('base',get_bloginfo('template_url') . '/js/base.js', array()); ?>

<?php if(is_mobile()) { //PCのみ追尾広告のjs読み込み ?>
<?php } else { ?>
<?php  wp_enqueue_script('scroll',get_bloginfo('template_url') . '/js/scroll.js', array()); ?>
<?php } ?>

<?php wp_footer(); ?>
</body></html>

 

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

/*--------------------------------
footerの構造を変えて、PageSpeed Insights の対策
---------------------------------*/

/* フッターの背景のサイズ */	
footer {
	margin: 0;
	/* ↑マージンを追記の値を0へ */
	padding: 20px 0;
	/* ↑マージンで横にはみ出した部分を戻すの値を0へ */
}

#footer_w {
	width: 100%;
	/* ↑2000pxの指定をやめて100%へ */
	margin: 20px auto;
	text-align: left;
}


@media only screen and (min-width: 780px) {
	#footer_layout {
		max-width: 1100px;
		padding: 0 10px;
		margin: 0 auto;
	}
	/* ↑PCで表示の時のみ、フッターに横幅を指定 */
}

 

この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回 コンテンツのサイズを表示域に合わせる ←今ここ