ごはん炊けたよ~ッ!

人生を楽しくするヒントが詰まったブログ。

ごはん炊けたよ~ッ!

【はてな】レスポンシブ設定でスマホ表示の時だけ画面下に「ボトムナビゲーション」を設置する方法

※当ブログのコードで不具合が発生した場合の責任は負いかねますので、カスタマイズは自己責任でお願い致します。

 

f:id:kometika:20181222131745j:plain

 

どうも、近松おこめです。

 

 

今回紹介するカスタマイズはレスポンシブ設定で、スマホ表示の時だけ画面下に「ボトムナビゲーション」を表示する方法です。

 

 

文字だけだと分からないと思うので、実際の実装画像をご覧ください。

 

 

f:id:kometika:20181222121105p:plain

 

(PC表示)

 

 

f:id:kometika:20181222121110j:plain

 

(スマホ表示)

 

 

赤枠の部分がスマホの時だけ表示されてますよね。

 

 

これを作るカスタマイズです。

 

 

それでは、さっそく行ってみましょう!

 

 

スマホ表示の時だけ「ボトムナビゲーション」を設置する方法

 

www.bambi.pro

 

 

今回のカスタマイズはこちらの、元CAバンビ様の記事を参考にさせて頂きました。

 

 

記事で紹介されている方法では、

 

  1. HOMEボタン
  2. おすすめ記事ボタン
  3. 読者登録ボタン
  4. Twitterボタン

 

の4つを実装しているんですが、ここに上に戻るボタンをプラスしたカスタマイズを今回は紹介していきますね。

 

HTMLコード

<!-- bottom navigation -->

<ul class="bottom-menu">
<li>
<!-- ↓↓項目1. ホーム  の部分にホームのURLを入れる -->
<a href="">
<i class="blogicon-home"></i><br><span class="mini-text">ホーム</span></a>
</li>

<li class="menu-width-max">
<!-- ↓↓項目2. おすすめ すぐ下の"#"はそのまま -->
<a href="#"><i class="blogicon-list"></i><br><span class="mini-text">おすすめ</span></a>

<ul class="menu-second-level">

<!-- 下の"#"の部分におすすめ"記事URL"とタイトル等を入れる -->
<li><a href="#(記事URL)">#(記事タイトル)</a></li>
<li><a href="#(記事URL)">#(記事タイトル)</a></li>
<li><a href="#(記事URL)">#(記事タイトル)</a></li>
<li><a href="#(記事URL)">#(記事タイトル)</a></li>
<li><a href="#(記事URL)">#(記事タイトル)</a></li>
</ul>
</li>
<li>
<!-- ↓↓項目3. 読者登録 #の部分の書き換えが必要です -->
<!-- ~hatena.ne.jp/自分のはてなID/ブログURL(https://はつけない。独自ドメインでは無い)/subscribe -->
<a href="https://blog.hatena.ne.jp///subscribe" target="_blank">
<i class="blogicon-hatenablog"></i><br><span class="mini-text">読者登録</span></a>
</li>
<li>
<!-- ↓↓項目4. ツイッター #の部分の書き換えが必要です-->
<!-- screen_name=自分のTwitterIDの@マーク以降を入れる -->
<a href="https://twitter.com/intent/follow?screen_name=#">
<i class="blogicon-twitter"></i><br><span class="mini-text">Follow</span></a>
</li>

<li>

<!-- ↓↓項目5. TOPに戻る-->
<a href="#top">
<i class="blogicon-chevron-up"></i><br><span class="mini-text">上に戻る</span></a>
</li>

</ul>

 

青文字の部分だけ書き換えて下さい。

 

 

f:id:kometika:20181222124955p:plain

 

完成したコードは、ヘッダ→タイトル下に貼り付けます。

 

CSSコード

/*========================
 smartphone bottom menu
 ========================*/


.mini-text{font-size:10px;}/*文字大きさ*/

ul.bottom-menu {
position: fixed;
left:0;
bottom:0;
width: 100%;
height:45px;/*高さ*/
margin:0;
padding:0;
background-color:#009854;/*背景色*/
border-top:2px solid #009854;/*バーの上の線の色*/
border-bottom:2px solid #009854;/*バーの下の線の色*/
z-index:30;}

ul.bottom-menu li {
float:left;
width:20%;
background-color:#009854;/*背景色*/
list-style-type:none;
text-align:center;
font-size:20px;/*アイコンのサイズ*/}

.bottom-menu li a {
display: block;
color:#fff;/*アイコン&文字の色*/
padding-top:10px;
padding-bottom:5px;
line-height:10px;
text-decoration:none;}

.bottom-menu li a:hover {
color:#a9a9a9;/*マウスオーバー時の色*/}

/* === 展開メニュー === */

ul.menu-second-level {
visibility: hidden;
opacity: 0;
z-index:1;}

ul.menu-second-level li a{
border-top:1px dashed #a9a9a9;/*展開の枠点線色*/
font-size:15px;/*展開メニューの文字サイズ*/
line-height:30px;/*文字の縦幅*/}

.menu-second-level li a:hover {
height:100%;
background: lightgrey;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
position: absolute;
bottom: 47px;/*高さ*/
left: 0;
box-sizing: border-box;
width: 100%;
padding:0;}

li.menu-width-max:hover ul.menu-second-level {
bottom: 47px;/*高さ*/
visibility: visible;
opacity: 1;}

li.menu-width-max ul.menu-second-level li {
float: left;
width: 100%;
border: none;}

/*PC表示の際はボトムメニューは表示しない*/
@media(min-width: 768px){
.bottom-menu{display:none; }
}

/*スマホの時だけ*/
@media(max-width: 767px){

/*ボトムメニュー付けたのでフッタを底上げする*/
#footer{margin-bottom:48px;}
}

 

赤文字の部分を書き換えれば、色が変えられます。

 

 

f:id:kometika:20181222125218p:plain

 

こちらのコードはデザインCSSの部分に貼り付けます。

 

 

/*スマホの時だけ*/
@media(max-width: 767px){

/*ボトムメニュー付けたのでフッタを底上げする*/
#footer{margin-bottom:48px;}
}

 

なお、最後のこの部分はフッタが隠れてしまわないようにするカスタマイズなので、フッタに特に何もない方は消してください。

テーマによっては出来ない可能性もあります…。

f:id:kometika:20181222131015j:plain

 

というわけで、レスポンシブ設定でスマホ表示の時だけ画面下に「ボトムナビゲーション」を表示する方法でした。

 

 

ぼくの使用している「UnderShirt」では問題なかったですが、テーマによってはカスタマイズが反映されなかったり、表示がおかしくなってしまう可能性があります。

 

 

カスタマイズの際は予めバックアップを取ることを忘れないでおきましょう。

 

 

それでは、今日はこの辺りで!!