待望のタグ「IndexNavigator」:ダメなものは駄目。酒でも飲んで忘れたい・・・。

2007年11月11日

待望のタグ「IndexNavigator」

livedoor Blog 開発日誌 - livedoor Blog（ブログ）　を見てみましたら、

livedoor Blogのデザインテンプレートをカスタマイズする時に利用できる独自タグのリスト
に　　「IndexNavigator」
ブログのトップページで、2ページ目や3ページ目に移動できるリンクが設置される

こんな感じの表示　1 2 3 4 5 6 7 8 ...の
待望のタグがいつの間にか出来ていましたので、設置してみました。

つまりこのブログだと、TOPページの　http://para080.livedoor.biz/　から

2の数字をクリックすると、2ページ目
http://para080.livedoor.biz/?p=2
3の数字を・・・3ページ目へ
http://para080.livedoor.biz/?p=3
13ページへ・・・
http://para080.livedoor.biz/?p=13
　　　　
トップページから移動できる訳で、
他のブログサービスで使った事がありますが、見る側からすると正直これは便利です。

詳細は↓記サイトに詳しく掲載されています。

livedoor Blog まとめサイト - livedoor Wiki（ウィキ）

・IndexNavigator
　ブログのトップページで、2ページ目や3ページ目に移動できるリンクが設置されます。
・ArticlePager
　個別記事ページで、前後の記事へのリンクが設置されます。
・ArchivePager
　月別ページ・カテゴリ別ページで、前後のページへのリンクが設置されます。

デザインテンプレートのナビゲーション詳細
 デザインテンプレートの独自タグ
 デザインテンプレートのナビゲーション詳細

追加
ブログのページ移動（ナビゲーション機能）を強化しました
livedoor Blog 開発日誌:2007年12月07日

２．共通スタイルシートを導入する
同じくトップページの編集で、<head></head>タグ内に以下を入力します。
（配布デザインの最新版をお使いの場合は既に入っていますので必要ありません。）

<link rel="stylesheet" href="https://parts.blog.livedoor.jp/css/template.css" type="text/css" />

便利なタグですが困るのが・・・トップページのどこに設置するかですが
このブログのデザインだと・・と色々試してみましたが・・・

今のところ、

　<h2 class="date" id="menu">（タイトル名）</h2>
　<div class="blogbody">
　<div class="main">

　　・・・・・・・・

　</div></div>

を新たに作りまして、この中に

<SetVar NavigatorRange>15</SetVar>
<SetVar PrevArticleText>つぎ→</SetVar>
<SetVar NextArticleText>←まえ</SetVar>
<$IndexNavigator$>

のタグをいれて表示させてみました。

寂しいので・・・なんとなく

馬の画像を横に設置しましたが

ここで問題がありまして、「IndexNavigator」 の表示はきちんと表示されていますが・・・

ブログ表示

上の緑の枠と白い本文エリア間の部分が切れてしまいまして
下の背景が少し見えてしまっている訳ですが・・・

何とか、きれいに表示させるように、CSSをいじりましたが・・・
よく分からないわけで、あきらめました。

勉強しないといけないわけですが、ヒマな時まとめてやりたいとは思いますが・・・

自己満足のカスタマイズですが、多分便利になったと思いますので・・・
気が付きましたらクリックしてみて下さい。

追加
　とりあえず、
<h2 class="date" id="menu">（タイトル名）</h2>
の部分を消して　blogbody　main だけに変更。

Posted by para080 at 00:17│Comments(0)│TrackBack(0) │ Edit