フッタも固定ページや投稿ページに合ったデザインにしています。
1.フッタプログラム
フッタのプログラムは下記になります。
<div id='background'> <div id='footer-contener'> <div id='footer-data'>© 2015 – <?php echo date('Y'); bloginfo('name'); ?> All rights reserved.</div> </div> </div> <?php wp_footer(); ?><!-- WordPress必須設定 --> </body> </html>
※1.背景(id=’background’)は、固定ページや投稿ページと同じ背景です。
※2.フッタコンテナ(id=’footer-contener’)は、PC、タブレット、スマホで表示位置を変えます。
※3.フッタデータ(id=’footer-data)は、レスポンシブ対応にします。
※4.「wp_footer()」はヘッダで指定した「wp_head();」と対の設定でWordPressの必須設定です。
※5.</body>と</html>もヘッダで指定した<body><html>と対の指定です。
2.CSSの設定
バックグラウンドは既に指定しているのでフッタに関連する物だけ設定します。
/*****************************************/ /* フッタ設定 */ /*****************************************/ /* タブレットの場合は左右に8%の余白 */ #footer-contener{margin:0 8%;} #footer-data{font-size:14px;font-size:0.875rem;} /* タブレットの場合は左右に2%の余白 */ @media screen and (min-width:768px) and (max-width:991px){ #footer-contener{margin:0 2%;} } /* スマホの場合は画面枠一杯 */ @media screen and (max-width:767px){ #footer-contener{margin:0 0;} }
※1.PCの場合は左右に8%の余白、タブレットの場合は左右に2%の余白、スマホは画面一杯にしています。
※2.フッタデータはrem指定にする事によりレスポンシブ対応にしています。
