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

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

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

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

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

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

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

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

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

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

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

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

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

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

追加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;
}

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

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

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

追加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について

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

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

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

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

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

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

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

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

久保田 涼子

2,260円(12/03 18:26時点)

Amazonで購入する楽天市場で探すYahoo!で見る

Amazonの情報を掲載しています

あとがき

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

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

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

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