【スタイルシート】タブメニューをLEDっぽく

ブログでコメントを頂いたので、設定方法を書いてみます。
正直、どこを弄ったか忘れているので、抜けがあるかもしれませんｗ

スタイルシート タブメニューをLEDっぽく
http://minkara.carview.co.jp/userid/612480/blog/15663641/


※完全なサポートはできませんので自己責任で行ってください。
スタイルシートを書き換える前には、バックアップを取ることを強くオススメします。

「マイページ」→「管理」項目の「スタイルシート」よりスタイルシート設定ページを開きます。
「スタイル用画像」のリンクをクリックして、スタイル用の画像をアップします。

2,3の画像をパソコンに保存して、アップロードしてください。

2は通常時
3はマウスオーバー、選択中

アップすると、画像のURLが表示されます。

以降、
2の画像のURLを ①
3の画像のURLを ②
と記述します。

「詳細編集」→「タブ」のページを開きます。
ここで、コンテンツタブのスタイルシート詳細編集を行います。

各項目に、6の内容を記述してください。

background:#333333 url(①) no-repeat 50% 50%;
の、①には2の画像のURLを記述します。
background:#31456a url(②) no-repeat 50% 50%;
の、②には3の画像のURLを記述します。


※スタイルシート書換え前には、バックアップを取ることを強くオススメします。

----------------------------------------
タブ
ul#MainNav
----------------------------------------

width:100%;
list-style-type:none;
margin:8px 0;
padding:0px;
clear:both;
height:28px;
float:left;

----------------------------------------
タブ(通常)のスタイル
ul#MainNav li.nav
----------------------------------------
font-size:12px;
width:19.2%;
height:28px;
float:left;
display:block;
text-align:center;
background:#333333 url(①) no-repeat 50% 50%;
margin:0 0.6% 0 0;
line-height:2.5;
border:solid 1px #555;

----------------------------------------
タブ(通常)のリンク
ul#MainNav li a
----------------------------------------
color:#ccc;
display:block;
height:28px;
text-decoration:none;

----------------------------------------
タブ(通常)のリンク(訪問済み)
ul#MainNav li a:visited
----------------------------------------
color:#ddd;
text-decoration:none;

----------------------------------------
タブ(通常)のリンク(マウスオーバー)
ul#MainNav li a:hover
----------------------------------------
background:#31456a url(②) no-repeat 50% 50%;
color:#ddd;

----------------------------------------
タブ(選択中)のスタイル
ul#MainNav li.navOn
----------------------------------------
background:#31456a url(②) no-repeat 50% 50%;
color:#ddd;

----------------------------------------
タブ(選択中)のリンク
ul#MainNav li.navOn a
----------------------------------------
color:#ddd;

----------------------------------------
タブ(選択中)のリンク(訪問済み)
ul#MainNav li.navOn a:visited
----------------------------------------
color:#ddd;

----------------------------------------
タブ(選択中)のリンク(マウスオーバー)
ul#MainNav li.navOn a:hover
----------------------------------------
color:#ccc;

----------------------------------------
右端のタブ
ul#MainNav li.navEnd
----------------------------------------
width:19.1%;
margin:0px;

各項目への記述が終わったら、「保存」ボタンを押します。

最後に、「スタイル選択」から「カスタムスタイル」を適用すれば完了！
・・・のハズです。