フッターデザイン
Copyright (C) 外国人ビザ・在留資格申請サポートセンター. All Rights Reserved.
Copyright © 出石そば いづも. All Rights Reserved.
.l-footer{background-color:#EEEEEE; margin-top:30px!important;}/*フッター部分の背景色*/
.l-footer__footer{border-top:solid 1px #272727;}/*コピーライトの上部の罫線有*/
/*--------------------
フッターエリアの変更
---------------------*/
/*よく分からない灰色罫線を消す*/
.l-footer,
.l-footer__body {
border-top: none !important;
}
メニューで設定する。
カスタムリンクを使う。footer_nav_mobile
<i class="fas fa-mobile-alt fa-2x"></i>電話で問合せ
<i class="far fa-envelope fa-2x"></i>メールで問合せ
<i class="fab fa-line fa-2x"></i>LINEお問合せ
【CSS背景色変更】
/*スマホ版下部の追従メニュー*/
#footer-sticky-nav li:nth-of-type(1){background-color:#46c4db!important;}
#footer-sticky-nav li:nth-of-type(2){background-color:#5dd5ab!important;}
フッターを全幅にする
【 HTML 】
<div class="nav-text">
<img src="/wp/wp-content/plugins/my-snow-monkey/img/rogo2.png" />
<p>【営業時間】AM 11:00 ～ PM 9:00（毎週木曜日定休）</p>
<p>【店舗住所】〒653-0037 兵庫県神戸市長田区大橋町5-3-1 アスタプラザイースト 115号</p>
<p>【電話番号】<span class="deco-style2">078-611-4738</span></p>
</div>
<div class="full-width">
<ul class="navlink">
<li><a href=""><img src="/wp/wp-content/plugins/my-snow-monkey/img/menu-nav1.jpg" /></a></li>
<li><a href=""><img src="/wp/wp-content/plugins/my-snow-monkey/img/menu-nav2.jpg" /></a></li>
<li><a href=""><img src="/wp/wp-content/plugins/my-snow-monkey/img/menu-nav3.jpg" /></a></li>
<li><a href=""><img src="/wp/wp-content/plugins/my-snow-monkey/img/menu-nav4.jpg" /></a></li>
</ul>
</div>
【 CSS 】
.navlink{
display: -webkit-flex;
display: flex;
list-style:none!important;
margin-left:-20px!important;
}
.navlink a:hover{
position:relative;
top:1px;
left:1px;
}
.navlink a:hover{
filter: Alpha(opacity=70); /* IE系 */
-moz-opacity: 0.7; /* Mozzila系 */
opacity: 0.7;
}
/*不要なロゴとサイト説明文を消す*/
.l-footer__header .c-site-branding__title, .l-footer__header .c-site-branding__description{display:none;}
/*不要なロゴとサイト説明文を消す*/
.l-footer__body .c-site-branding__title, .l-footer__body .c-site-branding__description{display:none;}
/*コピーライト*/
.c-copyright {
text-align:center;
font-size:80%;
}
@media screen and (max-width: 900px) {
.navlink{
display: -webkit-flex;
display: flex;
flex-wrap:wrap;
justify-content: space-between;
}
.navlink li{
width : -webkit-calc(100% / 2 - 5px) ;
width : calc(100% / 2 - 5px) ;
margin:0px 5px 5px 0px;
}
.houhou-box .style:nth-child(2n){
margin-right:0px;
}
.c-copyright {font-size:70%;}
.nav-text {font-size:80%;}
}
フッターを全幅にする その2
※ULだと画像がズレるのでdivで対応
【 HTML 】
<div class="full-width">
<div class="content-foot">
<img src="https://felice-hairsalon.com/mail/wp-content/plugins/my-snow-monkey/img/recruit-line.jpg" />
</div>
<div class="content-foot_nav">
<div><a href="https://felice-hairsalon.com/mail/"><img src="https://felice-hairsalon.com/mail/wp-content/plugins/my-snow-monkey/img/br-foot01.jpg" /></a></div>
<div><a href="https://felice-hairsalon.com/mail/voice/"><img src="https://felice-hairsalon.com/mail/wp-content/plugins/my-snow-monkey/img/br-foot02.jpg" /></a></div>
<div><a href="https://felice-hairsalon.com/mail/welfare/"><img src="https://felice-hairsalon.com/mail/wp-content/plugins/my-snow-monkey/img/br-foot03.jpg" /></a></div>
<div><a href="https://felice-hairsalon.com/mail/kyujin-2/"><img src="https://felice-hairsalon.com/mail/wp-content/plugins/my-snow-monkey/img/br-foot04.jpg" /></a></div>
<div><a href="https://felice-hairsalon.com/"><img src="https://felice-hairsalon.com/mail/wp-content/plugins/my-snow-monkey/img/br-foot05.jpg" /></a></div>
</div></div>
【 CSS 】
/*footerバナー*/
.content-foot_nav{
width:95%;
display: flex;
justify-content: space-between;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
.content-foot_nav div{margin-left:5px; margin-right:5px;}
.content-foot_nav a:hover{
position:relative;
top:1px;
left:1px;
}
.content-foot_nav a:hover{
filter: Alpha(opacity=70); /* IE系 */
-moz-opacity: 0.7; /* Mozzila系 */
opacity: 0.7;
}
@media screen and (max-width: 481px) {
.content-foot_nav{
width:100%;
flex-wrap: wrap;
}
.content-foot_nav div{
width: 45%;
text-align: center;
margin-top:5px;
}
.content-foot_nav:after {
display: block;
content:"";
width: 45%;/*幅を上と同じにする*/
}
}
下部追従
【 HTML 】
フッター：ブロック
<div id="footer-box">
<img class="img_center" src="/wp-content/plugins/my-snow-monkey/img/footer-img.gif">
<ul class="none">
<li><a href="https://utatane.pro/">トップページ</a></li>
<li><a href="https://utatane.pro/houmon-price">訪問ペット葬儀料金</a></li>
<li><a href="https://utatane.pro/reien-price">ペット霊園葬儀料金</a></li>
<li><a href="https://utatane.pro/houhou">安置方法</a></li>
<li><a href="https://utatane.pro/service">粉骨パウダーサービス</a></li>
<li><a href="https://utatane.pro/company">会社概要</a></li>
<li><a href="https://utatane.pro/blog">ブログ</a></li>
<li><a href="https://utatane.pro/contact">お問い合わせ</a></li>
</ul>
<address>Copyright © 2021-2022 ペット葬儀うたたね関西.</address>
<img class="nonesub" src="/wp-content/plugins/my-snow-monkey/img/border-foot.gif">
</div>
<div class="kotei-block nonepc">
<ul class="none">
<li><a href="tel:0120774886"><img src="/wp-content/plugins/my-snow-monkey/img/foot-contact-osaka.jpg" /></a></li>
<li><a href="tel:0120445908"><img src="/wp-content/plugins/my-snow-monkey/img/foot-contact-wakayama.jpg" /></a></li>
</ul>
</div>
固定ページ：TOPページHTML
<div class="kotei-block nonemobi">
<img class="img_center" src="/wp-content/plugins/my-snow-monkey/img/br-side.png">
</div>
【 CSS 】
/*ドロップナビの説明文を消す*/
.p-drop-nav small{display:none!important;}
/*お問い合わせ追従*/
.page-template-default .nonesub{display:none;}
.home .nonesub{display:block!important;}
#footer-box ul{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
flex-wrap: wrap;
margin-top:20px;
}
#footer-box ul li{margin:0px 10px!important;}
.kotei-block{
width:100%;
position: fixed;
bottom:0;
z-index:1000;
left: 0;
right: 0;
margin: auto!important;
background-image:url(img/bg-side.png);
}
#footer-box address{
text-align:center;
font-size:90%;
margin-top:20px;
}
.c-copyright{display:none;}/*不要なコピーライトを消す*/
@media screen and (max-width: 481px) {/*mobile*/
#footer-box ul {margin-left:-20px!important;}
#footer-box address{font-size:70%;}
}
/*スマホのみ固定*/
.kotei-block ul{
display: -webkit-flex;
display: flex;
margin-left:-20px;
}
3カラム、スマホ1カラム：サンプル１
【 HTML 】
<div id="kotei-footr">
<p>【年中無休】【即日対応】【相談無料】家電製品強化買取中！お気軽にお問い合わせください！！</p>
<div class="content-foot_nav">
<div><img src="https://memory-life.net/wp-content/plugins/my-snow-monkey/img/kotei-footer1.png" /></div>
<div><a href="https://page.line.me/?accountId=xoy6514p"><img src="https://memory-life.net/wp-content/plugins/my-snow-monkey/img/kotei-footer2.png" /></a></div>
<div><a href="https://memory-life.net/contact"><img src="https://memory-life.net/wp-content/plugins/my-snow-monkey/img/kotei-footer3.png" /></a></div>
</div></div>
<div class="flex-footer">
<div class="box-footer">
<img class="img_set1" src="https://memory-life.net/wp-content/plugins/my-snow-monkey/img/logo-footer.png" />
<p class="s10">メモリーライフは不用品回収、遺品整理、<br />ゴミ屋敷片付けの専門業者です</p>
<div class="check2 foot-check">
<div><a href="https://www.instagram.com/memorylife.info/" target="_blank"><img src="https://memory-life.net/wp-content/plugins/my-snow-monkey/img/icon1.gif" /></a></div>
<div><a href="https://www.facebook.com/memorylife2014/" target="_blank"><img src="https://memory-life.net/wp-content/plugins/my-snow-monkey/img/icon2.gif" /></a></div>
<div><a href="https://twitter.com/memorylife_1?ref_src=twsrc%5Etfw%7Ctwcamp%5Eembeddedtimeline%7Ctwterm%5Eprofile%3Amemorylife_1%7Ctwgr%5EeyJ0ZndfZXhwZXJpbWVudHNfY29va2llX2V4cGlyYXRpb24iOnsiYnVja2V0IjoxMjA5NjAwLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X2hvcml6b25fdHdlZXRfZW1iZWRfOTU1NSI6eyJidWNrZXQiOiJodGUiLCJ2ZXJzaW9uIjpudWxsfSwidGZ3X3NrZWxldG9uX2xvYWRpbmdfMTMzOTgiOnsiYnVja2V0IjoiY3RhIiwidmVyc2lvbiI6bnVsbH0sInRmd19zcGFjZV9jYXJkIjp7ImJ1Y2tldCI6Im9mZiIsInZlcnNpb24iOm51bGx9fQ%3D%3D&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3FbuttonType%3DFollowButton%26query%3D%2540memorylife_1%26widget%3DButton" target="_blank"><img src="https://memory-life.net/wp-content/plugins/my-snow-monkey/img/icon3.gif" /></a></div>
</div>
</div>
<div class="box-footer">
<table>
<tr>
<th>住所：</th>
<td>〒001-0910<br />札幌市北区新琴似10条3丁目1-26</td>
</tr>
<tr>
<th>業務内容：</th>
<td>遺品整理／生前整理／不用品回収／ゴミ屋敷片付け／買取／美装</td>
</tr>
<tr>
<th>古物商許可：</th>
<td>北海道公安委員会 第101280002815</td>
</tr>
<tr>
<th>メールアドレス：</th>
<td>info＠memorylife.info<br /><span class="fsmall gray">@マークを半角にして送信してください。</span></td>
</tr>
</table>
</div>
<div class="box-footer">
<div class="flex_box_sp">
<div><a href="https://memory-life.net/plan"><img src="https://memory-life.net/wp-content/plugins/my-snow-monkey/img/btm1.jpg" /></a></div>
<div><a href="https://memory-life.net/kaitori"><img src="https://memory-life.net/wp-content/plugins/my-snow-monkey/img/btm2.jpg" /></a></div>
</div>
<p class="fbig1 has-text-align-center s10"><b>【 サービス一覧 】</b></p>
<ul class="none global-nav">
<li class="arrow"><a href="https://memory-life.net/service/relics">遺品整理・生前整理</a></li>
<li class="arrow"><a href="https://memory-life.net/service/huyouhin">不用品回収</a></li>
<li class="arrow"><a href="https://memory-life.net/service/cleaning">ゴミ屋敷片付け</a></li>
<li class="arrow"><a href="https://memory-life.net/service/tekkyo">残置物撤去 </a></li>
<li class="arrow"><a href="https://memory-life.net/service/housecleaning">ハウスクリーニング・特殊清掃 </a></li>
<li class="arrow"><a href="https://memory-life.net/service/hogo">生活保護者の対応</a></li>
</ul>
</div>
</div>
【 CSS 】
/*下部お問い合わせ*/
#kotei-footr{
width:100%;
position: fixed;
bottom:0;
z-index:1000;
left: 0;
right: 0;
margin: auto!important;
}
.content-foot_nav{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
background-color:#fee0a4;
}
#kotei-footr p{
text-align:center;
color:#FFFFFF;
background-color:#ef8134;
border-top:solid 1px #FFFFFF;
padding:1px 5px;
}
footer {background-color:#EEEEEE; font-size:90%;}/*フッター部分の背景色*/
.img_set1{width:80%;}
.img_set2{width:30%;}
@media screen and (min-width: 482px) {/*PC*/
.flex-footer{
display: -webkit-flex;
display: flex;
}
.box-footer:nth-of-type(1){
width:25%;
/*background-color:#936;*/
text-align:center;
padding-right:20px;
}
.box-footer:nth-of-type(2){
width:55%;
/*background-color:#6CC;*/
padding:0px 20px;
border-right:solid 1px #999999;
border-left:solid 1px #999999;
}
.box-footer:nth-of-type(3){
width:30%;
padding-left:20px;
/*background-color:#39C;*/
}
.flex-footer .style1{
font-size:1.2em;
border-bottom:solid 1px #272727;
margin-top:20px;
}
.flex_box_sp div{margin-bottom:10px;}
}
/*SNS*/
.foot-check{
justify-content: center;
margin-top:20px;
}
.foot-check div:nth-of-type(2){padding-left:5px; padding-right:5px;}
/*会社概要*/
.box-footer table{
width:100%;
border-collapse:collapse;
empty-cells:show;
}
.box-footer table th{
border-bottom:1px dotted #CCCCCC;
padding:10px;
text-align:left;
font-weight:normal;
}
.box-footer table td{
border-bottom:1px dotted #CCCCCC;
padding:10px;
}
@media screen and (max-width: 481px) {
.flex-footer{font-size:80%!important;}
/*カラム並び買え*/
.flex-footer{
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.box-footer:nth-of-type(1){width:70%; order:3; margin-left:auto; margin-right:auto; text-align:center;}
.box-footer:nth-of-type(2){width:100%; order:2;}
.box-footer:nth-of-type(3){width:100%; order:1;}
.flex_box_sp{
display: -webkit-flex;
display: flex;
}
.flex_box_sp div{margin:5px;}
.box-footer table{margin-bottom:20px;}
.box-footer table th, .box-footer table td{padding:3px!important;}
.box-footer table th{font-size:90%!important;}
.check2{margin-top:10px!important;}
/*フッターなび*/
.global-nav {
margin: 0 0 30px;
padding: 0;
border-top: 1px solid #aaa;
font-size: 13px;
list-style-type: none;
}
/*clearfix*/
.global-nav:after {
content: "";
clear: both;
display: block;
}
.global-nav li {
float: left;
width: 50%;
text-align: left;
font-size:70%!important;
border-bottom: 1px solid #aaa;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*奇数のli要素に適応*/
.global-nav li:nth-child(odd) {
border-right: 1px solid #aaa;
}
.global-nav a {
display: block;
line-height: 44px;
color: #000;
text-decoration: none;
}
.global-nav a:hover {
color: #000;
background: #e6e6e6;
}
.arrow{
position: relative;
display: inline-block;
padding-left: 25px;
}
.arrow::before{
content: '';
width: 6px;
height: 6px;
border: 0px;
border-top: solid 2px #5bc0de;
border-right: solid 2px #5bc0de;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 50%;
left: 10px;
margin-top: -4px;
}
}
3カラム、スマホ1カラム：サンプル２
【 HTML 】
<div class="nav-text">
<div class="box-contants">
<img src="https://uekou-camp.com/wp/wp-content/uploads/rogo3.png" width="50%" />
</div>
<div class="box-contants">
<p>〒000-000 東京都</p>
<p>【TEL】0000-00-0000</p>
<p>【FAX】0000-00-0000</p>
<p>【キャンプ期間】年中無休</p>
<p>【事務所営業時間】9:00～17:00</p>
</div>
<div class="box-contants">
<ul class="none">
<!--<li class="page-item-16"><a href="https://uekou-camp.com/wp/" aria-current="page"><span><i class="fas fa-home fa-lg fa-fw"></i> トップページ</span></a></li>-->
<li class="menu-item-146"><a href="https://uekou-camp.com/wp/contact"><span><i class="far fa-envelope fa-lg fa-fw"></i> お問い合わせ</span></a></li>
<li class="menu-item-149"><a href="http://yahoo"><span><i class="far fa-heart fa-lg fa-fw"></i> インスタグラム</span></a></li>
<li class="menu-item-225"><a href="https://uekou-camp.com/#yoyaku"><span><i class="fas fa-pencil-alt fa-lg fa-fw"></i> ご予約</span></a></li>
</ul>
</div>
</div>
【 CSS 】
.l-footer{
background-image:url(https://uekou-camp.com/wp/wp-content/plugins/my-snow-monkey/img/bg-footer.jpg);
color:#FFFFFF;
}
.nav-text{
width:1100px;
margin-left:auto;
margin-right:auto;
max-width:100%;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}
.box-contants:nth-of-type(1){
width:20%!important;
}
.box-contants:nth-of-type(2){
width:20%!important;
font-size:90%;
}
.box-contants:nth-of-type(3){
width:60%!important;
text-align:right;
}
.box-contants ul{
display: -webkit-flex;
display: flex;
justify-content: flex-end;
}
.box-contants ul li{margin-left:10px!important;}
.box-contants ul a{
padding:20px 30px!important;
text-decoration:none;
}
.nav-text a:link{color:#FFFFFF;}
.nav-text a:visited{color:#FFFFFF;}
.nav-text a:hover{color:#FFFFFF;}
.nav-text a:active{color:#FFFFFF;}
フッターエリアのCSS
/*--------------------
フッターエリアの変更
---------------------*/
.l-footer-widget-area {
background-image:url(img/bg_footer.jpg);
background-repeat:no-repeat;
/*background-color: #EEEEEE;*/
/*color:#FFFFFF;*/
border-top:solid 1px #999999;
}
@media screen and (min-width: 482px) {/*PCのみ*/
.l-footer-widget-area__item .menu {
display:flex;
justify-content:center
}
.l-footer-widget-area__item .menu .menu-item{
margin:0 2em 0 0;
}
}
.l-footer-widget-area__item .widget_text{
display:flex;
justify-content:center;
text-align:center
}
/*.l-footer-widget-area__item .textwidget{
border: solid 1px #ddd;
padding: 1em 3em
}*/
/*コピーライト*/
.c-copyright {
text-align:center;
font-size:80%;
}
@media screen and (max-width: 481px) {
.l-footer-widget-area__item .menu {text-align:center;}
.c-copyright {font-size:70%;}
}