トップページのヘッダー下のメタリックなやつ。
テンプレートの「デモページ」にも貼ってある奴です。
0000

実装方法や、テキスト・URL・画像差し替えに興味あるなら続き見てくれ。


読者のレベルが全然わからんから、とりあえずここ紹介しておく。
(ちなみに俺のレベルは「このブログについて」に書いてある)

「ホームページを作る人のネタ帳」 ← プロっぽいな・・・
000

上のブログでこんな海外サイトを紹介している。
メニューバーなどのCSSを無料配布しているサイトだ。

「CSSメニュー ジェネレーター」
web1

違うサイトも紹介してた。
「CSSポータルドットコム」
web2

これ紹介しただけで 「うわー、超★簡★単!!」で済む読者なら、
俺がこんなHOW TOを書く必要はどこにも無い。
というか、俺にも理解不能だったから、上のジェネレーターは遊ぶだけ遊んでポイ! 海外からHPのテンプレをダウンロードしてそれをアレンジしてみた。

-------------------------------------
ここからが、肝心のメニューボタン
実装と差し替えについてです。



まずは、ボタン画像を二つ用意する。
ベース画像と、色を変える画像だ。

ボタンの背景←これが見えるか? これがベース画像(1px*38px)


ボタンの色←これが見えるか? これが色つき画像(1px*38px)


こないだ書いたときは、ボタンに文字を書いて画像として貼り付けた。
今回のは、文字は入れない。こんな細い棒みたいな画像を2種類使う。
誰のどのブログにでも合うように、無機質な色にしたから
色を変えたきゃ好きにしてくれ。
で、この2種類アップロードしてURLメモる。
(できればうちのURLから画像を引っ張らないで、ご自身のブログにアップしなおして使っていただきたい)

次に「デザインカスタマイズ」→「CSS」からな。
最下層にこれ(黄色)ぶちこんどけ。

/* Horizontal menu */
#mainmenu {
background-image: url(ボタン背景画像のURL);
width: おめーさんとこのブログの幅を数字で入れてpx;
}
#mainmenu {float:left; margin-bottom:10px;}
#mainmenu ul {font-size:16px; margin:0; padding:0;}
#mainmenu li {float:left; height:35px; list-style:none; margin:0; padding:0;}
#mainmenu a {border-right:1px solid #b0b0b0; color:#606060; display:block; font-size:0.7em; padding:11px 10px 10px; text-transform:uppercase;}
#mainmenu a:hover {background:#f0f0f0 url(ボタンの色付き画像のURL) top left repeat-x; color:#505050; text-decoration:none;}
#mainmenu a.current {background:#f0f0f0 url(ボタンの色付き画像のURL) top left repeat-x; color:#505050; text-decoration:none;}


ちゃんと書き換えるところは書き換えて、な。

次にTOPのHTMLにこれを挿入

    <div id="mainmenu">
        <ul>

            <li><a class="current" href="飛ばしたいURL1を入れる">名前(1)をつける</a></li>
            <li><a href="飛ばしたいURL2を入れる">名前(2)をつける</a></li>
            <li><a href="飛ばしたいURL3を入れる">名前(3)をつける</a></li>
   
        </ul>
    </div>


欲しいボタンの数だけ2-3の書式を繰り返すんだ。
1の書式を増やすんじゃないぞ。
で、こいつをブチ込む場所は、
前回記事「画像のボタン」で説明した場所と同じだ

な? 簡単だろ? 隙間調節とか、色換えとか、罫線とかそういうオプションはライブドアナレッジで聞けよな。おじさん素人だからあんまり突っ込んでくれるな。

ところで、さっき
「1の書式をコピペすんじゃねーぞ」って書いた理由を説明する。
カレントってやつだ。

1001070005

これはトレンカ

説明するの面倒くさいから画像作ったんで貼っておく。
あとはプロでも捕まえて聞いてくれ。俺に聞くな。

111
個々にカレント設定しなくてもいいやって人はスルーで。
(このブログはTOPにしかカレントを設定していない)

------------------------------------
トップのボタンはアンドレアスさんによるデザインを一部アレンジしております。「クレジットは強制じゃないけどしてくれると嬉しいな」と書いてあったので、明記させていただきます。一次は商用・個人利用、二次はテンプレートの配布のみ許可されています。
aaa