コンテンツ開始

2012年12月17日


HTML と CSS の知識が必要ですが、float:left を使って、Seesaa のサイドコンテンツ等を2つづつ表示する方法

このブログの一番右サイドで、DAZ3Dのリンクカテゴリで実現しています。下にあるコードは、『カテゴリ』用のものなので、集団のトップでさらにタイトルバーを追加しています。

class=sidetitle2 とか class=sttl とかは、CSS でタイトルの見栄えを設定してるだけですが、少なくともこのへんでは CSS の知識が必要になってきます。

このコードの最後に <br style='clear:both;'/> とありますが、これも CSS 的に重要で、float:left を解除して後続のコンテンツに影響が出ないようにする為に重要な一行です。

他にも、ここでは 過去ログも2つづつ表示して無駄なスペースを省いています。

% や if とかは、Seesaa の HTML 編集内で使える独自タグと呼ばれるものですが、今は Seesaa でそれ関係のマニュアルは無いので、インターネットで調べるか、ブログで使われているものから推測するしかありません。

でも、そんなに難しいものでは無いのでチャレンジしてみるといいと思います( 元のをコピーしてメモ帳で保存しておけばいいですし )
<div class="sidetitle2"><% content.title %></div>
<div class="side" style='width:300px'>
<% content.header -%>
<% loop:list_category -%>

<% if:category.name eq 'VIDEO' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>ビデオ レビュー</div>
<% /if -%>
<% if:category.name eq 'パノラマ' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>Google ストリートビュー</div>
<% /if -%>
<% if:category.name eq 'マンガ : ドラマ' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>漫画</div>
<% /if -%>
<% if:category.name eq '知恵メモ' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>知恵メモ</div>
<% /if -%>
<% if:category.name eq '独り言' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>独り言</div>
<% /if -%>
<% if:category.name eq '動画' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>メディア</div>
<% /if -%>
<% if:category.name eq '何でやねん' -%>
<div class="sttl" style='float:left;margin:10px 0 10px 0;'>その他</div>
<% /if -%>

<table style='float:left;border-spacing:0px;'>
<tr><td style='vertical-align:top;width:140px'>

<a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)

</td></tr>
</table>

<% /loop -%>
<% content.footer -%>
</div>

<br style='clear:both;'/>

こちらは、リンク用
<div class="sidetitle2"><% content.title %></div>
<% content.header -%>
<div class="side" style='width:300px;'>
<% loop:list_link -%>
<table style='float:left;'>
<tr><td style='vertical-align:top;'><img style='margin-right:4px;margin-top:2px;' src="http://winofsql.jp/image/sab.gif" border="0"></td><td style='width:120px'><a style='font-size:12px;text-decoration:none;' href="<% content_link.url %>" <% if:content_link.target %>target="_blank"<% /if %>><% content_link.title %></a></td></tr>
</table>
<% /loop -%>

<% content.footer -%>
</div>

<br style='clear:both;'/>
画像は、リンク作成時にタイトルの部分で、br タグ(要素)を追加してから img タグ(要素)を追加しています。




タグ:Seesaa
posted by at 2012-12-17 13:31 | Seesaa | このブログの読者になる | 更新情報をチェックする
コンテンツ終了
右サイド開始
コンテナ終了 base 終了
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。