アメブロのトップにメニューボタンの追加 | JUNK BOX

JUNK BOX

文系女子によるパソコン技術向上と趣味を兼ねたブログ

アメブロのヘッダー画像の下に、

メニューボタン(グローバルメニュー)を追加してみましたキラキラ

 

「アメブロカスタマイズで成功するブログを作ろう」を

運営されているわざめーば様

「ヘッダー下にグローバルナビ(グローバルメニュー)を設置する方法」

を参考にカスタマイズしました。いつもお世話になっております。

 

今回、ブログのメニューボタンを設置するために、

2枚のボタン用背景画像(PNG形式)を用意しました。

 

"background-repeat:repeat"(繰り返し表示)で利用するため、

メニューボタンの高さ(当ブログは45px)に合わせて制作アート 

 

1 使用する画像〔 サイズ : 300px × 45px 〕


  ■ 通常時用

   
 

  ■ ロールオーバー(カーソルオン)時用

   
 

2 実際の完成画像


 

また、メニューボタンの「ボタンの幅」「ボタンの高さ」を考慮して画像を配置すると

項目ごとにボタンのように背景を設置することも可能ですアップ

 

【 例 】

 

1 使用する画像 〔 サイズ : 220px × 45px 〕

 

2 実際に設置した画像

 

グローバルメニューがあると、ブログのテーマや項目がわかりやすいです目

ブログのメインとなる内容を載せておくといいかもしれません音譜