● 内容
① 私のブログのヘッダー下に設置している画像一覧を見れる
ナビゲーションです。
② 少し問題があって、年がうまく表示されません。
２０１３年の投稿画像がない場合、２０１２年になってしまう。
直す予定です。
● やり方
① フリープラグインへ下記を追加する
<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'>
piclist_set();
</script>
● 説明
・ 下記はフリープラグインに１つあれば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>
② 下記をCSSの一番下に追加する
/* ----------------------------------------------------------- */
/* 画像一覧の年月一覧（横型） */
/* ----------------------------------------------------------- */
.pic_navi_area{ /* ● 画像一覧(年月)全体 */
height:50px; /* 高さ */
border:1px solid transparent; /* 枠（ダミー） */
width:880px; /* 幅 */
margin-top:55px;
margin-left:40px;
}
ul#navMonth{ /* ● 画像一覧(年月)中身 */
display:none; /* 最初は表示させない */
height:35px; /* 高さ */
background-color:#aaaaaa; /* 背景色 */
border-radius:6px; /* CSS3角丸 */
}
ul#navMonth li{ /* ● 画像一覧月 */
float:left; /* 横に並べる */
display: block; /* ブロック化 */
list-style-type: none; /* リストスタイルなし */
width:40px; /* 月の幅 */
margin-left:15px; /* 左余白（外） */
text-align:center; /* 中央寄せ */
background-color:#aaaaaa; /* 背景色 */
}
.actvMonth a{ /* ● 画像一覧月(リンク) */
background-color:#000000; /* 背景色 */
color:#ffffff; /* 文字色 */
display: block; /* ブロック化 */
margin-top:10px; /* 上余白（外） */
overflow:hidden; /* オーバーフロー部分非表示 */
outline:none; /* クリック時に点線を表示させない */
border-radius:6px; /* CSS3角丸 */
}
.offMonth{ /* ● 画像一覧月(リンクなし) */
background-color:#aaaaaa !important; /* 背景色 */
color:#000000; /* 文字色 */
display: block; /* ブロック化 */
margin-top:10px; /* 上余白（外） */
}
#nowYear{ /* ● 年（現在の表示部分） */
background-color:#bbbbbb !important; /* 背景色 */
color:#000000; /* 文字色 */
display: block; /* ブロック化 */
margin-top:10px; /* 上余白（外） */
border-radius:6px; /* CSS3角丸 */
}
#prevYear{ /* ● 年 （次） */
margin-top:5px; /* 上余白（外） */
overflow:hidden; /* オーバーフロー部分非表示 */
outline:none; /* クリック時に点線を表示させない */
}
#nextYear{ /* ● 年 （前） */
margin-top:5px; /* 上余白（外） */
overflow:hidden; /* オーバーフロー部分非表示 */
outline:none; /* クリック時に点線を表示させない */
}
/* ----------------------------------------------------------- */
.skinContentsArea{
margin-top:0px;
}
/* ------------------------------ */
/* Next Prev の画像を変えたい場合 */
/* ------------------------------ */
#prevYear a{ /* ● 年 （次） */
background-image:url(http://stat001.ameba.jp/user_images/20121027/22/new-blue-777/c0/00/g/o0019001912257550074.gif);
background-repeat:no-repeat;
width:19px; /* 画像の幅 */
height:19px; /* 画像の高さ */
display:block; /* ブロック化 */
margin-top:4px; /* 上の余白 */
}
#nextYear a{ /* ● 年 （前） */
background-image:url(http://stat001.ameba.jp/user_images/20121027/22/new-blue-777/50/00/g/o0019001912257550073.gif);
background-repeat:no-repeat;
width:19px; /* 画像の幅 */
height:19px; /* 画像の高さ */
display:block; /* ブロック化 */
margin-top:4px; /* 上の余白 */
}
.skinFrame2{
position:relative;
width:980px;
margin:auto;
}
● piclist_set(); の関数の内容
function piclist_prev_set(){ // ● Prev のセット
if($('li#prevYear a').length!=0){
var prev_url=$('li#prevYear a').attr("href");
var Year_Month_prev=prev_url.substring(prev_url.length-11,prev_url.length-5);
$('li#prevYear a').attr('href','java'+'script:void(0)').click(function(){piclist_set(Year_Month_prev);});
piclist_img_set();
}}
function piclist_next_set(){ // ● Next のセット
if($('li#nextYear a').length!=0){
var next_url=$('li#nextYear a').attr("href");
var Year_Month_next=next_url.substring(next_url.length-11,next_url.length-5);
$('li#nextYear a').attr('href','java'+'script:void(0)').click(function(){piclist_set(Year_Month_next);});
piclist_img_set();
}}
function piclist_set(Year_Month){ // ● セット
$('ul#navMonth').remove(); // 削除
var AmebaID=ameba_id_get(); // アメーバIDを求める
var pic_url='http://ameblo.jp/'+AmebaID+'/imagelist-'+Year_Month+'.html'; // ＵＲＬ作成
var pic_data=$.ajax({url: pic_url, async: false}).responseText; // ＵＲＬの読み込み
var pic_navi=$("#navMonth",pic_data); // navMonth 部分を取り出す
$(function(){
$('.pic_navi_area').append(pic_navi); // 指定箇所に navMonth 部分を追加する
});
$('.actvMonth a').attr("target","_blank"); // target="_blank" の設定
piclist_prev_set(); // prev set
piclist_next_set(); // next set
$('#navMonth').fadeIn(3000);
}
function piclist_img_set(){
if($('li#nextYear a').length!=0){
$('li#nextYear a').find("img").attr("src","").removeAttr("width").removeAttr("height");
}
if($('li#prevYear a').length!=0){
$('li#prevYear a').find("img").attr("src","").removeAttr("width").removeAttr("height");
}
}
function piclist_set(){
$(function(){ // ● 初期処理
var AmebaID=ameba_id_get(); // アメーバＩＤを取得
var piclist_selector='.skinContentsArea';
var pic_url='http://ameblo.jp/'+AmebaID+'/imagelist.html'; // ＵＲＬ作成
var pic_data=$.ajax({url: pic_url, async: false}).responseText; // ＵＲＬの読み込み
var pic_navi=$("#navMonth",pic_data); // navMonth 部分を取り出す
$(piclist_selector).before(pic_navi); // 指定箇所に navMonth 部分を追加する
$('.actvMonth a').attr("target","_blank"); // target="_blank" の設定
piclist_prev_set(); // prev set
$('#navMonth').wrap("<div class='pic_navi_area'></div>"); // 全体を囲む
$('ul#navMonth').fadeIn(3000);
});
}