スポンサーサイト

0

    一定期間更新がないため広告を表示しています

    • 2012.12.19 Wednesday
    • -
    • -
    • -
    • -
    • by スポンサードリンク

    ブログにメニューバーを設置する方法

    0
      こんにちは、アメブロカスタマイズの松田です。

      今回は、アメブロの
      ページナビ(メニューバー)
      の設置に仕方をご紹介させていただきます。

      このメニューバーがあると、ブログをパッと見た時に、どのような内容がブログに書かれているのか、何が重要なのか、何を紹介しているのか、などを一瞬で見て理解することが出来ます。

      さらにはバーの中のボタンをクリックすることによってそのページへとすぐ飛べるようになるので、このメニューバーがあるだけで大変分かりやすく、見やすいページになります。

      さて、その設置方法ですが、まずはアメブロのスキン(テンプレート)をCSSが編集できる、【CSS編集用デザイン】にしていないと設置できません。
      【CSS編集用デザイン】適応方法はコチラ

      まず、フリースペース内に下記HTMLを記述します↓

      <div id="navi"><a id="menu01" href="メニュー1のURL">メニュー1</a><a id="menu02" href="メニュー2のURL">メニュー2</a><a id="menu03" href="メニュー3のURL">メニュー3</a><a id="menu04" href="メニュー4のURL">メニュー4</a><a id="menu05" href="メニュー5のURL">メニュー5</a></div>


      フリースペースにこちらを記述したら保存します。フリースペースは以上です。
      次はCSSの編集になります。
      CSS編集の画面で、CSSが記述してあるスペースに下記を記述してください。一番下とかに記述するとよいでしょう。

      次は、CSSの記述です。CSSの編集ページにいき、
      下記CSSを追加してください。自分の好きなように背景の色や、サイズなどを調整して、保存してください。


      #navi {
      position:absolute;
      top:250px; /*-- ヘッダー画像との距離 --*/
      margin-top: 20px;/*--上と下の間隔--*/
      }
      #menu01 {
      position:absolute;
      display: block;
      top:0px;/*--トップからの位置--*/
      left:0px;/*-- ヘッダー左端からの位置 --*/
      width:160px; /*-- メニューバーの幅 --*/
      height:80px; /*-- メニューバーの高さ --*/
      background:url(メニューの画像URL) no-repeat;
      }

      #menu01:hover {
      background:url(マウスを載せたときの画像URL) no-repeat;
      }

      #menu02 {
      position:absolute;
      display: block;
      top:0px;/*--トップからの位置--*/
      left:0px;/*-- ヘッダー左端からの位置 --*/
      width:160px; /*-- メニューバーの幅 --*/
      height:80px; /*-- メニューバーの高さ --*/
      background:url(メニューの画像URL) no-repeat;
      }

      #menu02:hover {
      background:url(マウスを載せたときの画像URL
      ) no-repeat;
      }

      #menu03 {
      position:absolute;
      display: block;
      top:0px;/*--トップからの位置--*/
      left:0px;/*-- ヘッダー左端からの位置 --*/
      width:160px; /*-- メニューバーの幅 --*/
      height:80px; /*-- メニューバーの高さ --*/
      background:url(メニューの画像URL) no-repeat;
      }

      #menu03:hover {
      background:url(マウスを載せたときの画像URL) no-repeat;
      }

      #menu04 {
      position:absolute;
      display: block;
      top:0px;/*--トップからの位置--*/
      left:0px;/*-- ヘッダー左端からの位置 --*/
      width:160px; /*-- メニューバーの幅 --*/
      height:80px; /*-- メニューバーの高さ --*/
      background:url(メニューの画像URL) no-repeat;
      }

      #menu04:hover {
      background:url(マウスを載せたときの画像URL) no-repeat;
      }

      #menu05 {
      position:absolute;
      display: block;
      top:0px;/*--トップからの位置--*/
      left:0px;/*-- ヘッダー左端からの位置 --*/
      width:160px; /*-- メニューバーの幅 --*/
      height:80px; /*-- メニューバーの高さ --*/
      background:url(メニューの画像URL) no-repeat;
      }

      #menu05:hover {
      background:url(マウスを載せたときの画像URL) no-repeat;
      }

      #menu06 {
      position:absolute;
      display: block;
      top:0px;/*--トップからの位置--*/
      left:0px;/*-- ヘッダー左端からの位置 --*/
      width:160px; /*-- メニューバーの幅 --*/
      height:80px; /*-- メニューバーの高さ --*/
      background:url(メニューの画像URL) no-repeat;
      }

      #menu06:hover {
      background:url(マウスを載せたときの画像URL) no-repeat;
      }



      メニューバーの設置は、上記を追加するだけですが、間違って他のCSS部分をいじってしまったりしてブログの表示が変わってしまったりすることもあります。

      心配な方は記述する前に、記述前のCSSを全てコピーして、メモ帳などに貼り付けておくなどをしておくと良いでしょう。

      一度間違った状態で保存してしまうと、元には戻せませんので
      こういったバックアップを取っておくのは大事ですね。


      自分でメニューバーを制作するのが難しい…、
      分からない…、めんどくさい…
      という方へオススメのプランはコチラ

      初心者プラン





      ブログカスタマイズのTOPへ戻る

      スポンサーサイト

      0
        • 2012.12.19 Wednesday
        • -
        • 17:29
        • -
        • -
        • -
        • by スポンサードリンク

        コメント
        コメントする








           

        無料問合せ
        ▼ご質問・問合せはコチラからどうぞ▼

        MENU

        twitter & facebook




        Yuu Matsuda | バナーを作成


        クレジットカードのお支払いも可能です。
        ソリューション画像

        リンク集

        PR

        selected entries

        categories

        archives

        recommend

        links

        profile

        search this site.

        others

        mobile

        qrcode

        powered

        無料ブログ作成サービス JUGEM