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

会社情報等の指定

会社情報等の指定

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

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

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

サンプルサイト

Page Top

会社情報部分の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;
}

Page Top

楽天に出店する前に
今年こそインターネットで販路拡大！楽天市場の出店資料請求はこちら
成功店舗が続々！楽天市場が成功店舗の秘訣を公開！詳細はこちら
飲食店向けホームページ作成サービス
簡単にお店のホームページを更新「グーペ」
ネットショップ制作
低価格で作るオリジナルロゴ【アーティーロゴ】
ネットショップ機能付きレンタルサーバー
低価格ショッピングカート
ホームページ・ビルダー(R)対応！ レンタルカートe-shopsカート2
低価格で本格的なオンラインショップを構築。CGIの知識は一切不要の高機能レンタルショッピングカート。
ショッピングカートとデザインテンプレートでネットショップを簡単開設！【 OneStyle My Shop 】
オリジナルデザイン代行で販促力の高いネットショップを【MakeShop】/
無在庫商品仕入れシステム。月額0円でネットショップを開店できます
大手の利用実績が認める高機能ネットショップ「ワイズカート」
レンタルショッピングカートXcart月額1,050円からの格安、高品質なショッピングカートが登場！

page top ボタン