SQLの窓

2012年12月17日


Seesaa の 『カテゴリのHTML編集』で、カテゴリの一覧を見やすくする。

レイアウトとして、右サイドに position:absolute で、フッターを移動して運用しています。本来のフッターの位置のまま使うにしても、カテゴリが多くなるとスペースが無駄になるので、float:left を使って一行に二つのエントリを表示していますが、それだけだとまとまりが解りにくいので、集団の先頭でタイトルを付加しています。

結果は以下のようになっています。


<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;'/>
<br style='clear:both;'/> は、最後に必ず必要です。こうしないと後続するコンテンツで意図せずに float してしまいます。



Seesaa独自タグ簡易リファレンス

タグ:Seesaa
【Seesaa プログ管理支援の最新記事】
posted by lightbox at 2012-12-17 13:01 | Seesaa プログ管理支援 | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり