サイトマップ
プルダウンｈ４見出し表示 メニューアイコンカラーの変更
申し訳ございません ただいま不作動...修正中です
2015 0209
シリウスｈ４プルダウンカスタマイズ 見出し＆アイコンカラー変更
当該コンテンツは
h4タグでプルダウンをグローバルで正常反映するためのサイズ指定
上記ページの解説に含まれるメニュー見出し＆シリウスメニュー
アイコンカラーのカスタマイズをご案内しております
プルダウン表示した際のｈ４見出し要素を見出し要素は
その際利用しているテンプレートのカラーが反映されますが
見出し背景を他のテンプレートのカラーで表示することもできますが
サイドバーの見出しカラーも同時に変更されます
変更は
テンプレートフォルダを開いて 以下の画像フォルダへ menuｈ４画像を
いったん削除して 他のテンプレートに移動し 画像フォルダをコピーして
元のテンプレート画像フォルダ内で貼り付ければ入れ替えが完了します
スポンサーリンク
画像フォルダは そのままで単色でカラー変更する場合は
スタイルシートを開いて 以下の赤印行をカラーコード指定に書き換えてください
/* サイドメニュー */
#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;
}
#menu h4 ,#rmenu h4 ,.menutitle {
line-height: 30px;
background-image: url(img/menu_h4.jpg);
height: 30px; 縦幅変更はここ
font-size:14px;フォントサイズはここ
color: #FFFFFF;フォントカラー変更はここ
text-align: left;
padding-left: 20px; 文字位置の左位置指定はここ
overflow: hidden;
}
#menu .menubox, #rmenu .menubox {
margin-bottom: 15px;
background-color: #E5E5E5;
padding: 4px;
_padding: 4px;
}
#menu li a ,#rmenu li a{
line-height: 14px;
display: block;
font-size: 12px;
text-decoration: none;
background-image: url(img/menu_bg.gif);アイコンメニューはここ
background-repeat: no-repeat;
background-position: 5px center;
background-color: #FFFFFF;
margin-top: 0;
margin-right: 0;
margin-bottom: 0px;
margin-left: 0;
padding-top: 6px;
padding-right: 6px;
padding-bottom: 6px;
padding-left: 20px;
_padding-top: 2px;
_padding-bottom: 2px;
color: #454545;
}
以下のコードです
background-image: url(img/menu_h4.jpg);
以下の箇所を書き換えます
image: url(img/menu_h4.jpg);
例 白
background-color: #FFFFFF;
ブラインドメニュー内に表示されるテキスの左端に表示される
メニューアイコンのカラーを他のテンプレートカラーに変更する際は
テンプレートフォルダで ｍｅｎｕｂｇg画像フォルダを変更します
手順は上記ｈ４見出しと同じです
メニューアイコンン表示は 人により好みも違い削除する方もおります
メニューアイコンンの表示はいらないという方は
上記ＣＳＳより 以下記述を削除するか
background-image: url(img/menu_bg.gif);
もしくはフォルダにある画像ファイルを削除してください
当サイトでは画像ファイルを削除しております
シリウスプルダウンｈ４見出し表示 メニューアイコンカスタマイズ
シリウスのグローバルメニューを軽量プルダウンカスタマイズ備忘録
シリウスカスタマイズトップ
- h4タグ要素でグローバルメニューをプルタウンメニューカスタマイズ
- シリウスのh4タグ要素を使ってグローバルメニューをプルタウンメニューへとカスタマイズ ただし当該解説はデフォルトテンプレート対応となります.
- h4タグでプルダウンをグローバルで正常反映するためのサイズ指定
- シリウスへｈ4タグを使いグローバルメニューを正常にプルダウン化するには メニューとサイト幅のサイズ調整が必要となります
- ｈ４スタイルで表示されるグローバルメニューのデザインカスタマイズ
- 今回の解説のｈ４スタイルで表示されるグローバルメニューのデザインを見出しメニューを基本として画像やＣＳＳ指定で変化させてゆく手順をまとめております
- ｈ4グローバル見出しメニューｃｓｓでデザインイメージカスタマイズ
- シリウスのｈ4グローバル見出しメニューをスタイルシートＣＳＳ編集でデザインイメージを簡単にカスタマイズする手順のご案内です
- ｈ４グローバルブラインドをサイドオープンくスタイルへカスタマイズ
- シリウス導入のｈ４グローバルブラインド収納メニューを海外サイトみたいな横に開くサイドオープンスタイルへカスタマイズする手順をご案内いたします
