小粋空間  -  a cheap joke and a play on words site

Seesaa ブログテンプレート更新（タグリスト・タグクラウド対応）

現在配布中の Seesaa ブログテンプレートを、タグリスト・タグクラウド対応にしました。

タグリストは、まず「記事投稿」または「記事一覧」で記事を編集する際に「記事のタグ」欄があり、この部分に任意のタグ名を設定すると、ブログで表示される記事の下に「タグ」が表示されます。表示されたタグ名のリンクをクリックすると同一タグ名を割り振った記事リスト（タグリスト：左スクリーンショット）が表示されます。
このタグリストのページの HTML およびスタイルシートを追加しました。

またサイドバーの「タグクラウド」に対応するスタイルシートも追加しました。デフォルトテンプレートで配布されているスタイルシートには説明がないため、一部コメントで補足しております。タグ部分のスタイルを変更される場合の参考になれば幸いです。

サンプル（Seesaa ブログ実験サイト）

元記事はすでに修正済ですが、2006年12月16日以前に Seesaa ブログテンプレートをご利用になっている方は、下記のテキストエリアに表示している差分を、現在ご利用中の HTML およびスタイルシートに追加してください。HTML の挿入位置はリスト 1 の通りです。

リスト1　HTML挿入部分

　　　　　：
<% if:page_name eq 'search' -%>
<% loop:list_article %>
<div class="blog">
<h2 class="date"><% article.createstamp | date_format("%Y年%m月%d日") %></h2>
<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<div class="text"><% article.entire_body | text_summary(240) %></div>
<div class="posted">posted by <% article.nickname %> at <% article.createstamp | date_format("%H:%M") -%></div>
</div>
</div>
<% /loop %>
<% /if -%>
 
ここに下記のテンプレートを挿入
 
</div><!-- /content -->
<!-- 中央カラム終了 -->
 
<% if:have_content_right -%>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　：

スタイルシートの追加分は最後の方に追加してください。

