【カスタムCSS活用術】フッターのデザイン変更方法

※本記事に関しては、e-shopsカートSのサポート窓口にお問い合わせいただきましてもご回答出来ませんので、予めご了承のうえ、ショップ様の自己責任のもとご利用ください。

皆さんこんにちは、ワニコです。

前回、リニューアルしたCMSの新機能である【カスタムCSS】についてご紹介しました。
今回はカスタムCSSを活用し、フッターのデザインを変更する方法をご紹介します！

本記事でご紹介するCSSをカスタムCSSにそのまま追記することで、ご紹介したデザインへ変更が可能な仕組みとなっております。
カスタムCSSの利用方法は、マニュアルでご確認ください。

1.フッターを中央寄せや右寄せする方法

対象テンプレート：DefaultSchool

デフォルトのデザインだと、フッターは左寄せになっています。

カスタムCSSに以下のCSSを追記することで、フッターを中央寄せや右寄せに変更することが可能です。

.footer-inner,
.copyright,
.poweredby {
  text-align: center;
}

.footer-navi {
  justify-content: center;
}

.footer-inner,
.copyright,
.poweredby {
  text-align: right;
}

.footer-navi {
  justify-content: flex-end;
}

対象テンプレート：DefaultSweetsSchool

以下のCSSをカスタムCSSに入れることで、デフォルトの大きさより、大きくしたり小さくしたりすることが出来ます。

※以下の画像は●％部分を30％で指定した場合の表示です。

.footer_bottom img {
  width: ●%;/*●部分に数字を入れ、大きさを調整*/
}

対象テンプレート：DefaultSweetsSchool

以下のCSSをカスタムCSSに入れることで、ロゴ画像を非表示にすることが出来ます。

.footer_bottom img {
  display: none;
}

対象テンプレート：Sweets

デフォルトのデザインだと、フッターは波線になっています。

以下のCSSをカスタムCSSに入れることで、他のテンプレートのようにフッターを直線にすることが出来ます。

.footer-inner-top {
 display: none;
}

以上がフッターをカスタムCSSで変更する方法となります。
ご希望のデザインがありましたら、是非ご活用ください♪