ネット上ではナイスなデザインのグローバルメニューを見せておられる
サイトを多く見かけます

 

シリウス標準のグローバルメニューもナイスデザインなんですが
ワンパターンで、同類サイトとほぼ同じ範囲では、
見慣れるに至りいつしか興味も失せてしまいます

 

 

ワールドプレス等、他サイトみたいな良いデザインを取り入れたい
...と願うなら

 

ならば　オリジナルで作ちゃちゃえばいいわけですね

 

それでも飽きたら　定期的に趣向を凝らして作ればよいのです

 

当サイトなんぞ　飽きっぽいので半年ほどで切り替えてます

 

グローバルメニューをオリジナルで作成する手順で画像を切り替えることで
通常変更はできますが　縦サイズを拡張する際のＣＳＳ指定解説も
含まれております

 

 

今回は　デフォルトのブラックテンプレートで進めます

 

デフォルトスタイル

 

 

グローバルは　テンプレートフォルダ内の画像ファイルを呼び出し表示と
なっています

 

以下の画像二つがグローバルを表示さているのですね

 

 

左の画像が通常見える画像

 

メニューをクリックしたときは　上部画像が消えてした画像が見えることで
メニューをクリックしたと触感を読者に感じさせるものです

 

 

ですので　グローバルメニューを表示させる画像は
二つ用意することになります

 

 

画像を変更するには　画像フォルダを選択して　ペイントで編集して
上書き保存します

 

 

今回は　カラーをブルーにして縦サイズを７０ＰＸに延長しました

 

 

プレビューで確認すると　カラーは変更されていますが
縦サイズはＣＳＳでサイズが指定されてますので変化はないですね

 

では　画像が正確に表示されるようスタイルシートで縦サイズを
拡張します

 

スタイルシート

 

/* グローバルメニュー */

 

#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 900px;
position: absolute;

margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;
}

 

#topmenu span a {
overflow: hidden;
width: 20%;
_width:19.6%;

text-align: center;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
float: left;
height: 45px;
_height:47px;
background-image: url(img/menu_item.jpg);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
padding-bottom:3px;
display: block;
}
#topmenu span a:hover {
background-image: url(img/menu_item_hover.jpg);
background-position: right top;
color: #FFFFFF;
}

 

 

２５０番　
padding-bottom:3px;
３ＰＸを２０にしました

 

でも　文字位置がずれてしまいました

 

文字位置は 222 番と２２３番で表示位置の割合を決めます
１００の数値内で決めてください

 

height: 48px;
line-height: 42px;記載を

 

以下例に変えました

 

height: 28px;
line-height: 27px;

 

 

 

 

すると文字位置が変わりました

 

 

一カラムでヘッダー画像を縦一ミリ程度で設定してみた例です
参考画像　サイト背景オール黒

 

 

 

メニューの間に仕切り線を入れたい方は　角丸テンプレートから
画像を取出し入れ替えたのち　その角丸の画像を編集すると
仕切り線が表示されます

 

 

 

一カラムでは　スタイルシート変更でグローバルメニューをサイトの一番上に
移動できます

 

---

 

 

 

ずるっこアドバイス

 

入れ替えるグローバルメニューを作るにはどうすれば？

 

という質問がよくございます

 

画像編集ソフトで作ればよいのですが　いまいち出来ん！という方も

 

シリウスや他の外部テンプレートを見ても

 

単一カラーではなく　明暗が施されています
その明暗が面倒なんでしょうね

 

 

そんな場合ですが　いいか　悪いか　解りませんけど

 

ナイスなテンプレートのグローバルメニューを　コピペして
ペイントで編集すればよいのです？？

 

たったこれだけ　頂いちゃうのです

 

 

 

 

躊躇される方は　ＭＴＭＬ無料テンプレートなどで検索して

 

テンプレートを堂々といただいてから　画像を取り出して使います

 

スポンサーリンク

 

 

 

グローバルメニューデザインカスタマイズ
ホットでクールなテンプレートを作ろう
シリウスカスタマイズ