スマートフォン向けのサイトメニューの作成

はじめに

このサイトでは、はてなブログを使用していますが、スマホでサイトを表示させると、以下の左の図のようにメニュー内の文字が収まらずにはみ出してしまいます。

一方、今回改善した結果が右の図のようになります。

f:id:tk0137:20210908190325j:plain   f:id:tk0137:20210908185928j:plain

右の改善した方のメニュー表示では、項目数こそ減らしたものの、以前のメニューと比べても見やすさが格段に上がりました。

また、簡単ではありますが、以下の図のようにメニューの項目をタップするとその配下にあるメニューも表示される仕組みも実現できました。

f:id:tk0137:20210908221418j:plain

以下にこのメニューを作成するまでの過程を簡単にご紹介させていただきたいと思います。

以下でははてなブログ内での説明にはなりますが、HTMLコード、CSSコードの記述が中心ですので、はてなブログ以外のサイトにも活かすことは可能であると思います。

少しでも皆様のご参考になればと思います。

参考記事

以下の2つのサイト様を見させていただきました。

ブログのスマホ対応。使いやすいデザインのグローバルメニューでナビゲーション – ハテブカスタム

【レスポンシブ】スマホ固定ボトムメニュー(フッターメニュー)の表示方法。CSSコピペでOK!★ボトムナビゲーションでアクセスUP! – バンビの初心者ブログ教室

これらのサイト様は参照、被参照の関係にありますが、どちらを拝見してもとても勉強になりました。

手順

スマートフォン向けのメニューを作成するにあたり、今回は

HTMLCSS

という2種類のコードを貼り付けていきます。

まずはCSSの方から紹介させていただきます。

CSSソースコード

以下は私が現時点で実際に使用しているメニューのデザインを実現するCSSコードになります。


/*========================
 smartphone bottom menu
 ========================*/
/*PC表示の際はボトムメニューは表示しない*/
@media(min-width: 768px){
ul.bottom-menu{display:none;}
}
/*スマホの時だけ*/
@media(max-width: 767px){
/*ボトムメニューを付けたのでフッタを底上げする*/
#footer{margin-bottom:48px;}
#globalmenu{display:none;}
}
/*iPhoneX*/
ul.bottom-menu{
padding-bottom:env(safe-area-inset-bottom);
}
.mini-text{font-size:10px;}/*文字大きさ*/
ul.bottom-menu {
position: fixed;
left:0;
bottom:0;
width: 100%;
height:45px;/*高さ*/
margin:0;
padding:0;
background-color:#f5f5f5;/*背景色*/
border-top:2px solid #808080;/*バーの上の線*/
border-bottom:2px solid #808080;/*バーの下の線*/
z-index:30;}
ul.bottom-menu li {
float:left;
width:25%;
background-color:#f5f5f5;/*背景色*/
list-style-type:none;
text-align:center;
font-size:25px;/*アイコンのサイズ*/}
.bottom-menu li a {
display: block;
color:#808080;/*アイコン&文字の色*/
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;}

このコードのポイントは最初の行に記述してある以下のコードです。

@media(min-width: 768px){
ul.bottom-menu{display:none;}
}

@media(max-width: 767px){ 
#footer{margin-bottom:48px;}
#globalmenu{display:none;}
}

min-width: 768pxは表示の幅が768px以上の場合という条件指定になります。

上のコードでは表示の幅が768px以上の場合はボトムメニューを表示しない設定になっています。

例えば、パソコンなどの大きさの画面ではボトムメニューは表示されません。

次のmax-width: 767pxというコードは表示の幅が767px以下の場合という条件になります。

上のコードでは表示の幅が767px以下の場合はメニュー分のフッターの底上げとパソコン表示用のメニューを表示しないようにします。

貼り付ける場所

次にCSSコードを貼り付ける場所を下の図に示します。

はてなブログにログインして最初に出てくるメニューから「デザイン」選択します。

f:id:tk0137:20210908193211j:plain

メニューから「デザイン」をクリックすると、以下のような画面が出てきます。

左上の3つのアイコンのうち、レンチが表示されている「カスタマイズ」をクリックします。

「カスタマイズ」をクリックすると、その下にさらにメニューが表示されますので、そのメニューの一番下にある「{}CSSデザイン」をクリックします。

