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

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

 

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

 

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

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

必ずカスタマイズ前の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(ここにアップロードした画像の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(ここにアップロードした画像の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>

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

またこれはボタンの数が7個の場合なので、ボタンが少ない場合は<li>から</li>までを削除してください。

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

 

これでカスタマイズ完了。

・・・と言いたいところなんですが、おそらく現段階ではこのようにメニューの表示が崩れていませんか?

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

 

これを修正する方法ですが、cssの編集で「#sub_a,#sub_b,#main」を指定している所を探し、

以下をコピペして保存でOKです。

margin-top:35px;

表示を確認しながら赤字の部分で調整してください。

スキンがベーシックの場合は、「#wrap」を指定しているところにコピペです。 

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

 

こんどこそ完了です。

お疲れ様でした!

 

◆2011年01月20日 追記◆

メニューボタンの中の文字も全て画像にする方法をアップしました。

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

 

◆2011年10月30日 追記◆

新しいスキン「CSS編集用デザイン」への設置方法を追加しました。

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

 

人気ブログランキングで今何位?

アメブロのヘッダー画像を無料で作成

  • このエントリーをはてなブックマークに追加

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓

にほんブログ村 釣りブログ バスフィッシングへ にほんブログ村 釣りブログ 東海釣行記へ にほんブログ村 釣りブログへ

この記事の著者

kazushi釣りと生き物をこよなく愛するWEBデザイナー

釣りと焼酎が好きなWEBデザイナー。夜な夜な真っ暗な部屋で水槽を眺めながら呑んでいます。最近のマイブームはハンドメイドルアー制作。琵琶湖のほとりでひっそりとWEB制作事務所を営んでいます。

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る