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

新アメブロのカスタマイズ

 

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

 

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

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

新アメブロのカスタマイズ

 

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

新アメブロのカスタマイズ

 

今回のカスタマイズではボタンの数×2のボタンを用意する必要があります。

新アメブロのカスタマイズ

 

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

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

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

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

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

 

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

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

 

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

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

新アメブロのカスタマイズ

 

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

 

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

#navimenu{
width:980px;
top:0px;
z-index: 100;
margin:0;
position: absolute;
}
#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:196px;/* ボタンの横幅 */
height:50px;/* ボタンの高さ */
float:left;
padding:0;
}
/* トップからの位置調整 */
#navimenu{
position: absolute;
width:980px;
top:0px;
z-index: 100;
margin:230px 0 0 0;
}
.menu1 a{
background:url(ここにアップロードした画像のURL);
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:196px;/* ボタンの横幅 */
height:50px;/* ボタンの高さ */
float:left;
padding:0;
text-indent: -9000px;
}
.menu1 a:hover { /* ボタンにカーソルを合わした時 */
background:url(ここにアップロードした画像のURL);
text-decoration:none;
}
.menu2 a{
background:url(ここにアップロードした画像のURL);
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:196px;/* ボタンの横幅 */
height:50px;/* ボタンの高さ */
float:left;
padding:0;
text-indent: -9000px;
}
.menu2 a:hover { /* ボタンにカーソルを合わした時 */
background:url(ここにアップロードした画像のURL);
text-decoration:none;
}
.menu3 a{
background:url(ここにアップロードした画像のURL);
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:196px;/* ボタンの横幅 */
height:50px;/* ボタンの高さ */
float:left;
padding:0;
text-indent: -9000px;
}
.menu3 a:hover { /* ボタンにカーソルを合わした時 */
background:url(ここにアップロードした画像のURL);
text-decoration:none;
}
.menu4 a{
background:url(ここにアップロードした画像のURL);
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:196px;/* ボタンの横幅 */
height:50px;/* ボタンの高さ */
float:left;
padding:0;
text-indent: -9000px;
}
.menu4 a:hover { /* ボタンにカーソルを合わした時 */
background:url(ここにアップロードした画像のURL);
text-decoration:none;
}
.menu5 a{
background:url(ここにアップロードした画像のURL);
margin:0;
display: block;
list-style-type: none;
text-align:center;
width:196px;/* ボタンの横幅 */
height:50px;/* ボタンの高さ */
float:left;
padding:0;
text-indent: -9000px;
}
.menu5 a:hover { /* ボタンにカーソルを合わした時 */
background:url(ここにアップロードした画像のURL);
text-decoration:none;
}

.skinContentsArea{
padding-top:50px;/* 大体ボタンの高さと同じにしてください */
}

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

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

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

新アメブロのカスタマイズ

 

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

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

<div id="navimenu"><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>から</li>までを追加してください。

新アメブロのカスタマイズ

 

そして最後に「ブログを書く」⇒「サイドバーの設定」⇒「サイドバーの配置」とクリック。

「フリースペース」をドラッグ&ドロップでサイドバーに配置します。

アメブロカスタマイズ

 

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

お疲れ様でした。

 

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

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

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

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

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

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

この記事の著者

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

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

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る