記事一覧ナビモジュール

ファンブログ

この記事のカテゴリーは「スクリプト置き場」という名前です。
下は、この記事のカテゴリーを自動で調べて、そのカテゴリーの記事一覧を表示しています。

カテゴリーでなく、公開順の記事一覧を表示する事も出来ます。
自分のブログでなくても大丈夫です。下は、かこさんの最新記事一覧です。

高負荷でサーバーアカウントをサスペンドされました。
現在、対処の途中のため、アナウンスするまで
この記事のスクリプトは使わないでください。

注意：ファンブログにしか対応していません。

使い方

設置には３つの作業が必要です。

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をシングルクオート ' か
ダブルクオート " で囲んでください。

JSONPで使うこともできます。その場合はrestにtype=json&callback=callback名と
パラメーターを追加してください。フォーマットは後述します。

スタイルシートは自分で書いてください。下が生成される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="">&lt;&lt; 古い記事</a>
</span>1/2<span class="right">新しい記事 &gt;&gt;</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":"記事概要"
		}
	]
}

使用条件

プログラムの中心は個人で使っているサーバーにあります。そのサーバーが落ちていれば
使えません。また、公開を止める場合もありえます。そのことは了承の上で使うこと。

設置方法に関して質問されても答えません。完全ノーサポートです。

このページのコメント欄に使用する旨、書き残すこと。

自ブログに設置、動作確認後、下のブログランキングと、ぶろぐ村の投票ボタンを
両方押すこと。

以上の条件に合意できる方は、お使いください。

新ブログ「Big Bang」で続きを読む →

ここにブログの名前を入れます

広告

記事一覧ナビモジュール

使い方

詳細説明

JSONPで使う

使用条件

HTML、CSS、JavaScript、スパムと悪徳商材の対策