スポンサーリンク
ファンブログ
この記事のカテゴリーは「スクリプト置き場」という名前です。
下は、この記事のカテゴリーを自動で調べて、そのカテゴリーの記事一覧を表示しています。
カテゴリーでなく、公開順の記事一覧を表示する事も出来ます。
自分のブログでなくても大丈夫です。下は、かこさんの最新記事一覧です。
高負荷でサーバーアカウントをサスペンドされました。
現在、対処の途中のため、アナウンスするまで
この記事のスクリプトは使わないでください。
注意:ファンブログにしか対応していません。
使い方
設置には3つの作業が必要です。
1. 表示したい場所に <div id=”navi_print_area”></div> と書く。
2.それより後のどこかに次のように書く。
<script type="text/javascript"> var action='category'; var category_title='カテゴリアーカイブ'; var rest='http://api.dwm.me/fanblog/navigation/'; rest+='?url='+encodeURIComponent(window.location.href) +'&action='+action+'&category_title=' +encodeURIComponent(category_title); var script=document.createElement('script'); script.setAttribute('type','text/javascript'); script.setAttribute('src',rest); var head=document.getElementsByTagName('head'); head[0].appendChild(script); </script>
3.自分でスタイルシートを書く。
詳細説明
作業2に出てくる、カテゴリアーカイブという文字は、サイドバーのカテゴリを表示している部分の
タイトルと同じにしないと動きません(このブログの場合はカテゴリーです)。違う場合は
カテゴリアーカイブの文字を変更して書き込んでください。
1に書いたdivタグのidは変更可能です。
その場合は、作業2のrestに次の赤字部分を追加します
rest+='?url='+encodeURIComponent(window.location.href)
'&action='+action+'&category_title='
+encodeURIComponent(category_title)
+'&print_id=id名';
id名がhogeなら、最後の行は+’&print_id=hoge’;となります。
この記事のように1ページに複数表示させたいときは、idを変更するだけでなく、次のようにします。
rest+='?url='+encodeURIComponent(window.location.href)
'&action='+action+'&category_title='
+encodeURIComponent(category_title)
+'&print_id=id名&callback=重複しない英数字の列';
重複しない英数字の列は、重複さえしなければ何でもいいです。たとえば、こんな感じです。
一つ目には&print_id=id1&callback=callback1
二つ目<には&print_id=id2&callback=callback2
重複すると同じ場所に上書きされてしまいます。重複さえしなければ、あとは自動でやります。
var action=’category’;の部分をvar action=’all‘;にすると、すべての記事公開順表示になります。
(categoryはカテゴリー記事一覧表示)
ただし、このall設定はトップページのURLでのみ有効です。1記事ページやアーカイブページで
allを指定すると、何も表示せずに終了します。
var action=’category’;のままだと、表示中のページの最初の記事が属しているカテゴリーの
記事一覧を表示します。ですから、1記事の時と、カテゴリーページの場合はcategoryに、
トップページの時はallに設定してください。
トップページ以外でallを指定したい、または他のブログの一覧を表示したい場合は、encodeURIComponent(window.location.href)のwindow.location.hrefをトップページの
URL、または表示したいブログのURLに変更します。
window.location.href以外のURLを指定する場合は、URLをシングルクオート ‘ か
ダブルクオート “ で囲んでください。
パラメーターを追加してください。フォーマットは後述します。
スタイルシートは自分で書いてください。下が生成されるHTMLのフォーマット、
さらにその下がこのページで使っているスタイルシートです。
HTML
<div id="navi_print_area"> <h3>カテゴリー「<a href="">スクリプト置き場</a>」の記事一覧</h3> <ul> <li><a title="" href="">記事一覧ナビモジュール</a></li> <li><a title="" href="">サイドバーにもサムネイルモジュール</a></li> <li><a title="" href="">別ブログの最新記事を自動でリンクして紹介</a></li> </ul> <p><span class="left"> <a title="ページ2へ" onclick="" href=""><< 古い記事</a> </span>1/2<span class="right">新しい記事 >></span></p> <br> </div>
スタイルシート
div#navi_print_area{ clear:both; border:1px solid #00ff00; background:#ccffcc; padding:1em 1em 0 1em; } div#navi_print_area a, div#navi_print_area a:hover{ background:transparent; } div#navi_print_area a{ color:#ff6699; } div#navi_print_area a:hover{ color:#ff4477; } div#navi_print_area h3{ border:none; background:transparent; margin:0; text-align:center; color:#00cc00; } div#navi_print_area ul{ list-style-type:none; margin:1em; padding:0; } div#navi_print_area li{ list-style-type:none; padding:0 0 0 5em; } div#navi_print_area p{ line-height:1em; margin:0 6em; padding:0; text-align:center; color:#00cc00; } div#navi_print_area span.left{ float:left; color:#aaaaaa; } div#navi_print_area span.right{ float:right; color:#aaaaaa; } div#navi_print_area dl{ margin-left:3em; } div#navi_print_area br{ clear:both; }
JSONPで使う
スタイルシートで直せない部分、例えばタイトルの文章を変えたいとか、HTMLの構造を
変えたい場合はJSONPで読み込んでください。コールバックは1個のオブジェクトを渡されます。
オブジェクトのフォーマットはcategoryとallで違います。
また、コールバックの冒頭でevalは必須です。
category { "category":{ "title":"カテゴリー名", "url":"カテゴリートップのURL", "page":カテゴリーの何頁目か(int), "len":カテゴリーの総ページ数(int) }, "values":[ {"title":"記事タイトル", "url":"記事URL", "value":"記事概要" } ] } all { "page":一覧の何頁目か(int), "len":一覧の総ページ数(int), "url":"トップページのURL", "values":[ {"title":"記事タイトル", "url":"記事URL", "value":"記事概要" } ] }
使用条件
プログラムの中心は個人で使っているサーバーにあります。そのサーバーが落ちていれば
使えません。また、公開を止める場合もありえます。そのことは了承の上で使うこと。
設置方法に関して質問されても答えません。完全ノーサポートです。
このページのコメント欄に使用する旨、書き残すこと。
自ブログに設置、動作確認後、下のブログランキングと、ぶろぐ村の投票ボタンを
両方押すこと。
以上の条件に合意できる方は、お使いください。
関連コンテンツ
スポンサーリンク
一記事のサイドバー、一番上の記事一覧ナビ、
ちょっと前の記事を探したいときに、すっごく便利だよね。
よく使わせてもらってます。
>高負荷でサーバーアカウントをサスペンドされました。
>現在、対処の途中のため、アナウンスするまで
>この記事のスクリプトは使わないでください。
対処は終わったの?ずっとアナウンス待ってたり。
高負荷で、配布はやめちゃったのかな?
もう移転しちゃったから、いいといえばいいんだけど。
さくらのブログにも付けられればいいのになぁ。
便利で皆が使い始めたら、サーバが大変だとは思うけどね。