新アメブロのカスタマイズ～メニューボタン設置～

アメブロのヘッダー画像を自分だけのオリジナル画像に変えたいという方はこちら

◆2012年9月8日追記◆

ある理由によりこの方法はお勧めできません。

こちらの方法をお試し下さい。

これはアメブロの新しいスキン「css編集用デザイン」に対応しています。

今回のカスタマイズはヘッダー画像の真下に・・・

アメブロカスタマイズ

このようなメニューボタンを設置し、アメブロをホームページとしても使えるようにします。

アメブロカスタマイズ

この画像では分かりにくいと思いますが、実際のイメージとしては参考サイトのようになります。

今回はボタン用の画像を2つ用意しました。

1つはデフォルトのボタン。

ボタン

もう1つはマウスのカーソルを持っていった時に切り替わるボタン。

ボタン

ボタンを簡単に作成することができる無料ソフトでお勧めなのはInkscape。

Inkscapeのダウンロードや使い方はこちらをご覧下さい。

メニューボタンを作成する際に気をつけなければならないのがボタンのサイズ。

「CSS編集用デザイン」はブログの横幅が980pxなので、

メニューが5つ必要なら 980px ÷ 5個 = 196px となり、横幅196pxのボタンを作成するとピッタリです。

それではカスタマイズ開始。

「ブログを書く」⇒「アメブロを書く」⇒「画像フォルダ」で、作成した画像をアップロードしておきます。

アメブロカスタマイズ

次に「ブログを書く」⇒「デザインの変更」⇒「CSSの編集」とクリック。

アメブロカスタマイズ

そしてcss編集欄の一番下までスクロールさせ、以下を全てコピペし各所を編集、保存します。

#navlist{
margin: 0;
width:980px;
}
#navlist li{
margin:0;
padding: 0;
display: inline;
list-style-type: none;
text-align:center;
}
#navlist li a{
color: #ffffff;/* 文字の色 */
background:url(ここにアップロードした画像のURL);
margin:0;
display: block;
list-style-type: none;
text-align:center;
font-size:14px;/* メニューの文字の大きさ */
width:196px;/* ボタンの横幅 */
height:33px;/* ボタンの高さからpaddingを引いた分 */
float:left;
padding:17px 0 0 0;
}
#navlist li a:hover {
color: #ffffff;/* 文字の色 */
background:url(ここにアップロードした画像のURL);
text-decoration:none;
}
/* トップからの位置調整 */
#navimenu{
width:980px;
top:0px;
z-index: 100;
margin:230px 0 0 -10px;
position: absolute;
}
.freespaceArea{
width:180px;
top:0px;
z-index: 100;
margin:0;
padding:10px;
}
.skinContentsArea{
margin-top:50px;
}

赤字のところは人によって異なるのでそれぞれ編集してください。

アメブロカスタマイズ

保存したら次は「ブログを書く」⇒「サイドバーの設定」⇒「フリースペースの編集」とクリック。

フリースペースの編集欄に以下をコピペし各所を編集、保存します。（改行などしない）

<div id="navimenu"><ul id="navlist"><li><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li><li><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li><li><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li><li><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li><li><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li></ul></div>

赤字、青字のところは人によって異なるのでそれぞれ編集してください。

またこれはボタンの数が5個の場合なので、ボタンが多い場合は<li>から</li>までを追加してください。

アメブロカスタマイズ