ボディーの背景色を３色に変更する

/* skinBody ボディ */

.skinBody{background-color:#cccccc;}/* ←ブログ全体に背景を敷きたいとき */

.skinBody2{background-color:#66FF99;

width:1040px;margin:auto;}

.skinBody3{background-color:#ffffff;

width:980px;margin:auto;}

ヘッダーにオリジナル画像を挿入

background-image: url(http://stat.blogskin.ameba.jp/blogskin_images/20140103/16/7c/4d/p/o09810351pc110ban1388732738304.png
);

background-repeat: no-repeat;

background-position: center top;

width: 980px;

height: 350px;

サイドバーのフリープラグインに既成のフラッシュ、フォトアルバムを利用して挿入する

http://www.samootz.com/

ヘッダーの下にナビゲーションボタンを設置する

フリースペースに下のコードを記述する

<div id="headerMenu"><!--

--><ul class="menu"><!--

--><li><a href="#" target="_blank">メニュー１</a></li><!--

--><li><a href="#" target="_blank">メニュー２</a></li><!--

--><li><a href="#" target="_blank">メニュー３</a></li><!--

--><li><a href="#" target="_blank">メニュー４</a></li><!--

--><li><a href="#" target="_blank">メニュー５</a></li><!--

--></ul><!--

--></div>

CSSに下のコードを記述する

/* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する */

/* ▼▼▼ 変更しない */

#wrap,.skinContentsArea{

position:relative;

}

#headerMenu{

position:absolute;

margin:0;

padding:0;

}

#headerMenu ul.menu{

margin:0;

padding:0;

list-style: none;

}

#headerMenu ul.menu li{

display:inline;

}

#headerMenu ul.menu li a{

display:block;

float:left;

margin:0;

padding:0;

white-space:nowrap;

overflow:hidden;

text-align:center;

}

/* ▲▲▲ 変更しない */

/* ▼▼▼ 位置・サイズ調整 */

#wrap,.skinContentsArea{

padding-top:40px; /* メニュー設置用スペース */

}

#headerMenu{

top:0px; /* 上下位置調整 */

left:0px; /* 左右位置調整 */

width:980px; /* メニュー全体の幅 */

}

#headerMenu ul.menu li a{

width:196px; /* ボタンの幅 */

line-height:40px; /* ボタンの高さ */

font-size:14px; /* ボタンの文字サイズ */

}

/*▲▲▲ 位置・サイズ調整 */

/*▼▼▼ 色・文字装飾・背景など */

#headerMenu ul.menu li a{ /* 通常時 */

color:#ffffff; /* 文字色(白) */

font-weight:normal; /* 太字(なし) */

text-decoration:none; /* 下線(なし) */

background-color:#3366ff; /* 背景色(濃い青) */

background-image:url(); /* 背景画像 */

background-repeat:repeat; /* 背景画像繰り返し */

}

#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */

color:#ffffff; /* 文字色(白) */

font-weight:normal; /* 太字(なし) */

text-decoration:underline; /* 下線(あり) */

background-color:#698fff; /* 背景色(薄い青) */

background-image:url(); /* 背景画像 */

background-repeat:repeat; /* 背景画像繰り返し */

}

/*▲▲▲ 色・文字装飾・背景など */