グローバルメニュー作成 最終。

 

《関連記事》

  • 「macでメニューボタン作り」はこちら
  • 「グローバルメニュー 1」はこちら
  • 「ヘッダー作成編」はこちら

 

完成こんな感じ。

 

 

<今までの記事>

① 「macでメニューボタン作り」はこちら

② 「グローバルメニュー 1」はこちら

 

これをやらないとこんな感じに隠れボタンのようになってしまいます。

 

1. 作成したメニューボタンの画像をアップ

アメブロ管理画面>設定・管理>画像フォルダ

 

2. 画像のURLをコピー

 

 

3. 2のアドレスをコピーしたのを画像URLに貼り付ける

※CSSは、「グローバルメニュー 1」を参考

 

/*  メニュー項目背景画像 */

.menu1 a{

background:url(menu1画像URL);         ←作成したメニューボタンのURL

background-position: center;

margin:0;

display: block;

list-style-type: none;

text-align:center;

width:186px;/* ボタンの横幅 */             ←ボタンの横幅に合わせる

height:72px;/* ボタンの高さ */             ←ボタンの縦幅に合わせる

 

他のmenuも変更

 

4. 3のCSS上にサブメニューの色などを変更

 

 

変更されない場合

●更新する

 

●キャッシュを空にする

(1)Safari > 環境設定 

  メニューバーに“開発”メニューを表示する チェックをつける。

 

(2)開発 > キャッシュを空にする

 

 

************************

メールマガジン「7日間で習得! 今さら人には聞けないホリスティックケア」(人、ペット)

 

https://ssl.form-mailer.jp/fms/1e6a1449562611

 

************************