ログイン 会員登録 Q&A

COTOBACO

【ユーザページのHTMLテンプレートで使用しているCSSのクラス解説】

以下にCOTOBACOのユーザページのHTMLテンプレートを掲載します。どの部分にどういったCSSのクラスが割り当てられているかこれを見て理解して「カスタムデザイン」でお好きな設定に変更してください。

<html>
<head>
<title>COTOBACO</title>
</head>
<body>
<!--ヘッダ部分-->
<div class="header">
<div class="ctbc-logo">
<a href="../index.html"><img src="../images/cotobaco-logo-small.gif" alt="COTOBACOトップへ"></a>
</div>
<form action="search.html" method="get">
<div class="ctbc-seach-area"> ユーザ検索：
<input type="text" name="find" class="ctbc-search-box" value="">
<input type="submit" value="検索" class="ctbc-search-button">
</div>
</form>
</div>
<!--ヘッダ部分終了-->

<!--float処理をしている場合に利用-->
<div class="break-all"> <br clear="all" /></div>
<!--float処理をしている場合に利用終了-->

<!--角丸画像の上部-->
<div class="top-round-part"> </div>
<!--角丸画像の上部終了-->

<div class="ctbc"><!--メッセージ開始-->
<div class="ctbc-body"><!--本文開始-->
<div class="title"><!--タイトル部分-->
<div class="people-image"><!--プロフィール画像部分-->
<img src="" class="each-entry-image-style"> <span class="name">○○さんのコトバコ</span>
</div><!--プロフィール画像部分終了-->
<div class="menu"><!--メニュー-->

<div class="hp"><!--ホームページ-->
<img src="../images/open_blog.gif"><a href="" target="_blank">ブログ(HP)を見る</a>
</div><!--ホームページ終了-->

<div class="profile"><!--プロフィール-->
<img src="../images/profile.gif"><a href="#" onclick="new Effect.Appear('profile0'); return false;">プロフィール</a>
</div><!--プロフィール終了-->

<div class="list-friends"><!--友達一覧-->
<img src="../images/friend.gif"> <a href="myfriends.html">友達一覧</a>
</div><!--友達一覧終了-->

</div><!--メニュー終了-->

</div><!--タイトル部分終了-->

<div id="profile0" class="edsubpanel" style="display:none;"><!--隠しプロフィール-->
<img src="../images/close_button.gif" onMouseOver="this.src='../images/close_button_on.gif'" onMouseOut="this.src='../images/close_button.gif'" onClick="new Effect.Fade('profile0');return false;">
<div class="profile-text"><!--プロフィールテキスト-->
プロフィール用テキスト
</div><!--プロフィールテキスト終了-->
</div><!--隠しプロフィール終了-->

<!--float処理をしている場合に利用-->
<div class="float-break"> <br clear="all" /></div>
<!--float処理をしている場合に利用終了-->

<div class="ctbc-messages"><!--個々のメッセージ部分-->
<a name="184"></a>
<div class="entry-date"> 時間 </div>
<div class="date-base-massage"><!--メッセージテキスト-->
<div class="text">ここにメッセージが表示されます。
<div class="each-entry-comment">
<span class="each-entry-comment"> <a href="archives184.html">コメント(0)</a> </span>
　</div>
</div><!--メッセージテキスト終了-->
</div><!--個々のとのメッセージ終了-->
<br clear="all" />
</div><!--メッセージ部分終了です-->

<!--前メッセージ数と送り部分-->
<div class="mes-next"> 全○件&nbsp; <a href="?p=1">次の10件&gt;&gt;</a> </div>
<!--前メッセージ数と送り部分終了-->

<div class="rss-json"><!--RSSとJSONボタン-->
<a href=""><img src="../images/rss.gif"></a>
<a href=""><img src="../images/json.gif"></a>
</div><!--RSSとJSONボタン終了-->

<div class="navi"><!--ボトム部ナビメニュー-->
<a href="../login.html" class="navi-item">ログイン</a>
<a href="../regist.html" class="navi-item">会員登録</a>
<a href="../faq.html" class="navi-item-end">Q&A</a> </div>
</div><!--ボトム部ナビメニュー終了-->

</div><!--本文終了-->

<!--角丸画像の下部-->
<div class="bottom-round-part"></div>
<!--角丸画像の下部終了-->

<div class="copyright"><!--コピーライト-->
<a href="http://www.aivy.co.jp/">Copyright (c)2007 AIVY Communications Co.,Ltd</a>
</div><!--コピーライト終了-->

</body>
</html>
Copyright (c)2007 AIVY Communications Co.,Ltd