f:id:tk0137:20210908193222j:plain

するとCSSコードを入力する枠が出てきますので、ここをクリックします。

クリックするとコードを貼り付けられるようになるので、上のCSSコードを貼り付けます。

f:id:tk0137:20210908211655j:plain

以上でCSSコードに関する作業は終了です。

今後、色やアイコンを変更することがある場合は少しずつ改良していきます。

CSSコードだけではメニューは表示されないので、骨組みの部分に当たるHTMLを以下に示す手順に沿って記述していきます。

HTMLソースコード

以下に私が現時点で実際に使用しているHTMLコードをURL記述の部分を除いて、示します。


<!-- bottom navigation -->
<ul class="bottom-menu">

    <li>
    <!-- ↓↓項目1. ホーム  #の部分にホームのURLを入れる -->
        <a href="#">
    <i class="blogicon-home"></i><br><span class="mini-text">Top</span></a>
    </li>
    <li class="menu-width-max">
    <!-- ↓↓項目2. おすすめ すぐ下の"#"はそのまま -->
        <a><i class="blogicon-list"></i><br><span class="mini-text">Recommend</span></a>
        <ul class="menu-second-level">
        <!-- 下の"#"の部分におすすめ"記事URL"とタイトル等を入れる -->
        <li><a href="#">ブログ作成</a></li>
        <li><a href="#">iPhoneアプリ作成</a></li>
            </ul>
    </li>
    
    <li>
    <!-- ↓↓項目3. ツイッター ↓↓の部分の書き換えが必要です-->
    <!-- screen_name=自分のツイッターID" ←@マーク以降のIDを入れる -->
        <a href="https://twitter.com/intent/follow?screen_name = 自分のツイッターID">
    <i class="blogicon-twitter"></i><br><span class="mini-text">Follow</span></a>
    </li>
    
    <li class="menu-width-max">
    <!-- ↓↓項目4. About すぐ下の"#"はそのまま -->
        <a><i class="blogicon-account"></i><br><span class="mini-text">About</span></a>
        <ul class="menu-second-level">
        <!-- 下の"#"の部分におすすめ"記事URL"とタイトル等を入れる -->
            <li><a href="#">Profile</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Privacy Policy</a></li>
            </ul>
    </li>
</ul>

各メニューには、<a href=”#”>の#の部分にURLを入力し、リンクを作成する必要があります。

貼り付ける場所

続いて、HTMLコードを貼り付ける場所について以下に示します。

CSSコードを貼り付ける際の手順と同様、最初の左のメニューから「デザイン」をクリックします。

「カスタマイズ」をクリックすると、その下にさらにメニューが表示されますので、そのメニューの下から2番目にある「フッタ」をクリックします。

f:id:tk0137:20210908211113j:plain

「フッタ」をクリックすると、コードを記述するための枠が現れます。

その枠をクリックすると、コードを記述できるようになりますので、ここに上のHTMLコードを貼り付けます。

URLやTwitterのIDなどの各自入力する必要のある箇所は手入力で埋めていきます。

f:id:tk0137:20210908211743j:plain

以上で全ての作業が終了です。

編集を保存したら、実際にスマートフォンからサイトを見てみてください。

先ほど記述したCSSコードのおかげでいい感じのデザインで表示されるかと思います。

これを土台に、細かい調整は各サイトに合わせて行っていただければと思います。

私もこれから手を入れてより見やすくしていこうと思います。

最後に

今回は「スマートフォン向けのサイトメニューの作成」を行なっていきました。

今まではパソコンでの表示しかあまり気にかけてきませんでしたが、気になり始めるとメニューのデザインがあまりにも見にくくて仕方がなくなってしまいました。

なんとか改善しようと方法を調べていましたが、予想以上に簡単な作業でスマホ向けのメニューの型が作れたように思います。

今のメニューのデザインは、他のサイト様で見させていただいたものに近く、灰色なのであまりサイトの緑っぽいカラーと調和していませんが、ゆっくりと試行錯誤を重ねていきたいと思います。

また、役に立ちそうな機能が見つかりましたら、記事に書かせていただこうと思います。

以上、簡単でしたが最後までありがとうございました。