TopSeesaaブログカスタマイズ>HTML ページ内ナビをつける
2005年03月13日

HTML ページ内ナビをつける

Seesaa HTML編集の小ネタ。

カテゴリページや月別ページで一番古い記事から読みたいときがあります。
そのときは、ページの一番下までホイールをグリグリ回して最後までゆくのですが、このブログのように一記事一記事が長いと最後までゆくのが大変。
人差し指が腱鞘炎になってしまいます。

ページ最上部と最下部に行くリンクを作れば、長いページでも大丈夫、一発で最下部、最上部に行くことができます。

HTMLの記事部分の頭と終わりにリンク先を作って、そこへのリンクを張っておしまい、ではあまり芸がないので、記事の日付の横も「上」と「下」を張ってみました。

まずHTML編集画面、ちょっと下がったところ

<div id="content">
<a name="ue"></a>
<% content_main %>
<div class="updown"><a name="sita" href="#ue">上</a></div>
<% if:page_name eq 'comment' -%>
<div id="comments">
<div class="comments-head">"<% article.subject | tag_break %>"へのコメント<br /></div>
赤字部分を挿入します。"ue""sita"はほかの名前でも大丈夫でしょう。
これだけでも最下部から最上部にあがることはできます。
<a name="sita" href="#ue">上</a>
を囲んだdivのクラス名も、ほかと重複しなければ大丈夫です。

次にコンテンツの記事HTML編集画面、1/4あたり
<div style="width : 100%">
<h2 class="date" style="float:left ";><% article.createstamp | date_format("%Y年%m月%d日") %></h2>
<div class="updown"><a href="#ue" target="_blank">上</a>&nbsp;<a href="#sita" target="_blank">下</a></div></div>
これで日付の横に「上」「下」のリンクができます。

あとはスタイルシートの適当なところに
.updown{
width:100%;
text-align:right
}
を貼り付けます。

今ひとつ、スタイルの使い方がエレガントでは無いかもしれませんが・・・



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

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


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

この記事へのトラックバック
>>関連書籍
×

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