【THE THOR】フッター部分の背景色と余白の大きさを変更する方法

THE THOR（ザ・トール）のフッター部分の背景色はなぜか黒に固定されていて、カスタマイザーから設定できません。
アップデートで実装される可能性もありますが、この部分の背景色を変更する方法を紹介します。

変更するのはこの部分

このカスタマイズで変更するのは、ページ最下部のコピーライト表記とフッターメニューが表示されている部分です。（画像は背景色を変更した後のものになります）

背景色の変更方法

変更する方法はとっても簡単です。

に下記の CSS をコピペし、カラーコードをお好きな色のものに変更してください。

/*フッターの背景色*/
.l-footer .bottomFooter {
	background: #cfcfcf;
}

余白の大きさを調整する方法

フッターエリアをもっと狭くしたい場合は、余白を減らしてコンパクトにまとめることもできます。

こちらも同じく

に下記の CSS をコピペし、必要であれば余白の大きさを変更してください。

/*iPad以上の端末から見た時（2カラムの時）*/
@media only screen and (min-width: 768px){
.l-footer .bottomFooter {
	padding: 30px 0; /*フッターエリアの余白*/
}
.l-footer .bottomFooter__navi {
	margin-bottom: 10px; /*フッターメニューとコピーライトの間のマージン*/
}
}

/*iPad未満の端末から見た時（フッター固定メニュー表示時）*/
@media only screen and (max-width: 767px){
.l-footer .bottomFooter {
	padding: 25px 0 45px; /*フッターエリアの余白*/
}
.l-footer .bottomFooter__navi {
	margin-bottom: 10px; /*フッターメニューとコピーライトの間のマージン*/
}
}

解説と注意点

前半部分の「フッターエリアの余白」というコメントが入っている行では、「30px」という部分がフッターエリア内の上下の余白の大きさになります。（0 の部分は左右の余白）

後半部分の方は、「25px」という部分がフッターエリア内の上側の余白、「45px」となっているところが下側の余白になります。（0 が左右の余白）
こちらはモバイル用フッター固定メニューが表示される画面サイズ時の設定のため、下側の余白を 40px 未満にするとメニュー部分と重なってしまう（近くなりすぎる）のでご注意ください。