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日

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

<link rel="stylesheet" href="http://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$>


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

ブログTOP

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

前の記事 

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

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

ブログ表示

表示 

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

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

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

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

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


 
 参照リンクの無いTBはご遠慮下さい。コメントTBは、確認後表示する設定です。  
 公開されたくないご意見ご感想はその旨を添えて送信をお願いします。

この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/para080/50864699
     名前
     
     メール(webに公開されます。)
     
     URL
     
     コメント
     
       情報を記憶: