ウェブデザイン制作/ウェブ・ポジショニングのウェブZYCO'S [ メニューを編集する ]

メニューを編集する

はじめに basic-3

 メニューを編集して自分のスタイルを完成してください。バリエーションとして用意したものは、ここをクリックするとご覧になれます。SEOにも深く関連があるのがこのメニューです。オススメはテキストが詰め込めるラストのパターンです。

▼ html source

Select All

 このサイドメニューはリストスタイルを使ったロールオーバー・メニューです。Select Allでコピーした内容をテキストエディタにペーストして編集したものをmybody.htmlのsidebarに貼り付けてみてください。

  • リストメニューのタイトル
    ソースでは「有機野菜リスト」になっています。タイトルに相応しいものに編集してください。
  • リストメニューを追加する
    メニューひとつひとつが改行で区分されています(<li>...</li>)。自分のパターンをコピーして指定の場所でペーストしてください。不要なパターンは同様に削除してください。
    リストメニューを追加する
  • メニューの構成を変更する
    上記ソースより自分のパターンをコピーして指定の場所でペーストしてください。不要なパターンは同様に削除してください。
  • メニューグループを追加する
    <!--▼▼[ menu 1 ]▼▼-->から<!--▲▲[ menu 1 ]▲▲-->までを選択範囲にしてコピーし、menu1の次行にペーストしてください。
  • SEOに有効なキーワードを含めて編集してください
    このサイドメニューは複数のキーワードを配置できるようにデザインされています。特に重点が置かれるのがタイトル(このサンプルでは「有機野菜のリスト」)です。他のメニュー内容とバランスを考えて内容を編集してください。
  • mybody.htmlに貼り付ける
    <!--▼▼▼sidebar▼▼▼-->から<!--▲▲▲sidebar▲▲▲-->までを選択範囲にしてコピーし、mybody.htmlの同一範囲にペーストして保存します。
    コピー&ペイスト
  • 参考まで
    以下はメニューのソース構成のサンプルです。

ページのトップへ

       <!--▼▼[ menu 1 ]▼▼-->
        <div class="rollover_list_menu">
          <div class="list_menu_top">
            <h4 class="title">
              <span>
              有機野菜のリスト
              </span>
            </h4>
          </div>
          <div class="list_menu_rails">
            <ul>

              <li>
              <a href="#">
              <span class="comment">
              定期的に購入する
              </span>
              <br>
              <span class="date">
              2006/5/20
              </span>
              定期購入は通常より20%お得です
              </a>
              </li>

              <li>
              <a href="#">
              <span class="comment">
              ご贈答に購入する
              </span>
              <br>
              <span class="date">
              2006/5/21
              </span>
              お中元用に商品リストをアップ
              </a>
              </li>

            </ul>
          </div>
          <div class="list_menu_bot">
          </div>
        </div>
        <!--▲▲[ menu 1 ]▲▲-->

ページのトップへ