2007-08-21

「続きを読む」を折りたたみ式に改造(Seesaa)

Seesaaブログでは「続きを読む」をクリックすると、追記記事の内容は別ページに表示されます。
でも私は個人的には「続きを読む」をクリックしたら同一ページにそのまま表示される折りたたみ式の方が好みなので、HTMLを書き換えて改造してみました。

その際、以下のページがたいへんに参考になりました。
記事の追記部分を折りたたみ :Style book

でも、実際に「続きを読む」という機能ってどういう場面で使うのが適切なのかよく分かりません。

ブログの『続きを読む』機能の本当の使い方 :ホームページを作る人のネタ帳

このブログにおける「続きを読む」考 :ekken

管理画面から[デザイン]→[コンテンツ]→[記事]→[コンテンツHTML編集]と進み、一番上の部分を
<% content.header -%>
<!-- Content -->
<script type="text/javascript">
function dd(id){
if(document.all)OBJ = document.all(id).style; else if(document.getElementById)OBJ = document.getElementById(id).style; if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}
</script>
<style>
.more-href{margin:10px 0px;}
</style>

のようにします。青い文字の部分が書き加えたところです。
次は真ん中あたりにある部分を、
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %></div>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %>
<br /><% article.body | bodyfilter(article_info,blog) %>
<% if:article.body_more %>
<div class="more-href"><a href="javascript:void(0)" onclick="dd('more<% article.id %>')">
<script language="JavaScript" type="text/javascript">
document.write('<img src="画像のURL"> <% article.body_continue_text %>');
</script>
</a></div>
<noscript><div class="more-href"><a href="<% article.page_url %>"><img src="画像のURL"> <% article.body_continue_text %></a></div></noscript>
<div class="more_body" id="more<% article.id %>" style="display:none">
<% article.body_more | bodyfilter(article_info,blog) %><div class="more-href"><a href="javascript:void(0)" onclick="dd('more<% article.id %>')"><img src="画像のURL"> 続きを閉じる</a></div></div>
<% /if -%></div>

のようにします。赤い文字の部分を削除して、青い文字の部分を追加しました。「画像のURL」の部分は矢印の画像のものです。


この記事へのコメント
コメントを書く
Name:

URL:

Comment:

認証コード:


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

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