スタイルシート（CSS）ソースを書いてくれるエディタがあるページ

◆ テンプレートの変更場所

このまま使って何も問題がなければ良いのですが、変更が必要になるであろう場所は、左側のリンクメニューになります。リンクテキストの文字数によって、幅を変更することになります。変更する場所は、head部ソース、3段落目「Side Menu Link」の「.ddmenu」内にある「120px」と「134px」数値の後ろに、「!important」と書かれています。「120px」がメニューの幅（5ヶ所）、「134px」がサブメニューの幅（2ヶ所）になります。5ヶ所または、2ヶ所は、全て同じ数値に変更してください。

メニューの幅は、最大140pxまで可能です。サブメニューの幅は、何pxでも構いません。また、サブメニューのないリンクは、一番下のリンクと同じにしてください。

◆ ドロップダウンメニュー（縦）＋3段組レイアウト

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>テンプレート　スタイル（15）</title> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <style type="text/css">  </style> </head> <body> <div id="container"> <div id="header"> <h1>◆ これが見出しのスタイル・そしてここがヘッダー</h1> </div> <div id="wrapper"> <div id="contents"> ここがコンテンツ </div> <div id="sidebar2"> ここが右側 </div> </div> <div id="sidebar1"> <div class="ddmenu"> <ul> <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="リンク先.html">リンク先ページ名<span class="sankaku"> ▼</span></a> <ul> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> </ul> </li> <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="リンク先.html">リンク先ページ名<span class="sankaku"> ▼</span></a> <ul> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> </ul> </li> <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="リンク先.html">リンク先ページ名<span class="sankaku"> ▼</span></a> <ul> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> </ul> </li> <li class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="リンク先.html">リンク先ページ名<span class="sankaku"> ▼</span></a> <ul> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> <li><a href="リンク先.html">リンク先ページ名</a></li> </ul> </li> <li><a href="リンク先.html">リンク先ページ名</a></li> </ul> </div> <p>ここがメニューリンクの下になります。文章や画像をここに配置することができます。</p> </div> <div id="footer"> ここがフッター <div class="copyright">Copyright (C) ******. Allrights Reserved.</div> </div> </div> </body> </html>

テンプレートソースの利用方法は、テンプレートトップページに書いてあります。

このテンプレートは、「ページプロパティ」、「クールなレイアウト」、「ドロップダウンメニュー（縦）」をベースに作られています。

◆ テンプレート スタイル(15)

◆ テンプレートの変更場所

◆ ドロップダウンメニュー（縦）＋3段組レイアウト

◆ テンプレート　スタイル(15)