記事上のナビゲーションを記事下に移動するカスタマイズ

この記事はSeesaaブログの旧システム版です。新システムを利用している方はこちらの記事を参考にして下さい。
Seesaaブログカスタマイズまとめ【新システム】

シーサーブログでは記事上と記事下の両方にナビゲーションがあります。以前の記事「シーサーブログにパンくずリストを設置する方法」という記事で記事タイトルの上にパンくずリストを設置しましたが、パンくずを設置するとパンくずと初期のナビゲーションで2段になってしまいますよね。

今回は記事上に表示されるナビゲーションを記事下に移動し、元々あった記事下のナビゲーションを削除していきます。記事上のナビゲーションを削除するだけでもいいですが、ちょっと違いがあるのです。

これが記事上に表示されるナビゲーション。

ナビゲーション-1

そしてこれが記事下に表示されるナビゲーション。

ナビゲーション-2

今回は個別記事の記事下に1番目のナビを持ってきて、個別記事以外のページは2番目のナビゲーションを残すという方針でやってみようと思います。

スポンサーリンク
アフィリエイトBパートナー募集

記事上のナビゲーションを削除する

まずは記事上にあるナビゲーションは一度削除してしまいます。パンくずと2段になってしまいますので。

シーサーブログの管理画面から「デザイン」⇒「コンテンツ」⇒「記事」をクリックして「記事」の「HTML編集」をクリックします。このHTMLは失敗したらいけないので一度全部コピーしてメモ帳などに貼り付けておく事をおすすめします。

見出しタグ-8

このHTMLの始めの方にナビゲーションのコードが書かれているので次の部分を削除。<!– Content –>という部分の下から<% loop:list_article -%>の直前までバッサリ削除。

<% 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 %>"><<前の<% blog.index_page_cnt %>件</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="<% 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 %>
 <% if:pager.next_page %><a href="<% blog.page_url(pager.next_page) %>">次の<% blog.index_page_cnt %>件>></a><% else %>-<% /if %>
</div>
<% /if -%>
<% /if -%>
<% if:page_name eq 'article' -%>
<div class="navi">
<% if:previous_article -%><a href="<% previous_article.page_url %>"><<</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 %>">>></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 %>"><<</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 %>">>></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) %>"><<</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) %>">>></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) %>"><<</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) %>">>></a><% else %>-<% /if %>
</div>
<% /if -%>
<% /if -%>

削除できたらこの記事コンテンツHTMLの一番下に次のコードを付けたしていきます。<% content.footer -%>という部分の下に追加。

<% if:page_name eq 'article' -%>
<div class="navi">
<% if:previous_article -%><a href="<% previous_article.page_url %>"><<</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 %>">>></a><% /if -%>
</div>
<% /if -%>

これで記事上のナビゲーションを削除して個別記事の記事下には1番目のナビゲーションを設置する事ができます。
シーサーブログカスタマイズとSEOまとめ

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

記事上のナビゲーションを記事下に移動するカスタマイズ”に5件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. フィフィ

    しげぞう様

    お返事が大変遅くなってしまい申し訳ありません。
    諸事情でパソコンを使用することができませんでした^_^;
    教えて頂いた通りやってみましたらできました!!!
    こうしたい! と思い描いていた通りになりました!!
    本当にありがとうございます♪
    自分でいろいろ調べたり、いじってみてもわからなかったので助かりました。
    また何かこまったことがありましたらご相談させてください。
    本当にありがとうございました。

  2. しげぞう 投稿作成者

    フィフィ様

    返信ありがとうございます。ナビを記事の下にも設置したいという事でしたので、とりあえず個別記事の記事下にナビをもう一つ追加する形が良いかと思います。先にちょっとHTMLの編集が必要なので、現在のHTMLをコピーしてメモ帳などに貼り付けて置いて下さい(コンテンツHTMLではなく、普通のHTMLです)。これでいつでも元に戻せるようにしておきます。

    それとナビを記事下のどの部分に設置したいのか考えておいて下さい。記事下には「SNSボタン」や「同じカテゴリーの関連記事」などがありますので、SNSボタンの下とか関連記事の下とかナビを設置したい場所を決めておいて下さい。

    バックアップできたら管理画面から「デザイン」⇒「デザイン設定」と進み、適応中のテンプレート(デザイン名)を選択します。

    「HTMLの編集」のタブをクリックしてHTMLの編集をしていきます。

    まず、HTMLの46行目付近に次のようなコードがあります。

    <% 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 -%>

    これが記事上に表示されるナビを表示させる部分になりますので、これをこのままコピーして下さい。ちなみにこの部分を削除すれば記事上のナビは削除もできます。

    後はこのコードを設置したい場所に貼り付ければOKなんです。

    貼り付ける位置ですが、下の方にスクロールしていき、129行目付近にSNSボタンを表示させるコードがあります。

    <% if:blog.bookmark_service %>
    <div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip %>"></div>
    <% /if %>

    これがSNSボタンを表示させるコードなので、例えばこの直後にナビのコードを入れればSNSボタンの下にナビが設置できます。

    また、その下に関連記事を表示させるコードがあります。

    <% if:list_category_article -%>
    <div class="listCategoryArticle">
    【<% article_category.name %>の最新記事】<br />
    <ul>
    <% loop:list_category_article %>
    <li><a href="<% article.page_url %>"><% article.subject | text_summary(40) %></a></li>
    <% /loop %>
    </ul>
    </div>
    <% /if %>

    なので、この下でもいいかもしれません。好きな場所にナビを設置してみて下さい。

    それと設置したナビが上のコンテンツと近すぎるような場合には余白を取るために、ナビコードの直前に改行タグ<br />をいれて余白を調整しても良いと思います。

    あくまで個別ページの場合のナビなので、設置ができたら保存して個別記事で表示を確認してみてください。もしそれでも上手くいかない場合には再度コメント頂けると助かります。

  3. フィフィ

    しげぞう様
    お返事ありがとうございます。
    私ヶ使っているデザインは pinkハート:右 です。
    ひとつの記事を読んだ後は一番下までスクロールされているので、次の記事を見るボタンが上にあると、前後の記事を見ずにどんどんブログから離脱していってしまうような気がして…
    お返事お待ちしております。

  4. しげぞう 投稿作成者

    フィフィ様

    コメントありがとうございます。記事のナビゲーションですが、これは使っているテンプレートのよって違う部分があるかもしれません。私の使っているデザインでは記事下にナビがあり、記事の上には無いので、もし良かったら現在使っているデザイン(テンプレート名)を教えて頂けると助かります。それを見てちょっとやってみようと思いますので、どうぞよろしくお願い致します。

  5. フィフィ

    こんにちは、はじめまして。最近シーサーブログを始めたばかりです。旧システムの説明サイトはたくさんあるのですが、新システムの解説をしているところが少なく、いつもこちらのサイトを参考にさせていただいてます。
    記事上に表示されているナビゲーション(?)
    <>
    となっているものを記事の下にも表示したいと思っています。
    おそらくこのページで解説されていることに近いと思ったのですが、新システムとなるとどこをいじったらいいのかわからず困っております。
    やってみてもリンクがうまく作動しなかったり…
    お時間あるときに 新システムでの記事下にも
    <>
    を表示させる方法を解説していただけると嬉しいです。
    (まだまだ初心者なのでわけのわからない質問となっていましたら申し訳ありません。)