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

THE THOR でサイドメニューの CLOSE ボタンをカスタマイズしました。

 

サイドメニューを閉じるにはサイドメニュー上部にあるCLOSEボタンを押すのが王道です。(メインカラムをタップして戻る事も出来る)

サイドメニューのコンテンツが増えて縦に長くなった場合、上まで戻ってCLOSEボタンを押すのは手間がかかるので固定表示で常に画面内にCLOSEボタンがあるよう変更しました。

 

このカスタマイズで出来ること

  • CLOSEボタンのクリック範囲を拡大
  • CLOSEボタンを上部/下部に固定表示
  • 固定表示でユーザービリティのアップ

 

THE THOR サイドメニュー CLOSE ボタンの位置変更と固定表示

 

CLOSEボタンを上部または下部に固定表示します。

表示位置はお好みになりますが、サイドメニューボタンがある位置に合わせたほうが使い勝手が良いと思います。

現在の当サイトではヘッダー部分にサイドメニューボタンがあるので、CLOSEボタンを上部に固定しています。

※両方のCSSを追加しても2つ表示にはなりません。

 

ついでに通常のCLOSEボタンは文字部分のみのクリック反応だったので、帯状にしクリック範囲を拡げました。

サイドメニューコンテンツを邪魔しないよう帯は透過しています。

 

CLOSEボタンを下部に固定表示する方法

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

操作手順
外観 → カスタマイズ → 追加CSS

 

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

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

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

 

出来上がりサンプルは以下の通り

THOR サイドメニュー CLOSE

 

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

 

CLOSEボタンを上部に固定表示する方法

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

操作手順
外観 → カスタマイズ → 追加CSS

 

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

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

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

 

CLOSEボタン固定表示のCSSについて

 

このカスタマイズは各サイトにあわせ数値の変更が必要になる場合があります。

適用の際はサイトにあわせ数値を最適化してください。

 

変更のポイントは以下を参照

padding-bottom(padding-top) CLOSEボタンのスペースを確保
サイドメニューコンテンツとの重なりを防ぎます。
color CLOSEの文字色
width CLOSEボタンの横幅
height CLOSEボタンの縦幅
background-color CLOSEボタンの背景色
最後の0.85が透明度です。1が100%表示

 

コードのそれぞれの意味や使い方がわからない場合はこちらのサイトが非常にわかりやすく便利です。

サルワカ | サルでも分かる図解説明マガジン

サルワカはあらゆることを分かりやすく解説するメディアです。何か分からないことがあったときはサルワカへどうぞ!…

 

 

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

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

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

 

あとがき

 

CLOSEボタンを固定表示することで操作性があがります。

自サイト内を頻繁にチェックする自分としてはかなり有効なカスタマイズとなりました。

 

読者側からすると些細なことかもしれません。

しかし、そんな些細なことを積み重ねてユーザービリティをアップすることが直帰率の改善につながると思います。

 

>