【SANGO】モバイル用フッター固定メニューのカスタマイズ

1 メモと注意点
2 メニューとトップへ戻るボタンを横並びに
- 2.1 画面下側から生えてるタイプ
- 2.2 丸いボタンを２つ並べるタイプ
3 メニューとトップへ戻るボタンを縦並びに
- 3.1 画面右側から生えてるタイプ
- 3.2 丸いボタンを並べるタイプ
4 フッター固定メニューの項目を横並びに
5 フッター固定メニューの項目とトップへ戻るボタンを縦並びに
- 5.1 画面右側から生えてるタイプ
6 メニューボタンだけを置きたい場合

メモと注意点

ページを表示するエリアを広げるため、モバイル用のフッター固定メニューをボタンに変更しました。

トップへ戻るボタンのカスタマイズをするものは、PCから見た場合のデザインも同じ形になります。（縦並びのものは、PCから見た時には下方向へ詰めて表示されます。）

注意

SANGO は大部分がマテリアルデザインで作られています。
マテリアルデザインでは、ボタンの形・ボタンを配置する位置、ボタンに置けるコンテンツが厳格に決められていて、このボタンはそれらの定義から外れていますので気になる方はご注意ください。

メニューとトップへ戻るボタンを横並びに

メニューボタンとトップボタンの2つだけあればいい方はこちら。
画面下側に横並びになります。
モバイルフッター固定メニューの項目を、「メニュー」1つだけにしてからカスタマイズします。

メニューボタン・トップへ戻るボタンの色は、それぞれカスタマイザー「SANGO オリジナルの設定」の、「モバイルフッター固定メニュー」と「トップへ戻るボタン」で設定した背景色・文字色が適用されます。

画面下側から生えてるタイプ

style.css に追加するCSS

style.css

.fixed-menu ul, a.totop{
	width: 60px;
	height:50px;
	left: auto;
	bottom: 0;
	border-radius: 50% 50% 0 0;
}
.fixed-menu ul{
	padding:0;
	right: 5px;
}
a.totop{
	padding:3px;
	right: 70px;
	opacity:.4;
}
.fixed-menu~.totop{
	bottom: 0;
}
.fixed-menu ul li a{
	padding: 9px 0 1px;
}
.fixed-menu{
	margin-bottom: 0;
}

丸いボタンを２つ並べるタイプ

style.css に追加するCSS

style.css

.fixed-menu ul, a.totop{
	width: 58px;
	height:58px;
	padding:0;
	left: auto;
	bottom: 10px;
	border-radius: 50%;
}
.fixed-menu ul {
	right:10px;
}
.fixed-menu ul li a {
	padding: 10px 0 0;
	right:10px;
}
a.totop {
	opacity:.4;
	line-height:58px;
	right:78px;
}
.fixed-menu~.totop {
	bottom:10px;
}
.fixed-menu {
	margin-bottom: 0;
}

メニューとトップへ戻るボタンを縦並びに

メニューボタンとトップボタンの2つだけあればいい方はこちら。
画面右側に縦並びになります。
モバイルフッター固定メニューの項目を「メニュー」1つだけにしてからカスタマイズします。

メニューボタン・トップへ戻るボタンの色は、それぞれカスタマイザーの「SANGO オリジナルの設定」から設定できる、「モバイルフッター固定メニュー」と「トップへ戻るボタン」の背景色・文字色が適用されます。

画面右側から生えてるタイプ

style.css に追加するCSS

style.css

.fixed-menu ul, a.totop{
	width: 50px;
	height:60px;
	right: 0px;
	left: auto;
	border-radius: 50% 0 0 50%;
}
.fixed-menu ul{
	bottom: 5px;
}
.fixed-menu ul li a{
	padding: 12px 0 0 5px;
}
a.totop{
	opacity:.4;
	line-height:59px;
	padding: 0 0 0 5px;
}
.fixed-menu~.totop{
	bottom: 70px;
}
.fixed-menu{
	margin-bottom: 0;
}

丸いボタンを並べるタイプ

style.css に追加するCSS

style.css

.fixed-menu ul, a.totop{
	width: 58px;
	height:58px;
	padding:0;
	right: 10px;
	left: auto;
	bottom: 10px;
	border-radius: 50%;
}
.fixed-menu ul li a{
	padding: 10px 0 0;
}
a.totop{
	opacity:.4;
	line-height:58px;
}
.fixed-menu~.totop{
	bottom: 78px;
}
.fixed-menu{
	margin-bottom: 0;
}

フッター固定メニューの項目を横並びに

「メニュー」だけでなく、他の項目もボタンにしたい場合はこちら。（※シェアボタン・フォローボタンの表示に関する部分はカスタマイズしていません）

