【アメブロ用】最新の記事一覧に記事内の画像を表示するjQuery

アメブロの最新記事の一覧に記事内の画像を表示してみました。
コードもそんなに長くないので、今回はplugin化せずに、そのままコードを公開します。
ajaxで取得してきているのでそんなに動作は重くないと思います。

CSS編集用デザインを使っている人向けです。
それ以外のデザインを使っていて、需要があればjQuery plugin化して配布しようかな。

使用方法

まずは、【サイドバーの配置】で【最新の記事一覧】が配置されている必要があります。

確認したら、次は早速コードを記述していきます。

フリープラグインに以下を記述

CSS編集用デザインを使っている人は下記のままでOK

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>

<script type="text/javascript">
(function($){
var JQ17 = $;
JQ17(function(){window.$=window.jQuery=JQ17;});
}(jQuery));
</script>

↑これを既に記述してあれば、これは不要です。

<script>
(function($){
$(function(){
$(".recentEntriesMenu li a").each(function(i){
var url = $(this).attr("href");
var title = $(this).text();
// $(".recentEntriesMenu li").eq(i).addClass("test"+i);
$(".recentEntriesMenu li a").eq(i).addClass("entry_url");
$.ajax({
type: 'GET',
url: url,
success: function(data) {
var obj = $(data).find(".articleText"),obj_data = $(data).find(".articleText").html();
if ($(data).find(".articleText img").length){
var img = $(data).find(".articleText img").first(),img_src = $(img).attr('src');
if(img_src.match(/(\.)(jpeg|jpg|png)/g)){
$(".recentEntriesMenu li").eq(i).prepend("<a href="+ url +" title="+ title +" class='entry_img'><img src="+ img_src +" alt="+ title +" width='80' height='60'></a>");
}
}

else{
var img_src = "http://stat.ameba.jp/user_images/20120716/22/amebloger-s/91/79/p/o0290019012082983372.png";
$(".recentEntriesMenu li").eq(i).prepend("<a href="+ url +" title="+ title +" class='entry_img'><img src="+ img_src +" alt="+ title +" width='80' height='60'></a>");
}


},error : function(){
}
});

});
});
})(jQuery);
</script>

CSSの記述

scriptを実行させただけでは、デザインがアレなので、CSSでデザインをしていきます。
下記の例はこのブログで使用しているものです。

.recentEntriesMenu li{
margin:5px 0;
padding:5px;
}

.recentEntriesMenu li:hover{
background:#e4e4e4;
animation:color 1s ease-in-out;
-moz-animation:color 1s ease-in-out;
-webkit-animation:color 1s ease-in-out;
}

