TOP

h4指定グローバル見出しメニューをcssでデザイン変更手順

申し訳ございません ただいま不作動...修正中です

 

関連ページのご案内でh4指定読み込んでいるグローバルメニューは 
シリウスデフォルトスタイルとデザインに違いがみられることは充分に
ご理解頂だけたかと思います

 

ここでは スタイルシート指定で見出しの枠や仕切り線の
カラーを変更するご案内です

 

ここでのコンテンツは上部ページの継続解説となります
h4タグ要素でグローバルメニューをプルタウンメニューカスタマイズ

 

僅かな色彩の変化ですが 切り替えることでサイトのイメージは
大幅に変わります
閲覧者の方が落ち着けることのできる色彩をご選択下さい

 

今回の色彩変更は

 

グローバルメニュー上の横ライン

 

グローバルメニューひとつずつの枠

 

枠はメニューが並ぶことで 仕切り線に見えます

 


 

一つ目

 

グローバルメニュー上の横ライン

 

横ラインは メニューの枠を指定しないときなどに使うと良いですね

 

枠指定した場合は 枠と異なる色彩を選択がベストかと

 

横ラインと枠を同時指定すると 上部でWラインで表示されますが
見出しカラーや背景によっては見出し上の枠表示が見えずらい状況に
なることもあります
その際はwラインを表示しても一つのラインに見えます
状況によりますので枠を確認してから調整しましょう

 

 

 

Wライン

 

 

メニュー上の横ライン表示は メニューCSSではなく
headerの指定になります

 

通常は白ですけど変更する際は

 

スタイルシート開いて
border-bottom:solid 1px #EBEBEB;のカラー変更で
色彩表示できます

 

/* 基本レイアウト */

 

#container {
width: 900px;
_width: 910px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 5px;
margin-right: auto;
margin-left: auto;

 

background-repeat: repeat-y;
}
#header {
height: ;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: auto;
border-bottom:solid 1px #EBEBEB;
}

 

 


 

二つ目

 

枠色彩を変更する

 

以下項目

 

枠はborder-bottom-color: #E9E9E9;のカラーコードで
色彩を変えます

 

ブラインドの左枠線カラー
border: 1px solid #CCCCCC;ここで色彩変更

 

 

1pxは 枠線の太さを指定してます

 

 

/* サイドメニュー */

 

#menu ul,#rmenu ul {
list-style-type: none;
list-style-image: none;
margin-top: 0;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
padding: 0px;
border: 1px solid #CCCCCC;
}

 

#menu li,#rmenu li {
list-style-type: none;
list-style-image: none;
margin: 0px;
display: block;
_display:inline;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E9E9E9;
padding: 0px;
}

 

 

素敵な配色でおすすめください

 

スポンサーリンク

 

 

 

h4グローバル見出しメニューcssでデザインイメージカスタマイズ
シリウスのグローバルメニューを軽量プルダウンカスタマイズ備忘録
シリウスカスタマイズトップ

 

h4グローバル見出しメニューcssでデザインイメージカスタマイズ関連解説
h4タグ要素でグローバルメニューをプルタウンメニューカスタマイズ
シリウスのh4タグ要素を使ってグローバルメニューをプルタウンメニューへとカスタマイズ ただし当該解説はデフォルトテンプレート対応となります.
h4タグでプルダウンをグローバルで正常反映するためのサイズ指定
シリウスへh4タグを使いグローバルメニューを正常にプルダウン化するには メニューとサイト幅のサイズ調整が必要となります
プルダウンh4見出し表示 メニューアイコンカスタマイズ
シリウスにプルダウン見出しををh4タグで表示させた場合 またブラインドメニューのアイコンヲカラーをカスタマイズする方法を解説します
h4スタイルで表示されるグローバルメニューのデザインカスタマイズ
今回の解説のh4スタイルで表示されるグローバルメニューのデザインを見出しメニューを基本として画像やCSS指定で変化させてゆく手順をまとめております
h4グローバルブラインドをサイドオープンくスタイルへカスタマイズ
シリウス導入のh4グローバルブラインド収納メニューを海外サイトみたいな横に開くサイドオープンスタイルへカスタマイズする手順をご案内いたします