メニューボタンの背景色はこのカスタマイズのCSSで指定します。
文字色は、カスタマイザーの「SANGO オリジナルの設定」＞「モバイルフッター固定メニュー」で設定したものが適用されます。

丸いボタン

style.css に追加するCSS

style.css

nav.fixed-menu ul {
	background:transparent;
	width: 132px; /*1項目増える毎に＋66px*/
	bottom:5px;
	left: auto;
	right:7px;
	box-shadow: none;
}
.fixed-menu ul li{
	display:inline-block;
	width: 60px;
	height:60px;
	padding:0;
	margin:0 3px;
	background: #ボタンの背景色;
	border-radius: 50%;
}
.fixed-menu ul li a {
	padding: 10px 0 0;
}
.fixed-menu {
	margin-bottom: 0;
}

画面下側から生えてるタイプ

style.css に追加するCSS

style.css

nav.fixed-menu ul {
	background:transparent;
	width: 132px; /*1項目増える毎に＋66px*/
	bottom:-10px;
	left: auto;
	right:7px;
	box-shadow: none;
}
.fixed-menu ul li{
	display:inline-block;
	width: 60px;
	height:60px;
	padding:0;
	margin:0 3px;
	background: #ボタンの背景色;
	border-radius: 50% 50% 0 0;
}
.fixed-menu ul li a {
	padding: 10px 0 0;
}
.fixed-menu {
	margin-bottom: 0;
}

画面右側から生えてるタイプ

style.css に追加するCSS

style.css

nav.fixed-menu ul {
	background:transparent;
	width: 55px;
	left: auto;
	right:0;
	box-shadow: none;
}
.fixed-menu ul li{
	display:block;
	width: 55px;
	height:60px;
	padding:0;
	margin:5px 0;
	background: #ボタンの背景色;
	border-radius: 50% 0 0 50%;
}
.fixed-menu ul li a {
	padding: 12px 0 0 3px;
}
.fixed-menu {
	margin-bottom: 0;
}

フッター固定メニューの項目とトップへ戻るボタンを縦並びに

メニューボタンの背景色はこのカスタマイズのCSSで指定します。
メニューボタンの文字色・トップへ戻るボタンの背景色と文字色は、カスタマイザー「SANGO オリジナルの設定」の、「モバイルフッター固定メニュー」・「トップへ戻るボタン」で設定したものが適用されます。

画面右側から生えてるタイプ

style.css に追加するCSS

style.css

nav.fixed-menu ul{
	background:transparent;
	width: 55px;
	left: auto;
	right:0;
	box-shadow: none;
}
.fixed-menu ul li{
	display:block;
	width: 55px;
	height:60px;
	padding:0;
	margin:5px 0;
	background: #ボタン背景色;
	border-radius: 50% 0 0 50%;
}
.fixed-menu ul li a {
	padding: 12px 0 0 3px;
}
.fixed-menu {
	margin-bottom: 0;
}
a.totop{
	width: 55px;
	height:60px;
	right:0;
	padding:3px 0 0;
	border-radius: 50% 0 0 50%;
}
.fixed-menu ~ .totop {
	bottom: 137px; /*1項目増える毎に＋65px*/
}

メニューボタンだけを置きたい場合

メニューボタンのみでいい場合はこちら。
カスタマイザーの「SANGO オリジナルの設定」から「トップへ戻るボタン」の表示をオフにして、モバイルフッター固定メニューの項目を「メニュー」1つだけにしてからカスタマイズします。

文字色・背景色はカスタマイザーで設定したものが適用されます。

画面下側から生えてるタイプ

style.css に追加するCSS

style.css

.fixed-menu ul{
	width: 60px;
	height:50px;
	left: auto;
	bottom: 0;
	border-radius: 50% 50% 0 0;
	padding:0;
	right: 5px;
}
.fixed-menu ul li a{
	padding: 9px 0 1px;
}
.fixed-menu{
	margin-bottom: 0;
}

画面右側から生えてるタイプ

style.css に追加するCSS

style.css

.fixed-menu ul{
	width: 50px;
	height:60px;
	right: 0px;
	left: auto;
	border-radius: 50% 0 0 50%;
	bottom: 5px;
}
.fixed-menu ul li a{
	padding: 12px 0 0 5px;
}
.fixed-menu{
	margin-bottom: 0;
}

丸いボタンを右隅に１つだけ置く場合

style.css に追加するCSS

style.css

.fixed-menu ul{
	width: 58px;
	height:58px;
	padding:0;
	left: auto;
	bottom: 10px;
	border-radius: 50%;
	right:10px;
}
.fixed-menu ul li a {
	padding: 10px 0 0;
	right:10px;
}
.fixed-menu {
	margin-bottom: 0;
}