HTML
<% if:page_name eq 'tag' -%> <div class="tag"> <script type="text/javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script> <div id="tag_cloud"><% loop:list_tags -%><a href="<% blog.tag_url(tag) %>" class="_tag" title="<% tag.word | html %>/<% count %>"><% tag.word | html %></a> <% /loop -%></div> <script type="text/javascript" > <!-- tag_cloud("tag_cloud"); //--> </script> <br /> <% if:tag %><div class="tag-title">タグ&nbsp;/&nbsp;<% tag.word | html %></div><% /if -%> <br /> <% loop:list_service -%> <div class="tag-body"> <div class="tag-service"><% tag_service.title %></div> <div class="tag-search"><a href="<% tag_service.page_url(tag) %>" target="_blank">'<% tag.word %>'&nbsp;でSeesaa全体を検索する</a></div> <% if:tag_service.service_key eq 'articles' -%> <% loop:list_data -%> <div class="tag-article"> <div class="tag-article-title"><a href="<% article.page_url %>"><% article.subject %></a>&nbsp;<span class="tag-article-posted">[<% article.createstamp | date_format("%Y/%m/%d %H:%M") %>]</span></div> <!--<div class="tag-article-summary"><% article.entire_body | text_summary(40) | tag_strip %></div>--> </div> <% /loop -%> <% /if -%> <% if:tag_service.service_key eq 'photos' -%> <% loop:list_data -%> <div class="tag-photos"> <% thumbnail.fix_aspect(132) # サムネイルの長辺を132で固定。固定したくない場合は削除。 -%> <table> <tr> <td height="140" valign="bottom"><a href="<% photo.page_url %>" target="_blank"><img src="<% thumbnail.page_url %>" border="0" width="<% thumbnail.width %>" height="<% thumbnail.height %>" /></a></td> </tr> </table> <div class="tag-photos-title"><a href="<% photo.page_url %>" target="_blank"><% photo.title | text_summary(10) %></a><br /> <% if:photo_info -%> サイズ：<% photo_info.width %>×<% photo_info.height %><br /> <% if:photo_info.size %>容量：<% photo_info.size | filesize %><% /if %> <% /if -%> </div> </div> <% /loop -%> <% /if -%> <% if:tag_service.service_key eq 'audios' -%> <% loop:list_data -%> <div class="tag-audios"> <div class="tag-audios-title"><a href="/pages/user/upload/<% audio.page_url %>" onclick="window.open('/pages/user/upload/<% audio.page_url %>','popup','width=490,height=320,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% audio.title | text_summary(40) %></a>&nbsp; <span class="tag-audios-posted"><% if:audio_info -%><% if:audio_info.author %>by <% audio_info.author %>&nbsp;&nbsp;<% /if %><% if:audio_info.duration %><% audio_info.duration | hms %>&nbsp;&nbsp;<% /if %><% if:audio_info.size %><% audio.size | filesize %>&nbsp;&nbsp;<% /if %><% /if -%></span></div> </div> <% /loop -%> <% /if -%> <% if:tag_service.service_key eq 'videos' -%> <% loop:list_data -%> <div class="tag-videos"> <table> <tr> <td height="140" valign="bottom"><div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><img src="<% thumbnail.page_url %>" width="132" border="0" /></a></div></td> </tr> </table> <div class="tag-videos-title"><a href="/pages/user/upload/<% video.page_url %>" onclick="window.open('/pages/user/upload/<% video.page_url %>','popup','width=480,height=550,scrollbars=no,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" target="_blank"><% video.title | text_summary(15) %></a><br /> <% if:video_info -%> <!--<% if:video_info.author %>by <% video_info.author %><br /><% /if %>--> 時間：<% if:video_info.duration %><% video_info.duration | hms %><% /if %><br /> 容量：<% video.size | filesize %><br /> <% /if -%> </div> </div> <% /loop -%> <% /if %> <% if:tag_service.service_key eq 'files' -%> <% loop:list_data -%> <div class="tag-files"> <div class="tag-files-title"><a href="/pages/user/upload/<% file.page_url %>" target="_blank"><% file.title | text_summary(15) %></a></div> </div> <% /loop -%> <% /if -%> <% if:pager -%> <div class="tag-navi"> <% if:pager.previous_page %><a href="?page=<% pager.previous_page %>"><% /if %>≪前へ<% if:pager.previous_page %></a><% /if %>&nbsp;&nbsp;<% if:pager.next_page %><a href="?page=<% pager.next_page %>"><% /if %>次へ≫<% if:pager.next_page %></a><% /if %> </div> <% else -%> <div class="tag-more"><a href="<% blog.tag_url(tag, tag_service.service_key) %>">≫もっと見る</a></div> <% /if -%> </div> <% /loop -%> </div> <% /if -%>

スタイルシート
.tag-word { margin: 20px 0px 0px 0px; line-height: 1.4em; } /* タグページ全体 */ .tag { padding: 18px 15px 0 15px; position:relative; } .tag a { color:#006699; } /* タグページの罫線 */ #tag_cloud { border: 1px solid #ccc; padding: 10px; text-align: left; } #tag_cloud a { padding: 2px; } /* タグページのタグタイトル */ .tag-title { padding: 2px 0 2px 5px; background: #8fabbe; color: #ffffff; font-size: 11px; font-weight: bold; } /* タグ一覧全体 */ .tag-body { } /* タグ一覧の「記事」の部分 */ .tag-service { padding: 0 0 5px 0; border-bottom: 1px solid #ccc; color: #444444; _font-size: 12px; text-align: left; clear: left; } /* タグ一覧の「?で全体を検索する」の部分 */ .tag-search { margin-bottom: 10px; padding: 5px 0; text-align: right; } .tag-search a { font-size: 10px; } /* タグ一覧 */ .tag-article { padding: 0 0 10px 0; text-align: left; } /* タグ一覧の記事タイトル */ .tag-article-title { padding: 0 0 5px 0; _font-size: 12px; text-align: left; } /* タグ一覧の投稿時間 */ .tag-article-posted { color: #444444; } /* タグ一覧のサマリー(デフォルトはコメントアウト) */ .tag-article-summary { padding-left: 20px; _font-size: 12px; line-height: 150%; } /* 「≫もっと見る」の部分 */ .tag-more { margin: 10px 0px; font-size: 11px; text-align: right; clear: left; } .tag-photos { float: left; margin: 10px; position: relative; width: 150px; height: 200px; } .tag-photos-title { line-height: 1.4em; padding: 5px 0px; text-align: left; position: relative; } .tag-audios { margin: 5px; position: relative; } .tag-audios-title { text-align: left; font-weight: bold; padding: 0px 0px 5px 0px; position: relative; } .tag-audios-posted { font-weight: normal; position: relative; } .tag-videos { float: left; margin: 10px; position: relative; } .tag-videos-title { line-height: 1.4em; padding: 5px 0px; text-align: left; position: relative; } .tag-navi { clear: left; text-align: center; margin: 10px 0px; position: relative; }

上記の差分 HTML（あるいは改修後の配布テンプレート） をそのまま利用した場合、タグリストのページには記事のタイトルと投稿時間のみが表示されます。冒頭のスクリーンショットのように、記事本文の一部を表示させたい場合は、HTML に含まれる、

リスト2　タグリストに記事本文を表示する場合の修正箇所

　　　　　　：
<!--<div class="tag-article-summary"><% article.entire_body | text_summary(40) | tag_strip %></div>-->
　　　　　　：

の赤色部分を削除してください。(40)になっている数字を変更すると表示文字数を変更できます。

タグリストのテキスト表示については大体確認したつもりですが、表示に不具合がある場合はお知らせください。なお画像・音声・動画についての HTML タグも一応追加しておりますが、これらについては全く試していません。予めご了承ください。

2006.02.28 追記 タグクラウド用スクリプトのマークアップが誤っていたので修正しました。ついでに language 属性を削除しました。

<script type="text/javascript" language="javascript"><!--
tag_cloud("tag_cloud");
--></script>

<script type="text/javascript" language="javascript">
<!--
tag_cloud("tag_cloud");
//-->
</script>