ページタイトル
テンプレートの内容について
ページのタイトル、メニュー項目、各セクションのテーマなどは全て仮の内容となります。ご自分のサイトに合わせて内容を変更してください。
特に、head要素内の「キーワード」「ページに関する説明」「ページのタイトル」の変更を忘れないようにご注意ください。
ページ全体について
コンテナの幅は980px、内側のページ幅(コンテンツが配置される領域)は950pxで設定されています。
3カラムレイアウトでは、メインカラムの幅は500pxになります。ただし、そのうちの30px(15px×2)は両サイドの余白(サイドバーとの間隔)に使用しています。
2カラムレイアウトでは、メインカラムの幅は680pxになります。ただし、そのうちの15pxは右側の余白(サイドバーとの間隔)に使用しています。
左サイドバー(3カラム用)の幅は180px、右サイドバーの幅は270pxで設定されています。
各カラムの幅を変更したい場合は、次の項目を参考にしてください。
カラム幅の変更について
3カラムレイアウトでは、まずは「コンテンツ」と右サイドバーが並べられ、その「コンテンツ」の中にメインカラムと左サイドバーが並べられています。そのため、各カラム幅の変更は多少ややっこしくなってしまいます。
コンテンツ 680px(左サイドバー 180px + メインカラム 500px) + 右サイドバー 270px = ページ幅 950px
左サイドバー、メインカラム、右サイドバーの合計が950pxになるように設定します。また、「コンテンツ」の幅は左サイドバーとメインカラムの合計値である必要があります。
例えば、右サイドバーの幅を300pxに変更したい場合は次のようになります。
コンテンツ 650px(左サイドバー 180px + メインカラム 470px) + 右サイドバー 300px = ページ幅 950px
2カラムレイアウトの場合はもっと単純です。メインカラムと右サイドバーの合計が950pxになるように設定してください。
設定に関するポイント
下層ページの「サイトタイトル」には、トップページへのリンクを設定することができます。リンクが不要の場合には、この部分のa要素を削除してください。
サイトタイトルの下にはキャッチコピー等を入れることができます。ここに重要なキーワードを含めておきましょう。
ヘッダ内のメインメニューには6つの項目が配置されています。この項目数で使用する場合は、内容のテキスト量を全角で8文字以内に収めてください。この文字数を超えると、ブラウザの文字サイズを大きくした際に折り返しが入ってしまう可能性があります。
メインカラム内では、「標準セクション」「強調セクション」「トピックス(トップページのみ)」「新着情報(トップページのみ)」、この4つのスタイルが設定されています。このサンプルでは、メインカラム内の上部で「強調セクション」を使用しています。
左サイドバー内では、「標準セクション(グレー)」「サブメニュー」、この2つのスタイルが設定されています。
右サイドバー内では、「標準セクション(グレー)」「強調セクション1(薄こげ茶)」「強調セクション2(オレンジ)」「ピックアップリスト」「お問い合わせ」、この5つのスタイルが設定されています。
トピックス(タブボックス)について
トップページに配置されているタブボックスは、JavaScriptが有効の場合に機能します。JavaScriptが利用できない環境では、タブボックス内の全ての内容がスクロールで表示されることになります。
※タブボックスを使用しない場合は、トップページのhead要素内に記述されているscript要素を削除してください。
HTMLコード(トップページ)のタブボックスの部分には、ID(tab1〜tab5、topic1〜topic5)が設定されています。これは、タブメニュー部分の topics(1) 〜 topics(5) と関連付けられていますので、カスタマイズする際には設定ミスにご注意ください。
「タブ説明5」のボックス内では、写真を並べるために float が指定されています。IE6では、このフロートがクリアされていませんのでご注意ください。(必要に応じてご自分でクリアしてください)
カスタマイズサービス
色の変更、画像の加工、メニュー項目の変更など、テンプレートの編集をお手伝いいたします。また、テンプレートをベースとしたホームページの制作、メールフォームの設置なども承ります。
※事業者の方向けのサービスとなります。
