THE THOR サイドメニューのCLOSEボタンをもっと使いやすく

THE THOR のサイドメニューを利用しています。

サイドメニューを閉じるにはサイドメニュー上部にあるCLOSEボタンを押すのが王道です。(メインカラムをタップして戻る事も出来る)この動作がやりづらかったのでボタンの位置を変更しました。

THE THOR サイドメニュー CLOSE ボタンの位置を変更 このカスタマイズで出来ること

THOR サイドメニュー CLOSE

サイドメニュー下部にCLOSEボタンを1本の帯として固定表示します。

固定フッターエリアと同じような位置になりサイドメニューとメインコンテンツの行き来がとてもスムーズになります。

※カスタマイズは自己責任でお願いします。

サイドメニューのCLOSEボタンをもっと使いやすくする方法

追加CSSにコードを挿入します。

外観 → カスタマイズ → 追加CSS

以下のコードをコピペしてください。

/* サイドメニュークローズボタン */
.menuBtn__scroll {
    padding-bottom: 100px;
}
.menuBtn__close {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    position: absolute;
    left: 0;
    height: 7rem;
    bottom: 0px;
    z-index: 9999;
    margin: 0px auto;
    width: 100%;
    background-color: rgba(25,25,25,0.85);
}

以上です。

 


固定フッターエリアとの位置関係
サイドメニュー下部にCLOSEボタン
↑固定フッターエリアとサイドメニューCLOSEボタンの位置関係。スムーズな操作が可能になります。

POINT

  • ボタンが押しやすくなるよう帯状に変更。
  • サイドメニュー下部にCLOSEボタンが収まるスペースを確保。
  • 当サイトのカスタムした固定フッターエリアにあわせ高さを調整しています。
  • 最終行のカラー設定でお好みのカラーに変更してください。最後の数値は透明度です。
Webデザイン良質見本帳  目的別に探せて、すぐに使えるアイデア集

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

久保田 涼子
2,530円(11/18 16:49時点)
発売日: 2017/06/16
Amazonの情報を掲載しています

あとがき

以前からサイドメニュー上部にあるCLOSEボタンが使いづらく気になっていました。

なんというか指の動きが自然じゃなくてボタンを探して画面上を指が舞うようなことが何度も・・・。カスタマイズは大変そうだから後回しにしていました。実際に作ってみたら簡単でしかも効果抜群です。もの凄く自然に操作が出来るようになりました(個人的感想)

珍しくオススメできるカスタマイズができましたw

呟くのよ・・・私の棒ストが