★ 最新の記事一覧をブログ内に表示する。
● 概要
① 新スキン、旧スキンに対応しています。
② 最新の記事一覧を指定した場所に表示します。
③ 最新の記事一覧の最初のページの内容のみ表示します。
④ 最新の記事一覧の最初のページの内容は最大20件です。
⑤ 日付の古い順・新しい順の指定が可能です。
● やり方(新スキンのケース)
① メッセージボードなど入れたい場所に記述(HTMLモードで記述)
(HTMLモードはHTMLタグを表示のタブをクリックしてください)
<div id="elist_disp_area"></div>
② フリープラグインに入れる(新スキン、新しい順のケース)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type="text/javascript">
entrylist_disp('#elist_disp_area',"1","new");
</script>
③ フリープラグインに入れる(新スキン、古い順のケース)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type="text/javascript">
entrylist_disp('#elist_disp_area',"1","old");
</script>
● 説明
・ 下記はフリープラグインに1つあればOKです。旧スキンの場合は下記は不要です。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
・ 下記は既にフリープラグインに書かれていれば不要です。
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
・ entrylist_disp('#elist_disp_area',"0","new");
'#elist_disp_area'・・・入れる場所のセレクタ名(場所の名前)
"0"・・・旧スキン "1"・・・新スキン
"new"・・・新しい順 "old"・・・古い順
④ CSSへ下記を追加する
/* ------------------------------------------------------------------ */
/* 最新の記事一覧の表示部分の調整(ブログ内に最新の記事一覧を入れる) */
/* ------------------------------------------------------------------ */
#elist_disp_area{ /* 最新の記事一覧の表示部分全体 */
height:300px; /* 高さ */
overflow:auto; /* スクロールを付ける */
}
#elist_disp_area div.contentTitleArea h1{ /* 記事タイトル部分 */
display:inline !important;
}
#elist_disp_area a.contentTitle{ /* 記事タイトル部分 */
font-size:12px; /* 文字の大きさ */
}
● やり方(旧スキンのケース)
① メッセージボードなど入れたい場所に記述(HTMLモードで記述)
(HTMLモードはHTMLタグを表示のタブをクリックしてください)
<div id="elist_disp_area"></div>
② フリープラグインに入れる(旧スキン、新しい順のケース)
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type="text/javascript">
entrylist_disp('#elist_disp_area',"0","new");
</script>
③ フリープラグインに入れる(旧スキン、古い順のケース)
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type="text/javascript">
entrylist_disp('#elist_disp_area',"0","old");
</script>
④ CSSへ下記を追加する
/* ------------------------------------------------------------------ */
/* 最新の記事一覧の表示部分の調整(ブログ内に最新の記事一覧を入れる) */
/* ------------------------------------------------------------------ */
#elist_disp_area{ /* 最新の記事一覧の表示部分全体 */
height:300px; /* 高さ */
overflow:auto; /* スクロールを付ける */
}
● スクリプトのソース内容
function entrylist_disp(elist_disp_selector,skin_type,o_n_sequence){ // 最新の記事一覧の表示
$(document).ready(function(){
var AmebaID=ameba_id_get(); // アメーバIDを取得
if($(elist_disp_selector).length!=0){ // 表示指定箇所あり?
if(o_n_sequence=="old"){
if(skin_type=="0"){ // 0・・・旧スキン "1"・・・新スキン
var entryl_url='http://ameblo.jp/'+AmebaID+'/entrylist-1-1.html'; // URL作成(古い順 旧スキン)
}else{
var entryl_url='http://ameblo.jp/'+AmebaID+'/entrylist-1-1.html'; // URL作成(古い順 新スキン)
}
}else{
if(skin_type=="0"){ // 0・・・旧スキン "1"・・・新スキン
var entryl_url='http://ameblo.jp/'+AmebaID+'/entrylist-1.html'; // URL作成(新しい順 旧スキン)
}else{
var entryl_url='http://ameblo.jp/'+AmebaID+'/entrylist-1.html'; // URL作成(新しい順 新スキン)
}
}
var entryl_data=$.ajax({url: entryl_url, async: false}).responseText; // URLの読み込み
if(skin_type=="0"){ // 0・・・旧スキン "1"・・・新スキン
var entryl_recent=$("#recent_entries_list",entryl_data); // recent_entries_list 部分を取り出す
}else{
var entryl_recent=$(".contentsList",entryl_data); // contentsList 部分を取り出す
}
$(elist_disp_selector).append(entryl_recent); // 指定箇所に最新の記事一覧を入れる
}
});
}