やまでら くみこ のレシピ

短時間で簡単に作れる人気家庭料理を紹介。

カテゴリ別の最新記事一覧をライブドアブログのサイドバーに表示する方法

投稿日:2013年1月18日 更新日:

3448606172_bd3a1607ec
今回は、ライブドアブログのサイドバーにカテゴリ別の最新記事を一覧表示する方法をご紹介します。

例えば、いま表示されている記事が料理レシピだとしたら、サイドバーには料理記事の一覧がずらっと並ぶイメージです。もしかすると、一覧を見た読者がもう一本記事を読んでくれるかもしれません。

やり方としては、XML形式で公開されているカテゴリ別最新記事一覧をjqueryで加工して表示するというものです。そう聞くととてもムズカシそうですが、実際はコピーして貼り付けるだけなので、意外とカンタンです。

jqueryライブラリを読み込む

まずは、jqueryライブラリを読み込みます。具体的には、「ブログ設定」>「デザイン/ブログパーツ設定」>「カスタムJS」>「head内」に次の一行を追記します。

<script type="text/javascript" src="http://parts.blog.livedoor.jp/js/jquery.js"></script>

ブログパーツを記述する

続いて、ブログパーツを記述します。「ブログ設定」>「デザイン/ブログパーツ設定」>「ブログパーツ」で「フリーエリア」を追加して、以下のコードを貼り付けます。

ブログパーツの「ラベル」は適当で構いません。「改行設定」は「変換しない」、「タイトル設定」は「ブログパーツタイトルを表示しない」にそれぞれチェックを入れてください。

<div class="sidewrapper" id="article_list"></div>
<script type="text/javascript">
// ————————————————-
// XML読み込み
// ————————————————-
function xmlLoad(xmlurl){
  $.ajax({
    url:xmlurl,
    type:'get',
    dataType:'xml',
    timeout:1000,
    success:parse_xml
  });
}

// ————————————————-
// XMLデータを取得
// ————————————————-
function parse_xml(xml,status){
  if(status!='success')return;
  $(xml).find('item').each(disp);
}

// ————————————————-
// HTML生成関数
// ————————————————-
function disp(){

  //各要素を変数に格納
  var $title = $(this).find('title').text();
  var $link = $(this).find('link').text();

  //HTMLを生成
  $('<div class="sidebody"><a href="'+$link+'">'+$title+'</a></div>').appendTo('#article_list');
}

// ————————————————-
//関数実行
// ————————————————-
$(function(){
  //トップページ
  if(ld_blog_vars.current_page.type=="index"){
    $('<div class="sidetitlebody"><div class="sidetitle">最新記事</div></div>').appendTo('#article_list');
    xmlLoad(ld_blog_vars.url+'index.rdf');

  //個別記事
  }else if(ld_blog_vars.current_page.type=="article"){
    $('<div class="sidetitlebody"><div class="sidetitle">最新記事 ('+ld_blog_vars.articles[0].categories[0].name+')</div></div>').appendTo('#article_list');
    xmlLoad(ld_blog_vars.url+'archives/cat_'+ld_blog_vars.articles[0].categories[0].id+'.xml');

  //カテゴリアーカイブ
  }else if(ld_blog_vars.current_page.type=="category"){
    $('<div class="sidetitlebody"><div class="sidetitle">最新記事 ('+ld_blog_vars.current_page.name+')</div></div>').appendTo('#article_list');
    xmlLoad(ld_blog_vars.url+'archives/cat_'+ld_blog_vars.current_page.category+'.xml');
  }
});
</script>

参考資料: 独学Webデザイナーの覚書

おすすめ記事

分数の計算機ツール。分数のかけ算・割り算・足し算・引き算を簡単に。

素数判定プログラム。素数を見分けるためのフローチャートも紹介。

素因数分解の簡単計算アプリ!ツールなしで算出するやり方も解説。

最小公倍数の計算アプリ。手計算する場合の簡単な求め方も紹介。

