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

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

今回のカスタマイズはアメブロのヘッダー画像の下にメニューボタンを設置してみます。

中級以上の方向けのカスタマイズだと思いますので、初心者の方で挑戦されるのでしたら、

必ずカスタマイズ前のcssのバックアップをとっておいてください。

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

アメブロにメニューボタンを設置

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

アメブロにメニューボタンを設置

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

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

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

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

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

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

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

例えばブログの横幅が760px（グレイスキンのデフォルト）の場合、

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

画像を作るのが困難な方は、別に画像じゃなくても単色のボタンを作ることも出来ますが、

ここで説明するのはボタン用の画像を使用したカスタマイズ方法です。

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

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

アメブロにメニューボタンを設置

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

アメブロの写真に枠をつける

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

/* —————————————————– */
/* ■ナビエリアフリースペース */
/* —————————————————– */
#navlist
{
margin: 0;
width:1000px;
}
#navlist li
{
margin:0;
padding: 0;
display: inline;
list-style-type: none;
text-align:center;
}
#navlist li a{
color: #000000; /* 文字の色 */
background:url(ここにアップロードした画像のＵＲＬ);
margin:0;
display: block;
list-style-type: none;
text-align:center;
font-size:14px; /* メニューの文字の大きさ */
width:140px; /* ボタンの横幅 */
height:25px; /* ボタンの高さからpaddingを引いた分 */
float:left;
padding:5px 0 0 0;
}
#navlist li a:hover { /* ボタンにカーソルを合わした時 */
color: #ffffff; /* 文字の色 */
background:url(ここにアップロードした画像のＵＲＬ);
text-decoration:none;
}
/* トップからの位置調整 */
#freespace #navcontainer{
position: absolute;
width:1000px;
top:0px;
z-index: 100;
margin:0 0 10px 10px;
}

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

アメブロにメニューボタンを設置

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

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

<div id="navcontainer"><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><li><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li><li><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li></ul></div>