ネットショップの作り方｜ネットショップ作成：会社情報等の指定

会社情報等の指定

スポンサードリンク

会社情報等の指定

サンプルサイトでは、ヘッダー部分とフッター部分の2ヶ所に会社情報を表示させています。サイドバー内に掲載するパターンもありますが、今回は上下に配置してみました。

ショッピング系のサイトなので、ユーザーの事を考えれば「サイトの利用案内」は分かりやすいヘッダー部分に設置するのが望ましいと思います。また、SEO「サイトマップ」もヘッダー部分に設置するのが望ましいです。(サイトマップはユーザーの為にもなります。)

以降の項目は、ご自身でどちらにするか決定して下さい。

サンプルサイト

会社情報部分のCSS指定

サンプルサイトではヘッダー部分の会社情報とロゴ、見出し<h1>、グローバルナビゲーション部分はpositionプロパティを使って詳細な位置指定をしています。

これはSEOを考慮して、検索エンジンのクローラーには見出し<h1>を始めに読み込ませ、ブラウザ上では(ユーザーの為には)、コンテンツに近い部分にキーワード表示させる為です。この方がユーザーにとって、視覚的に階層把握がしやすいと考えます。

ソースは下記の通りです。

<body>
<div id="wrapper">
<div id="header">
<!-- 見出し -->
<h1>キーワード[トップレベルカテゴリー]</h1>
<!-- タイトル -->
<p class="logo"><a href="index.html">*** 会社名｜店舗名｜タイトル ***</a></p>
<!-- 概要 -->
<p class="description">各ページの説明を入力(商品キーワードを入れると効果的)。配置は自由に変更可能。</p>
<!-- グローバルナビゲーション -->
<ul id="globalnavi">
  <li><a href="#" title="商品カテゴリ1">商品カテゴリ 1</a></li>
  <li><a href="#" title="商品カテゴリ2">商品カテゴリ 2</a></li>
  <li><a href="#" title="商品カテゴリ3">商品カテゴリ 3</a></li>
  <li><a href="#" title="商品カテゴリ4">商品カテゴリ 4</a></li>
  <li><a href="#" title="商品カテゴリ5">商品カテゴリ 5</a></li>
</ul>
<!-- / globalnavi end -->
<ul>
  <li><a href="#">ご利用案内</a></li>
  <li><a href="#">個人情報の取扱い</a></li>
  <li><a href="#">お問い合わせ</a></li>
  <li><a href="#">サイトマップ</a></li>
</ul>
</div><!-- / header end -->

#header {
  width: 100%;
  height: 300px;
  position: relative; /* ヘッダー内要素の基点 */
  margin-bottom: 2em;
  background: url(img/bg-header.jpg) no-repeat 0 0;
}

/* ---------------------------------------- #header内の指定 */

/* -- 見出しレベル1 -- */
h1 {
  font-size: 100%;
  font-weight: normal;
  position: absolute; /* 絶対配置 */
  bottom: 20px;
  right: 20px;
}

/* -- 企業名 ショップ名 サイト名 -- */
.logo {
  text-indent: -9999px; /* 今回背景画像を使用 */
  position: absolute; /* 絶対配置 */
  top: 0;
  left: 20px;
}

.logo a {
  text-decoration: none;
  display: block;
  width: 200px;
  height: 50px;
  background: url(img/bg-logo.jpg) no-repeat 0 0;
}

.logo a:hover {
  text-decoration: none;
  background: url(img/bg-logo.jpg) no-repeat -200px 0;
}

/*
テキストの場合はこのソースを使用
以下のソースを上記にコピペして調整して下さい

.logo {
  position: absolute;
  top: 10px;
  left: 20px;
}

.logo a {
  text-decoration: none;
  color: #000000;
}

.logo a:hover {
  text-decoration: none;
  color: #ff0000;
}
*/

/* -- 概要 -- */
.description {
  font-size: 90%;
  position: absolute; /* 絶対配置 */
  top: 0.5em;
  right: 20px;
}

/* -- グローバルナビゲーション -- */

#header #globalnavi {
  list-style-type: none;
  width: 800px;
  height: 30px;
  position: absolute; /* 絶対配置 */
  top: 70px;
  left: 15px;
  overflow: hidden; /* 文字サイズ変更時の対応 */
}

#header #globalnavi li {
  text-align: center;
  width: 160px;
  height: 30px;
  float: left; /* 回り込み指定 */
  margin: 0;
  background: url(img/bg-globalnavi.jpg) no-repeat -160px 0;
}

#header #globalnavi li a {
  text-decoration: none;
  display: block; /* リンク領域を拡大 */
  width: 160px;
  padding: 10px 0;
  background: url(img/bg-globalnavi.jpg) no-repeat 0 0;
}

#header #globalnavi li a:hover {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
}

/* -- ご利用案内等のリンク部分 -- */

#header ul {
  list-style-type: none;
  position: absolute; /* 絶対配置 */
  top: 2em;
  right: 20px;
}

#header li {
  display: inline;
  margin-left: 0.5em;
}

楽天に出店する前に

飲食店向けホームページ作成サービス

簡単にお店のホームページを更新「グーペ」

ネットショップ制作

低価格で作るオリジナルロゴ【アーティーロゴ】

あなたのホームページを売れるネットショップにする

低価格ショッピングカート

登録商品数が無制限（ディスク容量内）のショッピングカートです！

ホームページ・ビルダー(R)対応！レンタルカートe-shopsカート2

レンタルショッピングカートXcart月額1,050円からの格安、高品質なショッピングカートが登場！

低価格で本格的なオンラインショップを構築。CGIの知識は一切不要の高機能レンタルショッピングカート。

無在庫商品仕入れシステム。月額0円でネットショップを開店できます

大手の利用実績が認める高機能ネットショップ「ワイズカート」

スポンサードリンク