最大公約数の計算機。サイト上で瞬時に計算!簡単な求め方も解説。

フランス語のアルファベットの簡単キーボード。一覧から文字を入力。

スペイン語のアルファベット入力キーボード。変換不要!一覧から文字を選択

ロシア語のアルファベット入力キーボード。変換不要!一覧から文字を選択

累乗・べき乗の計算機。指数が分数・小数・マイナスでもOK!

正三角形の面積・高さ・辺の長さの計算機。公式を使った求め方も紹介。

円の面積・直径・半径・円周の計算機。公式を使った求め方も紹介。

トルコ語のアルファベットの入力ツール。トルコ文字の簡単キーボード。

ギリシャ文字への変換を簡単に!見た目と読み方の一覧からギリシャ語を入力。

ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】

平方根(ルート)の値を求める計算機。分数もOKな電卓サイト。

分数の計算機ツール。分数のかけ算・割り算・足し算・引き算を簡単に。

分数同士の計算をサイト上で簡単に行える、電卓アプリです。かけ算・割り算・足し算・引き算、どの計算方法にも対応しています。このツール…

素数判定プログラム。素数を見分けるためのフローチャートも紹介。

この素数チェッカーは、指定した整数が素数かどうかを簡単に判定できるアプリです。もし素数でない場合は、その整数の素因数を一覧表示しま…

素因数分解の簡単計算アプリ!ツールなしで算出するやり方も解説。

素因数分解をサイト上で簡単に行える、計算機アプリです。入力は15桁以下に抑えるのがおすすめです。入力した数字が大きいと、計算にかな…

最小公倍数の計算アプリ。手計算する場合の簡単な求め方も紹介。

最小公倍数を求めるための計算機アプリです。整数は、3つ以上入力することも可能です。入力する際には、それぞれの整数を空白や改行で区切…

最大公約数の計算機。サイト上で瞬時に計算!簡単な求め方も解説。

最大公約数を求めるための計算機アプリです。整数は、3つ以上入力することも可能です。入力する際には、それぞれの整数を空白や改行で区切…

フランス語のアルファベットの簡単キーボード。一覧から文字を入力。

フランス語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。アクセント記…

スペイン語のアルファベット入力キーボード。変換不要!一覧から文字を選択

スペイン語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。逆疑問符や逆…

ロシア語のアルファベット入力キーボード。変換不要!一覧から文字を選択

ロシア語のアルファベットを簡単に入力するためのオンラインアプリです。一覧表から文字を選択するだけなので、変換は不要。打ち方が分から…

累乗・べき乗の計算機。指数が分数・小数・マイナスでもOK!

累乗とべき乗(冪乗)を簡単に計算する電卓です。数aのn乗、anを算出します。二乗や三乗を計算するときなどに便利です。なお、この計算…

正三角形の面積・高さ・辺の長さの計算機。公式を使った求め方も紹介。

正三角形の面積・高さ・辺の長さを計算するツールです。

円の面積・直径・半径・円周の計算機。公式を使った求め方も紹介。

円の面積と円周の長さを計算するツールです。

トルコ語のアルファベットの入力ツール。トルコ文字の簡単キーボード。

トルコ語のアルファベットを入力するためのオンラインツールです。使い方は簡単で、トルコの文字を一覧から選択するだけでOK。キーボード…

ギリシャ文字への変換を簡単に!見た目と読み方の一覧からギリシャ語を入力。

ギリシャ文字を手軽に入力するためのオンラインツールです。入力したいギリシャ文字を一覧から選ぶだけなので、超簡単。キーボードで文字を…

ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】

ページ内リンクのジャンプ先がずれてしまう原因と、その解決策について解説します。別ページの特定の場所にリンクを貼る場合には、ハッシュ…

平方根(ルート)の値を求める計算機。分数もOKな電卓サイト。

平方根(ルート)の計算機は、平方根の値をサイト上でカンタンに計算できる電卓です。整数だけでなく、小数や分数の平方根にも対応している…