最新の記事一覧をブログ内に表示する。 | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery


★ 最新の記事一覧をブログ内に表示する。


● 概要

① 新スキン、旧スキンに対応しています。
② 最新の記事一覧を指定した場所に表示します。
③ 最新の記事一覧の最初のページの内容のみ表示します。
④ 最新の記事一覧の最初のページの内容は最大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); // 指定箇所に最新の記事一覧を入れる
}
});
}