2009年08月09日

続きを読むを折りたたむ

 「<<続きを読む>>」を押すと、その場で「続き」が表示されたり、閉じたりできるようにする方法を紹介します。
 (Seesaaの元々の動作は、「続きを読む」を押すと、単独の別ページが開きます)

 Seesaaブログ「Style book」の、下記の記事を参考に、私なりのアレンジを加えています。
http://temp-css.seesaa.net/article/4412302.html

<<方法>>
 [デザイン]−[コンテンツ]−[記事]−[コンテンツHTML編集]とたどっていき、「コンテンツHTML」を編集します。

@最初の方の「<!- - Content -->」(最初から3行目)の後ろに、つぎのように追加します。

((元々のコンテン ツHTMLの、冒頭は、こんな感じです。))
<% content.header -%>
<!-- Content -->
<% if:page_name eq 'index' -%>
<% if:pager.need_pager -%>

((そこにつぎのよ うに、黄色部分を 追加します。))
<% content.header -%>
<!-- Content -->

<!-- ここからが追加部分@ -->
<script type="text/javascript">
    function dd(id){
        bodyId = 'body' + id;
        moreId = 'more' + id;
        if(document.all){
            bodyObj = document.all(bodyId).style;
            moreObj = document.all(moreId).style;
        }else if(document.getElementById){
            bodyObj = document.getElementById(bodyId).style;
            moreObj = document.getElementById(moreId).style;
        }
        if(bodyObj){
            bodyObj.display=='none'?
            bodyObj.display='' : bodyObj.display='none';
        }
        if(moreObj){
            moreObj.display=='none'?
            moreObj.display='' : moreObj.display='none';
        }
    }
</script>
<!-- 追加部分@終わり -->

<% if:page_name eq 'index' -%>
<% if:pager.need_pager -%>


A「<% article.first_body | bodyfilter(article_info,blog) %>」というのを検索して、見つけ、それをつぎの内容に書き換えます。

((元々のコンテン ツHTMLの、「<% article.first_body | bodyfilter(article_info,blog) %>」の前後は、こんな感じです。))
<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 %>

((そこにつぎのよ うに、オレンジ 色部分を削除し、黄色部分を 追加します。))
<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %>

<!-- この部分を削除します
<--% article.first_body | bodyfilter(article_info,blog) %> -->

<!-- ここからが追加部分@ -->
<div class="text" id="body<% article.id %>" style="display:block">
    <% article.body | bodyfilter(article_info,blog) %>
    <% if:article.body_more %>
        <div class="more-href">
            <a href="javascript:void(0)" onclick="dd('<% article.id %>')">
                <<<% article.body_continue_text %>>>
            </a>
        </div>
        <noscript>
            <div class="more-href">
                <a href="<% article.page_url %>">
                    <% article.body_continue_text %>
                </a>
            </div>
        </noscript>
    <% /if -%>
</div>
<div class="text" id="more<% article.id %>" style="display:none">
    <% article.entire_body | bodyfilter(article_info,blog) %>
    <div class="more-href">
        <a href="javascript:void(0)" onclick="dd('<% article.id %>')">
            <<続きを閉じる>>
        </a>
    </div>
</div>
<!-- 追加部分A終わり -->

<% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %>
<a href="<% blog.tag_url(tag) %>"><% tag.word %></a>
 <% /loop %></div><% /if %>

 「続き」が開いているときには「<<続きを読む>>」は表示されなくなり、「続き」の内容の後ろに「<<続きを閉じる>>」が表示される仕様になってい ます。
 この方法だと、記事の下に広告を出していても、広告はひとつしか出てきません。
(「Style book」さんの方法だと、本文と、続きの両方の下に、2回広告が出てしまいます)
 同じところを押して、閉じたり開いたり出来ませんが、このあたりが妥協点でしょうか・・


<<ここからが続きです>>
((デフォルトのコンテンツHTML、全内容は、このような内容でした))
contents-html-default.txt

((今回修正を加えた、コンテンツHTML、全内容は、このような内容です))
contents-html-folding-more.txt

((初期値との差分は、つぎのようになっています。))
@@ -1,5 +1,28 @@
<% content.header -%>
<!-- Content -->
+
+<!-- add -->
+<script type="text/javascript">
+ function dd(id){
+ bodyId = 'body' + id;
+ moreId = 'more' + id;
+ if(document.all){
+ bodyObj = document.all(bodyId).style;
+ moreObj = document.all(moreId).style;
+ }else if(document.getElementById){
+ bodyObj = document.getElementById(bodyId).style;
+ moreObj = document.getElementById(moreId).style;
+ }
+ if(bodyObj){
+ bodyObj.display=='none'? bodyObj.display='' : bodyObj.display='none';
+ }
+ if(moreObj){
+ moreObj.display=='none'? moreObj.display='' : moreObj.display='none';
+ }
+ }
+</script>
+<!-- end of add -->
+
<% if:page_name eq 'index' -%>
<% if:pager.need_pager -%>
<div class="navi">
@@ -71,7 +94,37 @@
<% 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 %>
+<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %>
+
+<!-- delete <--% article.first_body | bodyfilter(article_info,blog) %> -->
+
+<!-- add -->
+<div class="text" id="body<% article.id %>" style="display:block">
+ <% article.body | bodyfilter(article_info,blog) %>
+ <% if:article.body_more %>
+ <div class="more-href">
+ <a href="javascript:void(0)" onclick="dd('<% article.id %>')">
+ <<<% article.body_continue_text %>>>
+ </a>
+ </div>
+ <noscript>
+ <div class="more-href">
+ <a href="<% article.page_url %>"><% article.body_continue_text %></a>
+ </div>
+ </noscript>
+ <% /if -%>
+</div>
+<div class="text" id="more<% article.id %>" style="display:none">
+ <% article.entire_body | bodyfilter(article_info,blog) %>
+ <div class="more-href">
+ <a href="javascript:void(0)" onclick="dd('<% article.id %>')">
+ <<続きを閉じる>>
+ </a>
+ </div>
+</div>
+<!-- end of add -->
+
+<% if:list_tag %><div class="tag-word">タグ:<% loop:list_tag %><a href="<% blog.tag_url(tag) %>"><% tag.word %></a> <% /loop %></div><% /if %>
<% /if -%>
<% if:blog.bookmark_service %>
<script type="text/javascript" language="javascript" charset="utf-8"><!--

【続きを読むを折りたたむの最新記事】
posted by わいずふぁくとりい at 04:19 | Comment(0) | TrackBack(0) | 続きを読むを折りたたむ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
自由形式
×

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