ヘッダーを全幅にするなら、フッターも全幅にしたい！！
そう思いませんか？
今回は、前回のヘッダーを全幅にする方法に続き、
フッターを全幅にする方法を説明します。
通常stinger plusの初期状態ではこのよう空白があります。
このフッターを広げて端から端まで（全幅）にしていきましょう。
新たにレンタルサーバーを選ぶならこれ！
エックスサーバー
- 国内シェアNo.1の高速サーバーなのでストレスフリー！
- 自動バックアップ機能に標準対応で安心運用可能！
| 気になるポイント！ | キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！ |
|---|
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！
またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！
またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。
footer.phpをいじる
それではいつものように子テーマにfooter.phpをコピーして、
作業していきましょう。
下記はfooter.phpの下のあたりのコードです。
<p class="copy">Copyright©
<?php bloginfo( 'name' ); ?>
,
<?php echo date( 'Y' ); ?>
All Rights Reserved.</p>
</footer>
</div>
<!-- /#wrapper -->
<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る 終わり -->
<?php wp_enqueue_script( 'base', get_template_directory_uri() . '/js/base.js', array() ); ?>
<?php if ( st_is_mobile() ) { //PCのみ追尾広告のjs読み込み ?>
<?php } else { ?>
<?php wp_enqueue_script( 'scroll', get_template_directory_uri() . '/js/scroll.js', array() ); ?>
<?php } ?>
<?php wp_footer(); ?>
</body></html>
この2行を見つけましょう。
</div> <!-- /#wrapper -->
見つけたらこの2行をfooter.php上部の
＜footer id=”footer”＞の上へ切り取り+ペーストしてください。こんな感じ
</div>
<!-- /#wrapper -->
<footer id="footer">
<?php get_template_part( 'st-footer-link' ); //フッターリンク ?>
<?php if ( is_active_sidebar( 11 ) ) { //フッターウィジェットがある場合 ?>
<div class="footer-wbox clearfix">
<div class="footer-r">
<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 11 ) ) : else : //フッターウィジェット ?>
<?php endif; ?>
</div>
<div class="footer-l">
<?php get_template_part( 'st-footer-content' ); //フッターのメインコンテンツ ?>
</div>
フッターの場合ほとんどこれで全幅が完成ですが…
ヘッダーの右側に謎の隙間が！！
ふと気づくと、ヘッダーの右側に謎の隙間が出ていました。
調べると、footerの幅だけ,他のheaderやbodyの幅よりも大きくなっていました。
これを何が何でもなくさなければ！
先ほど切り取り+ペーストをした
<!– /#wrapper –>の下に
下記の様に、<div class=”wrap-foot”>を入力します。
</div>
<!-- /#wrapper -->
<div class="wrap-foot">
<footer id="footer">
<?php get_template_part( 'st-footer-link' ); //フッターリンク ?>
<?php if ( is_active_sidebar( 11 ) ) { //フッターウィジェットがある場合 ?>
<div class="footer-wbox clearfix">
そして
の下に<!— /.wrap-foot —>
を入力します
<?php }else{ ?>
<?php get_template_part( 'st-footer-content' ); //フッターのメインコンテンツ ?>
<?php } ?>
<p class="copy">Copyright©
<?php bloginfo( 'name' ); ?>
,
<?php echo date( 'Y' ); ?>
All Rights Reserved.</p>
</footer>
<!-- /.wrap-foot --></div>
<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る 終わり -->
そしてstyle.cssに下記のコードを追加します。
.wrap-foot {
overflow: hidden;
}
これでこのようにヘッダーにできた隙間がなくなります。
あとはフッターの背景色を変更するなり、お好みのフッターにしてください。
以上、ぷるぷるでした。
コピペも良いですが・・・
テーマによってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ！
私が使用したおすすめの本はこちらです。
コメント