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

現在地: Home » ネットショップの作り方 » ネットショップ作成 » 会社情報等の指定

ネットショップ作成

会社情報等の指定

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

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

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

サンプルサイト

会社情報部分のCSS指定

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

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

XHTML上では、全項目の<p class="description">部分の次に見出し<h1>が来る構造です。

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

<body>
<p class="description">*****各ウェブページの説明を入力(商品キーワードを入れると効果的)*****</p>
<div id="wrapper">
<div id="header">
<h1>*****大見出し*****</h1>
<p class="logo"><a href="index.html" title="*****"><img src="img/logo.jpg" alt="ロゴ画像" /></a></p><!-- 画像を使用しました -->
<!-- 会社情報-1 -->
<ul id="header-info">
<li><a href="#" title="ご利用案内">ご利用案内</a></li>
<li><a href="#" title="個人情報の取扱い">個人情報の取扱い</a></li>
<li><a href="#" title="お問合わせ">お問合わせ</a></li>
<li><a href="#" title="サイトマップ">サイトマップ</a></li>
</ul>
<!-- グローバルナビゲーション -->
<ul id="globalnavi">
<li><a href="#" title="#">*****</a></li>
<li><a href="#" title="#">*****</a></li>
<li><a href="#" title="#">*****</a></li>
<li><a href="#" title="#">*****</a></li>
<li><a href="#" title="#">*****</a></li>
</ul>
</div>
<!-- header end -->

#header {
height: 300px;
margin-bottom: 2em;
position: relative; /*----- #header内の各要素の基点 -----*/
background: url(URL) no-repeat 0 100%;
}

/* -- 見出し -- */

#header h1 {
  position: absolute; /*----- 絶対配置 -----*/
  bottom: 0.5em;
  right: 1em;
}

/* -- ロゴ画像 -- */

#header .logo img { border: 0; }

#header .logo img a,
#header .logo img a:visited,
#header .logo img a:hover,
#header .logo img a:active {
  border: 0;
  text-decoration: none;
}

#header .logo {
  margin: 0;
  position: absolute; /*----- 絶対配置 -----*/
  top: 0;
  left: 10px;
}

/* -- 会社概要など -- */

#header-info {
  list-style-type: none;
  position: absolute; /*----- 絶対配置 -----*/
  top: 0;
  right: 0;
}

#header-info li { display: inline; }

#header-info li a {
  text-decoration: none;
  margin-left: 1em;
  padding-left: 15px;
  background: url(URL) no-repeat 0 50%;
}

#header-info li a:hover {
  text-decoration: none;
  background: url(URL) no-repeat -200px 50%;
}

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

#globalnavi {
  list-style-type: none;
  width: 600px;
  position: absolute; /*----- 絶対配置 -----*/
  right: 0;
  top: 5em;
}

#globalnavi li {
  float: left; /*----- 回り込み -----*/
  width: 120px;
}

#globalnavi li a {
  text-decoration: none;
  text-align: center;
  width: 120px;
  padding: 1em 0 0.5em;
  display: block;
  background: url(URL) no-repeat 0 0;
}

#globalnavi li a:visited {
  text-decoration: none;
  background: url(URL) no-repeat -240px 0;
}

#globalnavi li a:hover {
  text-decoration: none;
  background: url(URL) no-repeat -120px 0;
}

Next；グローバルナビゲーション指定

▲Top