WordPressで、スマホの下に電話番号を表示する

Daily report

テーマ内のfooter.phpの最下部(</body>の直前)に下記コードを入れる

<!--20231031電話を表示する-->
<div class="footer_fixed">
    <div class="footer_contact">
<a href="/contact">
<i class="fas fa-envelope"></>電話</a>
</div>    
    <div class="footer_tel"><a href="tel:090-xxxx-xxxx">
<i class="fas fa-phone"></i>090-xxxx-xxxx</a>
</div>
</div>
<!--20231031電話を表示する-->

子テーマにfooter.phpを入れる。

次にCSSを追加する。

.footer_fixed{
    position:fixed;
    display:flex;
    width:100%;
    bottom:0;
    left:0;
    z-index:999;
}
.footer_fixed a{
    color: #fff;
    text-decoration: none;
}
.footer_tel{
    width:70%;
    background:#4682B4;
    text-align:center;
    padding:10px 0;
}
.footer_contact{
    width:30%;
    background:mediumblue;
    text-align:center;
    padding:10px 0;
}
@media(min-width:700px){
.footer_fixed{
    display: none;
}
}

コメント

タイトルとURLをコピーしました