■
Wordpressでのスマートフォン用のfooter部分のソースコード。スマホでのみ表示を切り替えたいときに使用します。
HTML
<footer id="footer"> <section class="footer_cat"> <h1>カテゴリー</h1> <ul> <li><a href="#">カテゴリ</a></li> <li><a href="#">カテゴリ</a></li> <li><a href="#">カテゴリ</a></li> <li><a href="#">カテゴリ</a></li> <li><a href="#">カテゴリ</a></li> <li class="last"><a href="#">カテゴリ</a></li> </ul> </section> <!-- /footer_cat --> <div class="ad"> <!-- 広告コードを張り付ける --> </div> <!-- /ad --> <nav class="footer_menu"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">カテゴリ</a></li> <li><a href="#">カテゴリ</a></li> <li><a href="#">カテゴリ</a></li> <li><a href="#">カテゴリ</a></li> <li><a href="#">カテゴリ</a></li> <li><a href="#">カテゴリ</a></li> <li><a href="#">カテゴリ</a></li> </ul> </nav> <!-- /footer_menu --> <div class="copyright"><small>©<?php bloginfo('name'); ?></small></div> </footer>
CSSはこちら
#footer { background: #ececec; zoom: 1; padding: 20px 0 0 } #footer:before { content: ""; display: block } #footer:after { content: ""; display: block; clear: both } #footer .ad { margin: 0 10px 20px; text-align: center } .footer_cat { background: #fff; margin: 0 10px 20px; border: 1px solid #c6c6c6; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px } .footer_cat h1 { background: #f8f8f8; padding: 13px 10px 10px; font-size: 80%; font-weight: 700; text-align: center; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px } .footer_cat h1 span { display: block; font-size: 94% } .footer_cat ul li{ border-top: #c6c6c6 1px solid; font-size: 87%; display: block } .footer_cat ul li a { display: block; padding: 13px 40px 11px 15px; text-decoration: none; color: #000; background: url(../images/common/icon_arrow.png) right center no-repeat #fff; background-size: 25px 18px; vertical-align: top; line-height: 120%; position: relative } .footer_cat ul li a:hover { background-color: #f8f8f8 } .footer_cat ul li a:before { font-size: 18px; position: absolute; left: 15px; top: 11px } .footer_cat ul li .icon-facebook, .footer_cat ul li .icon-mail, .footer_cat ul li .icon-twitter { padding-left: 40px!important } .footer_cat ul .last a{ -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; border-bottom-right-radius: 10px } .footer_cat .link a { background: url(../images/common/icon_link.png) right center no-repeat #fff; background-size: 32px 17px } .footer_menu ul { border-bottom: #c6c6c6 1px solid; zoom: 1; overflow: hidden; margin: 0 0 10px } .footer_menu ul:before { content: ""; display: block } .footer_menu ul:after { content: ""; display: block; clear: both } .footer_menu ul li { padding: 0; font-size: 87%; font-weight: 700; text-align: center; width: 50%; float: left; margin: 0 0 0 -1px; border-top: #c6c6c6 1px solid; border-left: #c6c6c6 1px solid } .footer_menu ul li a { color: #000; text-decoration: none; display: block; background: #fff; padding: 12px 0 10px } .footer_menu ul li a:hover { background-color: #f8f8f8 } .copyright { color: #999; -webkit-font-smoothing: antialiased; font-size: 87%; text-align: center } .copyright small { font-size: 100% }