2009年08月09日

ナビゲーションを上に出す

 記事の上に独自のコンテンツをおいたおかげで、ナビゲーションが少し下へ出るようになってしまった。
 以前に予告をして放っておいたが、記事の上に独自のコンテンツを置いても、ナビゲーションが、ちゃんと上に出るようにしてみた。

navigation-article-content.jpg

@本当の記事(緑色の楕円)の、コン テンツHTMLから下記の黄色部分を削除する。

A記事欄の一番上に、新たにナビゲー ション用の記事コンテンツを置く(赤色の楕円)。
 そのコンテンツHTMLに先ほど削 除したのと同じ内容を書く。

((ナビゲーション用の記事コンテンツHTMLの全内容はつぎのとおり))
<% content.header -%>
<!-- Content -->

<% if:page_name eq 'index' -%>
<% if:pager.need_pager -%>
<div class="navi">
<% if:pager.previous_page %>
<a href="<% blog.page_url(pager.previous_page) | html %>">&lt;&lt;前の<% blog.index_page_cnt %>件</a><% else %>-<% /if %>&nbsp;
<% loop:list_pager %><% if:pager.show_previous_group(pager_number,5) %>..<% /if %><% if:pager.show_page(pager_number,5) %> <% if:current_page ne pager_number %><a href="<% blog.page_url(pager_number)%>"><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% /if %><% /if %><% if:pager.show_next_group(pager_number,5) %>..<% /if %><% /loop %>
&nbsp;<% if:pager.next_page %><a href="<% blog.page_url(pager.next_page) %>">次の<% blog.index_page_cnt %>件&gt;&gt;</a><% else %>-<% /if %>
</div>
<% /if -%>
<% /if -%>
<% if:page_name eq 'article' -%>
<div class="navi">
<% if:previous_article -%><a href="<% previous_article.page_url %>">&lt;&lt;</a> <a href="<% previous_article.page_url %>"><% previous_article.subject | tag_break %></a> | <% /if -%>
<a href="<% blog.page_url %>">TOP</a>
<% if:next_article -%> | <a href="<% next_article.page_url %>"><% next_article.subject | tag_break %></a> <a href="<% next_article.page_url %>">&gt;&gt;</a><% /if -%>
</div>
<% /if -%>
<% if:page_name eq 'archive' -%>
<div class="navi">
<% if:archive_page_name eq 'month' -%>
<% if:previous_archive -%><a href="<% previous_archive.page_url %>">&lt;&lt;</a> <a href="<% previous_archive.page_url %>"><% previous_archive.createstamp | date_format("%Y年%m月") %></a> | <% /if -%><a href="<% blog.page_url %>">TOP</a><% if:next_archive -%> | <a href="<% next_archive.page_url %>"><% next_archive.createstamp | date_format("%Y年%m月") %></a> <a href="<% next_archive.page_url %>">&gt;&gt;</a><% /if %>
<% /if %>
<% if:archive_page_name eq 'mday' %><% /if -%>
</div>

<% if:archive_page_name eq 'month' -%>
<% if:pager.need_pager -%>
<div class="navi">
<% if:pager.previous_page %><a href="<% archive.page_url(pager.previous_page) %>">&lt;&lt;</a><% else %>-<% /if %><% loop:list_pager %><% if:pager.show_previous_group(pager_number,5) %>..<% /if %><% if:pager.show_page(pager_number,5) %> <% if:current_page ne pager_number %><a href="<% archive.page_url(pager_number)%>"><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% /if %><% /if %><% if:pager.show_next_group(pager_number,5) %>..<% /if %><% /loop %> <% if:pager.next_page %><a href="<% archive.page_url(pager.next_page) %>">&gt;&gt;</a><% else %>-<% /if %>
</div>
<% /if -%>
<% /if -%>

<% /if -%>
<% if:page_name eq 'category' -%>
<div class="navi">
<a href="<% blog.page_url %>">TOP</a> / <% category.name %>
</div>
<% if:pager.need_pager -%>
<div class="navi">
<% if:pager.previous_page %><a href="<% category.page_url(pager.previous_page) %>">&lt;&lt;</a><% else %>-<% /if %><% loop:list_pager %><% if:pager.show_previous_group(pager_number,5) %>..<% /if %><% if:pager.show_page(pager_number,5) %> <% if:current_page ne pager_number %><a href="<% category.page_url(pager_number)%>"><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% /if %><% /if %><% if:pager.show_next_group(pager_number,5) %>..<% /if %><% /loop %> <% if:pager.next_page %><a href="<% category.page_url(pager.next_page) %>">&gt;&gt;</a><% else %>-<% /if %>
</div>
<% /if -%>
<% /if -%>

<!-- /Content -->
<% content.footer -%>

posted by わいずふぁくとりい at 22:01 | Comment(0) | TrackBack(0) | カテゴリ毎に違う簡単な説明を載せる | このブログの読者になる | 更新情報をチェックする

続きを読むを折りたたむ

 「<<続きを読む>>」を押すと、その場で「続き」が表示されたり、閉じたりできるようにする方法を紹介します。
 (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回広告が出てしまいます)
 同じところを押して、閉じたり開いたり出来ませんが、このあたりが妥協点でしょうか・・
posted by わいずふぁくとりい at 04:19 | Comment(0) | TrackBack(0) | 続きを読むを折りたたむ | このブログの読者になる | 更新情報をチェックする
自由形式

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

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