Tarokenlog

Contact

スマホの時、下にいい感じにナビゲーションを設置する方法【WordPress】

スマホの時に下にナビメニューがあるブログやメディアをみて「いいなぁ〜」「使いやすそう〜」と思ったので作ってみました^ ^

簡単にHTMLとCSSで出来ますので試してみてください〜

今回はこのブログ(WordPress)で実際につかっています^ ^
＊気になる方はスマホでみてみてください〜

「使いにくいかどうか・何があったら便利か」ご意見いただけますと幸いです〜


スマホ時にいい感じのナビメニューを表示しよう〜〜

footer.phpのfooterの閉じタグ以下にこれを追加

<nav class="bottom-sticky-nav">
    <ul>
        <li><a href="#"><i class="fa fa-home"></i><span>Home</span></a></li>
        <li><a href="#"><i class="fa fa-user"></i><span>Profile</span></a></li>
        <li><a href="#"><i class="fa fa-briefcase"></i><span>Service</span></a></li>
        <li><a href="#" ><i class="fa fa-laptop"></i><span>Portfolio</span></a></li>
        <li><a href="#" ><i class="fa fa-envelope"></i><span>Mail</span></a></li>
    </ul>
</nav>

＊FontAwesomeを使っています。

するとfooterの下はこんな感じになります。

このままだと超きもいですねww

CSSでスタイリングしていきましょう〜^ ^

style.cssに以下を追加

//スマホ以外の時
.bottom-sticky-nav {
display: none;
}
//スマホの時
@media (max-width: 720px) {
.bottom-sticky-nav {
height: 50px;
position: fixed;
display: block;
background: #ffffff;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
.bottom-sticky-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-evenly;
}
.bottom-sticky-nav ul li {
flex: 1;
}
.bottom-sticky-nav ul li a {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
height: 50px;
color: #00587a;
}
.bottom-sticky-nav ul li a:hover,
.bottom-sticky-nav ul li a:focus {
text-decoration: none;
}
.bottom-sticky-nav ul li a i {
font-size: 18px;
}
.bottom-sticky-nav ul li a span {
font-size: 12px;
line-height: 1.2;
}
footer {
margin-bottom: 50px;
}
}

これで見た目はだいたい完成〜〜
こんな感じになります。

WordPressの場合、もうちょいいじる

WordPressの場合、開いているページのナビメニューをハイライトだったりスタイルを変えたいかと思います。
こんな感じ

先ほどのfooter.phpを以下のように変更

<nav class="bottom-sticky-nav">
    <ul>
        <li><a href="/" class="<?php if ( is_home() ) { echo ' is-active'; } ?>"><i class="fa fa-home"></i><span>Home</span></a></li>
        <li><a href="~/profile" class="<?php if ( is_page('profile') ) { echo ' is-active'; } ?>"><i class="fa fa-user"></i><span>Profile</span></a></li>
        <li><a href="~/service" class="<?php if ( is_page('service') ) { echo ' is-active'; } ?>"><i class="fa fa-briefcase"></i><span>Service</span></a></li>
        <li><a href="#" ><i class="fa fa-laptop"></i><span>Portfolio</span></a></li>
        <li><a href="#" ><i class="fa fa-envelope"></i><span>Mail</span></a></li>
    </ul>
</nav>

＊リンクの箇所やis_page() / is_home()の箇所は必要に応じて編集してください〜〜〜

使い方：もし〇〇ページだったら、is-activeのクラスを追加する
<?php if ( is_page(‘ページ名') ) { echo ‘ 追加したいクラス名'; } ?>

この他にもis_home()、is_category()、is_search()、is_single()、is_date()、is_archive()などありますので必要に応じて使ってみてください

そしてCSSにis-activeのスタイルを追加

.bottom-sticky-nav ul li a.is-active {
background: #00587a;
color: #ffffff;
}

CSS全体は以下

.bottom-sticky-nav {
display: none;
}
@media (max-width: 720px) {
.bottom-sticky-nav {
height: 50px;
position: fixed;
display: block;
background: #ffffff;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
.bottom-sticky-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-evenly;
}
.bottom-sticky-nav ul li {
flex: 1;
}
.bottom-sticky-nav ul li a {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
height: 50px;
color: #00587a;
}
.bottom-sticky-nav ul li a:hover,
.bottom-sticky-nav ul li a:focus {
text-decoration: none;
}
.bottom-sticky-nav ul li a.is-active {
background: #00587a;
color: #ffffff;
}
.bottom-sticky-nav ul li a i {
font-size: 18px;
}
.bottom-sticky-nav ul li a span {
font-size: 12px;
line-height: 1.2;
}
footer {
margin-bottom: 50px;
}
}

flexboxを使っているのでちゃんとベンダープレフィックスしておきましょう〜^ ^

.bottom-sticky-nav {
display: none;
}
@media (max-width: 720px) {
.bottom-sticky-nav {
height: 50px;
position: fixed;
display: block;
background: #ffffff;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
}
.bottom-sticky-nav ul {
list-style: none;
padding: 0;
margin: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.bottom-sticky-nav ul li {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.bottom-sticky-nav ul li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 10px;
height: 50px;
color: #00587a;
}
.bottom-sticky-nav ul li a:hover,
.bottom-sticky-nav ul li a:focus {
text-decoration: none;
}
.bottom-sticky-nav ul li a.is-active {
background: #00587a;
color: #ffffff;
}
.bottom-sticky-nav ul li a i {
font-size: 18px;
}
.bottom-sticky-nav ul li a span {
font-size: 12px;
line-height: 1.2;
}
footer {
margin-bottom: 50px;
}
}

あとは自分の好きなようにカスタマイズしてみてください

メールを開かせるようにしたい場合はmailtoを使えばオッケーです〜
<a href="mailto:メールアドレス”></a>

以上です〜


Posted

in

Tags:

, ,