DDT for Love Collection

Ajax メニュー以外から各ページを呼び出す

Ajaxメニュー以外からも、各種ページを呼び出すコトができます。

Ajax page call
このカテゴリー内のページについては、説明部分にあるソースを掲載するコトで、サーバ内からデータを呼び出し、 <div id="disp"> ～ </div> の中に内容を書き出します。

Page Open
TOPページと BBS については Ajaxを使用しませんので、普通にhtmlにリンクを貼る感じで使って下さい。

各ページごとのデザインを変える

各ページタイトルの右側部分にある

html をクリックすると、Ajaxによってサーバから引き出されるデータの htmlデフォルト版を見ることができます。

各ページを構成する htmlデータの主要部分のタグには、あらかじめ ID ・ class の定義を済ませてありますので、 htmlソースを確認していただくコトで、サーバのデータに触るコトなくデザインを設定することが可能です。
そのためには、ほんの少しだけCSSの知識が必要となりますが、ごくわずかな知識でも十分デザインできますので、CSSがよく解らない方もぜひ一度トライしてみて下さい♪
もちろん、CSSヘビーユーザーの方にも楽しんで頂けるように、Image Replacement なども取り入れていますので、ガンガンデザインしてやって下さい！

ラブコレ参加サイトの更新情報を表示する

背景がオレンジ色の LC site Update では、投稿大学から配信するLC参加サイトのリアルタイムな更新情報について解説しています。

Open をクリックすると、更新情報一覧のデザイン内容を指定できる専用のCSSソースが出現します。

この CSSソースを index.html の <head> ～ </head> 間にコピぺーしてご利用下さい。
ペーストしていただくCSSの内容を変更するコトで、一覧表のデザインを自由に設定していただけます。 LC site Update

Ajax page call ギャラリーに書き出される各種ページの内容

About

html

<a href="javascript:getPage('http://love-cl.seanet.jp/fixed/about.html')"> About </a>

ラブコレの誕生秘話や、参加条件などなど。

Information

html

次月度ギャラリーの募集告知と、応募方法、その他募集など。

History

html

<a href="javascript:getPage('http://love-cl.seanet.jp/fixed/history.html')">History </a>

オープンから今日までのラブコレの歩み。歴代参加者など。

Special

html

<a href="javascript:getPage('http://love-cl.seanet.jp/fixed/special.html')"> Special </a>

『ラブコレでき～る』『投稿大学のラブコレ限定表示方法』『ラブコレクラブ』などなど。

Banner

html

<a href="javascript:getPage('http://love-cl.seanet.jp/fixed/banner.html')"> Banner </a>

相互リンク用の自動更新バナーと通常のバナー・サムネイル置き場。

Contact

html

<a href="javascript:getPage('http://love-cl.seanet.jp/fixed/contact.html')"> Contact </a>

お問い合わせページ。

Page Open Ajaxを使わずに表示されるページ

TOP [gallery top]

最新ギャラリーのＴＯＰページです。

BBS

html

ラブコレ掲示板。フレーム内に表示されます。

LC site Update ラブコレサイト更新情報の表示方法

Update List

ラブコレ参加サイトの投稿更新情報。
サンプル左側の Open をクリックすると、ソースが表示されます。
ソースは index.html の <head> ～ </head> の間にコピぺーして下さい。

基本ソース Display Sample

CSSを使わずに表示させると左の図のようになります。
Open をクリック後に出てくるソースを使うと、サイトとサイトの間に少しだけスペースの入った表示となります。


<style type='text/css'>
<!---//-
#text_013 {
	overflow-y:no;
	text-align:left;
	padding: 1px; 
	margin: 1px;
	font:10px/120% arial,helvetica,osaka,sans-serif;
	}
/*  奇数列  */
#text_013_body1 {
	margin:5px; 
	padding:3px 2px 2px 2px;
	width:150px;
	}
/*  偶数  */
#text_013_body2 {
	margin:5px; 
	padding:3px 2px 2x 2px;
	width:150px;
	}
#text_013_site {
	margin:2px 0px 0px 0px; 
	padding:0px 0px 0px 6px;}
-//----->
</style>

サンプル１ Display Sample

サイトごとに枠で区切りました。

各サイトの表示を解りやすくするために、奇数列の背景にちょっとだけ色をつけてみました。


<style type='text/css'>
<!---//-
#text_013 {
	width:200px;
	overflow-y:no;
	text-align:left;
	padding: 1px; 
	margin: 1px;
	font:10px/120% arial,helvetica,osaka,sans-serif;
	}
/*  奇数列  */
#text_013_body1 {
	border:1px solid #E0DCCD;
	background:#fafaf6;
	margin:5px; 
	padding:3px 2px 2px 2px;
	width:150px;
	}
/*  偶数  */
#text_013_body2 {
	border:1px solid #D0D9C5;
	background:#ffffff;
	margin:5px; 
	padding:3px 2px 2px 2px;
	width:150px;
	}
#text_013_site {
	margin:2px 0px 0px 0px; 
	padding:0px 0px 0px 6px;}
-//----->
</style>

サンプル２ Display Sample

サイトごとの背景に、CSSで表示させるグラデーションを使ってみました。

CSSだけで作れる変わった表示をサンプルにしようと思い、背景のグラデーションをさらに交互にしてみました。


<style type='text/css'>
<!---//-
#text_013 {
	text-align:left;
	padding: 1px; 
	margin: 1px;
	font:10px/120% arial,helvetica,osaka,sans-serif;
	}
/*  奇数列  */
#text_013_body1 {
	border:1px solid #cccccc;
	margin:5px; 
	padding:3px 2px 2px 2px;
	width:150px;
	filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffffff', endColorStr='#E2E0C8', gradientType='1');
	}
/*  偶数  */
#text_013_body2 {
	border:1px solid #E8E2E2; 
	margin:5px; 
	padding:3px 2px 2px 2px;
	width:150px;
	filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='#E2E0C8', endColorStr='#ffffff', gradientType='1');
	}
#text_013_site {
	margin:2px 0px 0px 0px; 
	padding:0px 0px 0px 6px;}
-//----->
</style>