▲PAGE TOP

おちゃのこネットのヘッダーをカスタマイズする



おちゃのこネットのheader ヘッダーをカスタマイズします。




■トップ画像とショップ名画像について

ヘッダー部分は、タイトルも含めて背景画像になっています。

トップ画像の高さ(幅 1100pxに固定・・980pxのサイズですが大きめに作成します )とショップ名画像の大きさは任意です。
なおこの2つの画像は、おちゃのこSHOP MANAGER管理画面>デザイン管理>画像とコメントの設定にて保存してください。

トップ画像の高さは必ずスタイルシートの以下の部分に入力してください。
下の例では120pxとなっている数値をトップ画像の高さに合わせて変更します。
/********************************************************************/
/* ヘッダー */
#header {
        width: 980;
        height: 120px;
}



メニューを設置する

基本的におちゃのこネットでは、ヘッダー部分を直接カスタマイズすることはできません。そこでキャッチコピーにHTMLを入力し、CSSで出力位置を指定して表示させます。


  • デザイン管理>トップページ管理>画像とコメントの設定をクリック
  • キャッチフレーズの入力フォームにHTMLを入力して保存
  • デザイン管理>全体管理>スタイルシート編集 にある #header-menu を編集して位置を決める
  • スタイルシート編集 にある .subnaviを編集して、検索フォームの位置を決める
  • 保存して終了




/////////// サンプルHTML ////////////////////


<div id="header-menu">

ここにヘッダーに表示するメニューのHTMLタグを入れる

</div>



必ずid=header-menuで囲む



//////////// メニューの位置を決めるCSS ////////////////


#header-menu {
  position: relative ;
  top: 7px ;
  left: 260px  ;
}


メニューの位置は、ウェブサイト最上部の左端からの相対的な位置の数値を入力すること


//////////// 検索フォームの位置を決めるCSS ////////////////



.subnavi {
width: 980px;
        margin-top: 20px ;
float: left;
text-align: right;
color: #FFFFFF;
font-size: 10px;
}



検索フォームは最上部   margin-top: 20px ;  からの相対的な位置で決める。width=980pxは変更する必要なし



■ヘッダーを含むウェブサイト全体の位置を修正するときは?


  • デザイン設定>全体設定>スタイルシート編集をクリック
  • #container で修正をする


//////////// ウェブサイト全体の位置を決めるCSS ////////////////


#container {
        width: 980px;
  background-color:#ffffff; 

      margin-top: -20px ;

}










COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)