■見出し１■

ＨＯＭＥ > レイアウトマニュアル

レイアウトマニュアル

※「<」 「>」 については、全角で表記していますが、コードに入れるときは半角にしてください。

チェックマーク

リストタグを使ってチェックマークを表示できます。

• リストのサンプルです。
• ul に、class="check"を入れると、その中のリスト＜li＞の先頭に、チェックマークが付きます。
• この＜li＞の、フォントサイズは、14px に設定しています。

PageTop

余白設定

＜p＞、＜div＞などに、 class="mt10" などを指定すると余白の調整ができます。

＜p＞の場合

ma20 で、上下左右に余白を20ピクセルとります。マージンオール（margin all）の意味で設定しています。

mt10 で、上に余白を20ピクセルとります。マージントップ（margin top）の意味で設定しています。

mt20 で、上に余白を20ピクセルとります。

mt40 で、上に余白を40ピクセルとります。

mt80 で、上に余白を80ピクセルとります。

ml20 で、左に余白を20ピクセルとります。マージンレフト（margin left）の意味で設定しています。
サイトマップページなどで使うと良いと思います。

＜div＞の場合

上記、＜div＞には、mt20 center を設定しています。上余白20ピクセル、センター寄。

PageTop

プロフィールレイアウト

メルマガフォームレイアウト

まぐまぐ用

JCity用

２列表示レイアウト

２列表示レイアウト

アドセンス風レイアウト。使い方次第ではメインサイトへの誘導が可能です。

サイトタブ

このページの上部にサイトタブを入れています。関連サイトとの連動を図るときに使ってください。

<div id="TAB">
<p><a href="■URL■">■サイトタイトル■</a> - <a href="■URL■">■サイトタイトル■</a></p>
</div>

使い方は、上記タグを＜/body＞直前に入れてください。＜p＞内は自由に記述してください。

次に、style.cssの4行目を

margin: 20px 0 0 0;

に変更してください。ページ上部の余白が20pxになり、そこに＜TAB＞が入ります。

このHTMLファイルでは便宜上、
style-tab.cssというCSSを読み込ませています（12行目）が、style.cssの記述を変更してタブ機能を使えば、style-tab.css自体は必要ありません。

TABに背景画像を（CSS側で）設定したり、＜p＞内に（サイトバナーのような）画像リンクを貼ったりと、いろいろな使い道が考えられます。

フラッシュバナー

↑スライドショー式フラッシュです。下記のように記述します。

<div class="mt10">
<script type="text/javascript" src="flash-banner.js"></script>
</div>

（上の例では、class="mt10" として、DIVボックスに上マージン10px をとっています。）

指定した１～５までの画像のスライドショーになります。
各画像には、左下にテキストを表示できます。（任意）
各画像にリンクをつけられます。

flash-banner.js , flash-banner.swf で制御。

img-flash/ 内の、banner**.jpg を差し替えるだけで使えます。
同じく、banner.txt で、各画像に表示するテキスト、リンク先を変更できます。
テキストは記述しなければ表示されません。
ここで指定したリンクは、画像全体にリンクが貼られます。

ページ上部、メイン画像部分もフラッシュ化できます。

メイン部分（このページの上部メニューの下のメイン画像）のフラッシュは、flash-main.js , flash-main.swf で制御。
img-flash/ フォルダ内の main**.jpg ファイルを同ファイル名で差し替えるだけで使えます。
main.txt で、各画像に表示するテキスト、リンク先を変更できます。
テキストは記述しなければ表示されません。その他、フラッシュバナーと同じ。

<div id="MENU-HOME">
<!--#include virtual="ssi-menu.html" -->
<div><script type="text/javascript" src="flash-main.js"></script></div>
</div>

上記のように記述して使います。

PageTop

マニュアルメニュー

Yahoo!検索 スタッフブログ

会社概要

定休日