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


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

メニューを設置する方法について
お話します。

 

なんでも見た目が重要なので
きれいにメニューボタンを設定していると
それだけでも印象がよくなります。

 

印象が良くなれば当然アクセスも上がりますし、
なにか販売されている方であれば
商品の購入率も倍増します。

 

そうなれば当然収入も2倍、3倍になり
自分のやりたいことや夢を叶えるお金に回せるので
いいことだらけですね!

なのでぜひやってみてください。

 

ではアメブロにメニューを表示させる方法の
詳細は下記の動画からどうぞ!

 

 

どうでしたでしょうか?
簡単にできるのでやってみてくださいね。

では動画で説明していた添付する文章を
下記に載せているのでどうぞ!

 

1 フリースペース編集に貼り付ける文章

フリースペースの編集で、以下のようなコードを
フリースペースに追加してください。

<div id=”headerMenu”><!–
–><ul class=”menu”><!–
–><li><a href=”#” target=”_blank”>メニュー1</a></li><!–
–><li><a href=”#” target=”_blank”>メニュー2</a></li><!–
–><li><a href=”#” target=”_blank”>メニュー3</a></li><!–
–><li><a href=”#” target=”_blank”>メニュー4</a></li><!–
–><li><a href=”#” target=”_blank”>メニュー5</a></li><!–
–></ul><!–
–></div>

 

2 CSS編集で添付する文章

次に、CSSの編集で、以下のコードを
ユーザーCSSの最後に追加します。

/* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する */
/* ▼▼▼ 変更しない */
#wrap,.skinContentsArea{
  position:relative;
}
#headerMenu{
  position:absolute;
  margin:0;
  padding:0;
}
#headerMenu ul.menu{
  margin:0;
  padding:0;
  list-style: none;
}
#headerMenu ul.menu li{
  display:inline;
}
#headerMenu ul.menu li a{
  display:block;
  float:left;
  margin:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
}
/* ▲▲▲ 変更しない */
/* ▼▼▼ 位置・サイズ調整 */
#wrap,.skinContentsArea{
  padding-top:40px;             /* メニュー設置用スペース */
}
#headerMenu{
  top:0px;                      /* 上下位置調整 */
  left:0px;                     /* 左右位置調整 */
  width:980px;                  /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
  width:196px;                  /* ボタンの幅 */
  line-height:40px;             /* ボタンの高さ */
  font-size:14px;               /* ボタンの文字サイズ */
}
/*▲▲▲ 位置・サイズ調整 */
/*▼▼▼ 色・文字装飾・背景など */
#headerMenu ul.menu li a{       /* 通常時 */
  color:#ffffff;                /* 文字色(白) */
  font-weight:normal;           /* 太字(なし) */
  text-decoration:none;         /* 下線(なし) */
  background-color:#3366ff;     /* 背景色(濃い青) */
  background-image:url();       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
  color:#ffffff;                /* 文字色(白) */
  font-weight:normal;           /* 太字(なし) */
  text-decoration:underline;    /* 下線(あり) */
  background-color:#698fff;     /* 背景色(薄い青) */
  background-image:url();       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}
/*▲▲▲ 色・文字装飾・背景など */

わからないことがあれば
再度動画をみてチェックしてみてください。

 

ps メッセージ

パソコンに向き合ってると
なかなかモチベーションが上がらない時って
ありますよね?

 

そんな時は、自分は以前
行きたい海外の写真をみたり
実際に家の壁に貼ったりして
テンションをあげていましたよ。

 

以外と効果があるのでぜひ
やってみてください。

 

たまには昼から飲むのもいいかもですね。

この前は昼から寿司屋で飲んで
1日が終わりました、笑

 

 

 

P.S2  ビジネスに関する無料相談やってます。

無料相談申し込みはここをクリック>>>

 

《インターネット技術実践専門学校》

~日本一自由な人が多いコミュニティを目指す~

    代表 kaji

コメントを残す

サブコンテンツ

このページの先頭へ