アメブロのスキンをカスタマイズ～メニューボタンの文字を画像にする～

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

以前、ヘッダー下にメニューボタンを設置する方法について書きましたが、

今回のカスタマイズはそれの応用編。

アメブロのヘッダー下のメニューボタン（ナビボタン）の文字まで全てがぞ。

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

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

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

アメブロカスタマイズ

このような文字まで全て画像のメニューボタンを設置し、さらにロールオーバーで画像を切り替えます。

アメブロカスタマイズ

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

今回のカスタマイズには、ボタンの数×2のボタンを用意しないといけません。

アメブロカスタマイズ

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

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

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

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

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

この時点で「うわ、めんど」って思った方は、画像を2つ作るだけでOKな方法もあります。

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

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

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

アメブロカスタマイズ

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

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

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

/* ?????????????????? */
/* ■ナビエリアフリースペース */
/* ?????????????????? */
#navlist{
margin: 10px 0;
width:760px;
}
#navlist li
{
margin:0;
padding: 0;
display: inline;
list-style-type: none;
text-align:center;
}
#navlist li a{
margin:0;
display: block;
list-style-type: none;
width:152px; /* ボタンの横幅 */
height:40px; /* ボタンの高さからpaddingを引いた分 */
float:left;
padding:0;
}
/* トップからの位置調整 */
#freespace #navcontainer{
position: absolute;
width:760px;
top:0px;
z-index: 100;
margin:380px 0 10px 10px;
}
.menu1 a{
background:url(ここにアップロードした画像のＵＲＬ);
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:152px; /* ボタンの横幅 */
height:40px; /* ボタンの高さ */
float:left;
padding:0;
text-indent: -9000px;/*　タイトル文字を消す　*/
}
.menu1 a:hover { /* ボタンにカーソルを合わした時 */
background:url(ここにアップロードした画像のＵＲＬ);
text-decoration:none;
}
.menu2 a{
background:url(ここにアップロードした画像のＵＲＬ);
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:152px; /* ボタンの横幅 */
height:40px; /* ボタンの高さ */
float:left;
padding:0;
text-indent: -9000px;/*　タイトル文字を消す　*/
}
.menu2 a:hover { /* ボタンにカーソルを合わした時 */
background:url(ここにアップロードした画像のＵＲＬ);
text-decoration:none;
}
.menu3 a{
background:url(ここにアップロードした画像のＵＲＬ);
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:152px; /* ボタンの横幅 */
height:40px; /* ボタンの高さ */
float:left;
padding:0;
text-indent: -9000px;/*　タイトル文字を消す　*/
}
.menu3 a:hover { /* ボタンにカーソルを合わした時 */
background:url(ここにアップロードした画像のＵＲＬ);
text-decoration:none;
}
.menu4 a{
background:url(ここにアップロードした画像のＵＲＬ);
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:152px; /* ボタンの横幅 */
height:40px; /* ボタンの高さ */
float:left;
padding:0;
text-indent: -9000px;/*　タイトル文字を消す　*/
}
.menu4 a:hover { /* ボタンにカーソルを合わした時 */
background:url(ここにアップロードした画像のＵＲＬ);
text-decoration:none;
}
.menu5 a{
background:url(ここにアップロードした画像のＵＲＬ);
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:152px; /* ボタンの横幅 */
height:40px; /* ボタンの高さ */
float:left;
padding:0;
text-indent: -9000px;/*　タイトル文字を消す　*/
}
.menu5 a:hover { /* ボタンにカーソルを合わした時 */
background:url(ここにアップロードした画像のＵＲＬ);
text-decoration:none;
}

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

menu1～menu5までを色分けしましたが、もしボタンの数が5個ではない場合、

少なければmenu5を削除、多ければmenu6、menu7・・・を作ってください。

アメブロカスタマイズ

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

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

<div id="navcontainer"><ul id="navlist"><li class="menu1"><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li><li class="menu2"><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li><li class="menu3"><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li><li class="menu4"><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li><li class="menu5"><a href="ボタンを押した時のリンク先URL">ボタンの文字</a></li></ul></div>

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

こちらも同様、これはメニューの数が5個の場合ですので、

少なければ<li class="menu5">から</li>までを削除、

多ければ<li class="menu6">〇〇</li>、<li class="menu7">〇〇</li>・・・を作ってください。

アメブロカスタマイズ