続・追記部分折りたたみ

[category] customize [tags] javascript, カスタマイズ,

 Seesaaは常に重い。これはユーザーとしては最早諦めの境地に入っている現実です。記事を書いていたら長くなったので追記文に一部を移して「続きを読む」をクリックしてもらって記事全文を読んでもらう、というのはよくあることですが、Seesaaでは記事ページにたどり着くのに時間がかかります。閲覧する側としてもこれはちょっとしたストレスです。

 ちょうど一年前、この記事に書いてあるように、追記文を読むのにjavascriptを使う方法を取り入れました。が、そこでも述べてるように微妙に期待した表示にならなかったので現在は別の配布ソースを使って表示させています。

 配布ソースはABCK追記の展開・折りたたみで紹介されてあるものを改変して使わせてもらっています。

fold.js

 まず、上のリンク先を保存します。右クリックで対象をファイルに保存するのが早いです。保存の際は拡張子が「*.js」になっていることを確認します。「ファイルマネージャ」で作成したファイルをアップします。

 次に「デザイン」-「HTML」にいき<head>〜</head>に次の一行を挿入します。

<script type="text/javascript" src="http://users.up.seesaa.net/image/fold.js"></script>

 usersは自分のブログURLに合わせて変更します。

 保存をしたら、次は「デザイン」-「コンテンツ」-「記事」に行き右上にある「コンテンツHTML編集」のリンクへと飛びます。

<% if:page_name eq 'article' -%> <div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.entire_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% else -%>
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %><% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% /if -%>

 初期値のままであれば61行目から以上のような記述が始まります。似ているコードが続きますが<% else -%>以降の方を変えるので注意してください。

<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.body | bodyfilter(article_info,blog) %>
<% if:article.body_more -%>
<div class="more-href" id="varP<% article.id %>">
<a href="<% article.page_url %>#<% article.id %>" onclick="showMore('<% article.id %>','<% article.page_url %>#<% article.id %>');return false;" title="<% article.subject %>の続きを読む"><% article.body_continue_text %></a></div>
<noscript><div class="more-href">
<a href="<% article.page_url %>#varP<% article.id %>" title="<% article.subject %>の続きを読む"><% article.body_continue_text %></a></div></noscript>
<div class="more-body" id="varXYZ<% article.id %>" style="display:none"><% article.body_more | bodyfilter(article_info,blog) -%><div class="more-href"><a href="#id<% article.id %>" onclick="showMore('<% article.id %>',0);return true;" title="<% article.subject %>の続きを隠す">続きを隠す</a></div></div><% /if -%>
<% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>

 先ほど色を変えた分のコードをごっそり以上のように書き換えます。「続きを隠す」については好きな言葉に変えてください。

<div class="blog" id="id<% article.id %>">

 最後に、少し上に戻って(初期値では40行目)<div class="blog">の一文にid属性を追記します。ここまで終えたら保存して「すべてのページ」に再構築をしてください。以上でカスタマイズ終了です。

Comments

Comment Form

NAME*

URL

COMMENT*

認証コード*

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

TrackBacks

TrackBackURL
※言及リンクのないトラックバックは受信されません。
sample
New Entries
Archives
Comments
RSS(by FeedBuner)