今回は、ヘッダーエリアにカテゴリのナビゲーションをとりあえず設置したい！そんな方へお届けするシンプルなコピペコードです。
今回もいつも同様にYahoo!ショッピングを想定してCSSはインラインで書いていて画像は使っていません。取り急ぎヘッダーエリアにカテゴリのメニューバーを表示させたいといったときにお使いただけるかなと思います。
デザインイメージはこちら
デザインはこんな感じです。例のごとく非常にシンプルなデザインになっています。カテゴリ名はテキストで打っているので、使用ブラウザによってはフォントが変わってしまう可能性があります。
導入するコードはこちら
コードはこちらです。
カテゴリ-1,カテゴリ-2,…をリンクさせたいカテゴリ名に変更して使用してください。メニューバーの横幅は950pxを想定しています。もしサイトの設定を変更している場合は
1行目 950pxをサイトの設定サイズに変更 4, 8, 12, 16, 20, 24行目 150pxのところを サイトの幅px ÷ メニュー数 で割った数字に変更
メニューの数を6つにしていますが、減らしたい場合増やしたい場合は<td>…</td>のブロックごと複製または削除してください。
背景色はを変更したい場合は
3行目 background: linear-gradient(8deg, #ff67bf, rgb(230, 162, 255));を変更
カテゴリの文字色が白なので、背景色を白にすると文字が見えなくなってしまうので注意が必要です。
文字色を変更したい場合は
5, 9, 13, 17, 21, 25行目 color: white;
を適宜変更してください。
Yahoo!ショッピングの導入場所
Yahoo!ショッピングの場合
ストア構築 > ストアデザイン > ヘッダー・看板 > フリースペース
こちらにコピペして使用する方法が使いやすいかなと思います。
おわりに
今までバナーブロック・フッター・メニューバーを公開しました。組み合わせると以下のようなデザインになります。
その場その場で作成・記事を投稿してきたのですが、デザインに統一感があるとそれなりにしっくりきますね。僕はミニマルなものが好きなのでデザイン的にはこれで十分かなと思てしまったりしますが、売れるページかと言われるとさらに工夫が必要だと思います。「綺麗なデザイン = 売れるデザイン」ではないところが難しいところです。
