当テンプレートの使い方

このブロックのように途中で１カラムにする事もできます。
詳しい解説はこちら。

注意：当テンプレートにはメニューが「２箇所」ずつ入っています

パソコンなどの大きな端末向け「menubar」と、スマホやタブレットなどの小さな端末（幅800px以下環境）向け「menubar-s」です。html側にコメントとともにタグが入っているので必ず合わせて変更して下さい。もちろん、敢えてパソコンとスマホでメニュー表記を変える事も可能です。

大きな端末向けメニュー（menubar）を現状から追加する場合、801px〜980pxの間でメニューが段落ちする可能性があるので注意して下さい。

注意：当テンプレートにはトップのメイン画像が「２つ」あります

imagesフォルダに入っている「mainimg_l.jpg」と「mainimg_s.jpg」です。

「mainimg_l.jpg」は、高解像度ブラウザ向けに大きな画像をcssで縮小して（ピンボケを極力抑える為）に用意しています。
「mainimg_s.jpg」は、縮小を使えないIE7〜8向け及び、大きな画像である必要のない小さな端末に使っています。

当テンプレートは同じ画像のサイズ違いを単においているので違いがわからないかもしれませんが、わざと異なる画像をおいてみると理解しやすいと思います。

■copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© Sample Site All Rights Reserved.
の「Sample Site」部分もあなたのサイト名に変更します。

■metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。

ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。

続いて、その下の行の
content="キーワード１,キーワード２,～～～"
も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。10個前後ぐらいあれば充分です。キーワード間はカンマ「,」で区切ります。

■h1ロゴのaltタグも変更しましょう。
html側に
alt="SAMPLE LOGO"
となっている箇所があるので、この「SAMPLE LOGO」もあなたのサイト名に変更しましょう。

上部のドロップダウンメニューについて

ドロップダウンメニューを新規で増やしたい場合、親となるリストタグの中に

・・・
<li><a href="#">１行目のメニュー名</a>
　<ul class="ddmenu">
　<li><a href="#>ドロップダウン用のメニュー名</a></li>
　<li><a href="#>ドロップダウン用のメニュー名</a></li>
　</ul>
</li>
・・・

と加えて下さい。ddmenuの指定でドロップダウンメニューとして認識されます。

古いInternetExplorerブラウザ(IE8以下)だと表示に問題があるようなのでドロップダウンは出ないようになっています。その際は直接１段目のメニュー（service.html）をクリックする事になるので、必ずこのページは作っておいて下さい。スマホやタブレットなどの「マウスオン」が使えない環境にもこれらのページは必要です。