@keyframes color{
0%{background-color:#ffffff;}
100%{background-color:#e4e4e4;}
}

@-webkit-keyframes color{
0%{background-color:#ffffff;}
100%{background-color:#e4e4e4;}
}

@-moz-keyframes color{
0%{background-color:#ffffff;}
100%{background-color:#e4e4e4;}
}

.entry_img{
border:5px solid #666;
float:left;
height:60px;
margin:0 10px 0 0 ;
transition:border-color 1s ease-in-out;
-moz-transition:border-color 1s ease-in-out;
-webkit-transition:border-color 1s ease-in-out;
}

.entry_img:hover{
border-color:#f1f1f1;
}

.entry_url{
float:left;
width:150px;
margin:5px 0 0 0;
}

カスタマイズ方法

■画像のサイズを変えたい場合
コード内の17行目あたりと23行目あたりの、widthとheightで変更可能。
・CSSで変更したい場合
.entry_img img{
width:;
height:;
}

■画像が存在しない場合のno imageの指定方法
コード内の22行目
var img_src = "ht～略～.png";
↑を自分が使いたいno imageのURLに変更すればOK。

■デザインのカスタマイズ
追加class
.entry_img
.entry_url
これらを追加しているのでCSS編集で色々と弄ってみてください。

書いてて思ったんですが、plugin化した方が、紹介記事が書きやすい。
需要があればjQuery plugin化するかな～。


■8/20追記

コメントのリクエストで書きます。

最新の記事一覧を画像リンクだけにする場合

殆ど元のコードと変わりませんが、コピペで簡単に使えるように書いておきました。

(function($){
$(function(){
var entry_obj = $(".recentEntriesMenu li a");
entry_obj.each(function(i){
var url = $(this).attr("href");
var title = $(this).text();
// $(".recentEntriesMenu li").eq(i).addClass("test"+i);
$(entry_obj).eq(i).addClass("entry_url");
$.ajax({
type: 'GET',
url: url,
success: function(data) {
var obj = $(data).find(".articleText"),obj_data = $(data).find(".articleText").html();
if ($(data).find(".articleText img").length){
var img = $(data).find(".articleText img").first(),img_src = $(img).attr('src');
if(img_src.match(/(\.)(jpeg|jpg|png)/g)){
$(".recentEntriesMenu li").eq(i).html("<a href="+ url +" title="+ title +" class='entry_img'><img src="+ img_src +" alt="+ title +" width='80' height='60'></a>");
}
}

else{
var img_src = "http://stat.ameba.jp/user_images/20120716/22/amebloger-s/91/79/p/o0290019012082983372.png";
$(".recentEntriesMenu li").eq(i).html("<a href="+ url +" title="+ title +" class='entry_img'><img src="+ img_src +" alt="+ title +" width='80' height='60'></a>");
}


},error : function(){
}
});

});
});
})(jQuery);

はい、prependの所をhtmlに変えただけです(∀｀*ゞ)ﾃﾍｯ
画像の表示サイズはwidth,height部分で調整してください。

＞＞画像を囲んである枠やカーソルを乗せると、半透明？になるという効果を除いた

恐らくフェードアニメーションの事だと思います。
これはCSS3でやっているので、CSSを書かなければOKです。
こちらの画像だけの表示の場合であれば、CSSの記述は多分必要無いはずです。

■8/20追記その２

またまたコメントを貰ったのでその返信と対策です。
この記事の冒頭でも書いていますが、一番最初の方で紹介しているコードは【CSS編集用】のスキン向けです。

まあCSS編集用といっても、HTML５になる前のモノと、現在のこのブログのモノ2つあったりもするんですが・・・(；´Д｀)

とりあえずGAYAさん用のコードは下記になります。
亜メンバー限定記事もあったので、それにも対応してみました。

(function($){
$(document).ready(function(){
var entry_obj = $(".recentEntriesMenu li a");
entry_obj.each(function(i){
var url = $(this).attr("href");
var title = $(this).text();
// $(".recentEntriesMenu li").eq(i).addClass("test"+i);
$(entry_obj).eq(i).addClass("entry_url");
$.ajax({
type: 'GET',
url: url,
success: function(data) {
var obj = $(data).find(".articleText"),obj_data = $(data).find(".articleText").html();
if ($(data).find(".articleText img").length){
var img = $(data).find(".articleText img").first(),img_src = $(img).attr('src');
if(img_src.match(/(\.)(jpeg|jpg|png)/g)){
$(".recentEntriesMenu li").eq(i).prepend("<a href="+ url +" title="+ title +" class='entry_img'><img src="+ img_src +" alt="+ title +" width='80' height='60'></a>");
}
else{
var img_src = "http://stat.ameba.jp/user_images/20120716/22/amebloger-s/91/79/p/o0290019012082983372.png";
$(".skinSubList li").eq(i).prepend("<a href="+ url +" title="+ title +" class='entry_img'><img src="+ img_src +" alt="+ title +" width='80' height='60'></a>");
}
}
else{
var img_src = "http://stat.ameba.jp/user_images/20120716/22/amebloger-s/91/79/p/o0290019012082983372.png";
$(".skinSubList li").eq(i).prepend("<a href="+ url +" title="+ title +" class='entry_img'><img src="+ img_src +" alt="+ title +" width='80' height='60'></a>");
}
},error : function(){
var img_src = "http://stat.ameba.jp/amember/img/pc/user/common/amember_pict.gif";
$(".skinSubList li").eq(i).prepend("<a href="+ url +" title="+ title +" class='entry_img'><img src="+ img_src +" alt="+ title +" width='80' height='60'></a>");
}
});

});
});
})(jQuery);

CSSは最初に紹介したのを使ってみてください。
CSS編集が出来ないスキンの場合は・・・
jQuery pluginとして作ります（；^ω^）