ECサイトを運営する為に必須パーツの方が先に必要だよなー。と思い今回はfooterを制作しました。以前の記事コピペ グリッドレイアウトでバナーを表示と同様にごくシンプルなデザインで作成していますので、インパクトや個性が欲しい方には物足りないと思います。
はじめに
今回もYahoo!ショッピングでのストア構築を想定して、CSSは全てインラインで制作しました。管理がしにくいですが、利用自体は楽天市場のフッターでもお使いいただけると思いますのでご自由にお使いください。審査が通るかどうかは保証できませんのでご了承ください。
デザインはこちら
デザインはこちらです。運営方法や設定によってそれぞれ適宜修正が必要です。クレジットカードのロゴ画像についてはご自身でご用意していただく必要があります。最低限必要なことは記載していると思いますが、追記は必要だと思いますのでご注意ください。
コードはこちら
CSSも含まれているので複雑に見えるかもしれませんが、同じことが繰り返されているだけの単純なコーディングなので改行せずに表示して確認してもらえばそこまで難しくないと思います。画像はクレジットカードのロゴのみなので、かなり軽いと思います。
バナーなどで画像をふんだんに使う場合が多いかと思いますので、軽量化できるところは極力軽さを求めていった方がいいなーと思います。
修正ポイント
クレジットーカードのロゴ
8行目 src="クレジットカードのロゴ画像"
こちらに画像のパスを入れてください。高さは40pxぐらいがちょうど良いかなと思います。
各カラーの変更
2行目 background: linear-gradient(to left, rgb(230, 162, 255), #ff67bf);
こちらがSHOPPING GUIDEの背景色のプロパティです。liner-gradientから;の手前までに色を入れてください。lightblueとかredなどの英語名で入れても大丈夫です。
7, 13, 32, 43, 48行目 border-bottom: dotted 2px #ED70BC;
こちらの#ED70BCがドットの下線色のプロパティです。こちらも色の英語名で反映可能です。ドットではなくラインがいいという場合は、dotted→solidに変更してください。
おわりに
扱う商材で全然変わってくると思いますが、ECの管理を始めてみてまだまだPCの方が閲覧数が多くてびっくりしました。世間の風潮やWeb界隈のニュースをみていると、もっとスマホでのブラウジングの割合の方が多いようなイメージでした。WEBサイトの制作やデザインなどはモバイルファーストで考えていった方がいい場合が増えてくると思いますが、ECのポータルサイトはまだまだPC環境も主戦場なんだなという印象です。
とにかくユーザにとってわかりやすく、不自由ない情報を提供することが何よりも大事だと思うので、今回のフッターでは情報不足だと思います。修正・追記してトラブルやクレームなどにご注意してご利用ください。これからもコピペで使えるようなコードを公開していこうと思いますので、気軽にご利用ください。
コピペ記事
