★ 最近の画像つき記事の位置を調整
● 最近の画像つき記事はブログホームの最初の記事に表示されるものです。
また、ブログホームから 次のページをクリックした場合も、
そのページの先頭記事に表示されます。
ブログホームの最近の画像つき記事の画像と
ブログホームから 次のページをクリックした場合の
最近の画像つき記事の画像は異なりますので注意すること。
◆ 絶対配置による指定方法
① 最近の画像つき記事を好きな場所に絶対配置したい場合は、
下記をＣＳＳへ追記する。
.articleImageListArea{/* 最近の画像つき記事 */
position:absolute;
top:300px;/* 上からの位置 */
left:-200px;/* 左からの位置 */
z-index:100;/* 重なりの優先度 */
}
position:absolute;
top:300px;/* 上からの位置 */
left:-200px;/* 左からの位置 */
z-index:100;/* 重なりの優先度 */
}
② 最近の画像つき記事を好きな場所に絶対配置したいで、
縦に表示したい場合は、下記をＣＳＳへ追記する。
.articleImageListArea{/* 最近の画像つき記事 */
position:absolute;
top:300px;/* 上からの位置 */
left:-200px;/* 左からの位置 */
z-index:100;/* 重なりの優先度 */
width:200px;/* 幅 */
}
position:absolute;
top:300px;/* 上からの位置 */
left:-200px;/* 左からの位置 */
z-index:100;/* 重なりの優先度 */
width:200px;/* 幅 */
}
③ 最近の画像つき記事を好きな場所に固定で絶対配置したい場合は、
下記をＣＳＳへ追記する。
.articleImageListArea{/* 最近の画像つき記事 */
position:fixed;/* 位置固定の絶対配置 */
top:300px;/* 上からの位置 */
left:100px;/* 左からの位置 */
z-index:100;/* 重なりの優先度 */
}
position:fixed;/* 位置固定の絶対配置 */
top:300px;/* 上からの位置 */
left:100px;/* 左からの位置 */
z-index:100;/* 重なりの優先度 */
}
④ 最近の画像つき記事を好きな場所に絶対配置したいで、
縦に表示したい場合は、下記をＣＳＳへ追記する。
.articleImageListArea{/* 最近の画像つき記事 */
position:fixed;/* 位置固定の絶対配置 */
top:300px;/* 上からの位置 */
left:100px;/* 左からの位置 */
z-index:100;/* 重なりの優先度 */
width:200px;/* 幅 */
}
position:fixed;/* 位置固定の絶対配置 */
top:300px;/* 上からの位置 */
left:100px;/* 左からの位置 */
z-index:100;/* 重なりの優先度 */
width:200px;/* 幅 */
}
● ①、②の場合は、下記ＣＳＳがＣＳＳの中に入っていること。
/* ------------------------------------------------------- */
/* 絶対配置起点を設定 画面の大きさを変えて同じ位置に */
/* ------------------------------------------------------- */
.skinFrame2{
width:980px;/* コンテンツ幅を設定 */
margin:auto;/* 自動中央寄せ */
position:relative;/* 起点指定 */
}
/* 絶対配置起点を設定 画面の大きさを変えて同じ位置に */
/* ------------------------------------------------------- */
.skinFrame2{
width:980px;/* コンテンツ幅を設定 */
margin:auto;/* 自動中央寄せ */
position:relative;/* 起点指定 */
}
◆ 最近の画像つき記事をメッセージボードに入れたい場合。
① メッセージボードに下記を入れる（ＨＴＭＬモードで入れること）
ＨＴＭＬモードの状態で、公開ボタンをクリックしてください。
<span id="messageImageList1"></span>
② 下記をフリープラグインへ入れる
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
if(($("#messageImageList1").length!=0) && ($(".skinMessageBoard").length!=0)){
$(".articleImageListArea").appendTo("#messageImageList1");
}
})
</script>
<script type='text/javascript'>
$(document).ready(function(){
if(($("#messageImageList1").length!=0) && ($(".skinMessageBoard").length!=0)){
$(".articleImageListArea").appendTo("#messageImageList1");
}
})
</script>
● 処理説明
・ 下記は、フリープラグインの最初に１つあればＯＫです。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
◆ 最近の画像つき記事をメッセージボードに入れたい場合。
(次のページの最近の画像つき記事も入れる）
実例：私のブログのメッセージボード上部に入れてあります。
注意：次のページを読み込んでいるため、時間がかかります。
また、ページビュー(PV)のアクセス数が増える可能性があります。
最近の画像つき記事の画像拡大表示 のプラグインを使っている場合は
最近の画像つき記事の画像拡大表示のスクリプトの実行を遅らせる
必要があります。（※１）
① メッセージボードに下記を入れる（ＨＴＭＬモードで入れること）
ＨＴＭＬモードの状態で、公開ボタンをクリックしてください。
<span id="messageImageList1"></span><span id="messageImageList2"></span>
② 下記をフリープラグインへ入れる
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(document).ready(function(){
if(($("#messageImageList1").length!=0) && ($(".skinMessageBoard").length!=0)){
$(".articleImageListArea").appendTo("#messageImageList1");
if($("#messageImageList2").length!=0){
var Ameba_ID;
if(location.pathname.indexOf("/",1)==-1){
Ameba_ID = location.pathname.substring(1,location.pathname.length);
}else{
Ameba_ID = location.pathname.substring(1,location.pathname.indexOf("/",1));
}
var page2_url="http://ameblo.jp/"+Ameba_ID+"/page-2.html";
var page2_dataw=$.ajax({url: page2_url, async: false}).responseText;
var page2_data=$(".articleImageListArea", page2_dataw);
$(page2_data).appendTo("#messageImageList2");
}
}
});
</script>
<script type="text/javascript">
$(document).ready(function(){
if(($("#messageImageList1").length!=0) && ($(".skinMessageBoard").length!=0)){
$(".articleImageListArea").appendTo("#messageImageList1");
if($("#messageImageList2").length!=0){
var Ameba_ID;
if(location.pathname.indexOf("/",1)==-1){
Ameba_ID = location.pathname.substring(1,location.pathname.length);
}else{
Ameba_ID = location.pathname.substring(1,location.pathname.indexOf("/",1));
}
var page2_url="http://ameblo.jp/"+Ameba_ID+"/page-2.html";
var page2_dataw=$.ajax({url: page2_url, async: false}).responseText;
var page2_data=$(".articleImageListArea", page2_dataw);
$(page2_data).appendTo("#messageImageList2");
}
}
});
</script>
● 処理説明
・ 下記は、フリープラグインの最初に１つあればＯＫです。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
③ 最近の画像つき記事[画像一覧へ]の非表示は下記をＣＳＳへ追記する。
#messageImageList1 .articleImageHeading{/* 最近の画像つき記事１行目 */
display:none;/* 非表示 */
}
#messageImageList1 .articleImageListLink{/* 画像一覧へ１行目 */
display:none;/* 非表示 */
}
#messageImageList2 .articleImageHeading{/* 最近の画像つき記事２行目 */
display:none;/* 非表示 */
}
#messageImageList2 .articleImageListLink{/* 画像一覧へ２行目 */
display:none;/* 非表示 */
}
display:none;/* 非表示 */
}
#messageImageList1 .articleImageListLink{/* 画像一覧へ１行目 */
display:none;/* 非表示 */
}
#messageImageList2 .articleImageHeading{/* 最近の画像つき記事２行目 */
display:none;/* 非表示 */
}
#messageImageList2 .articleImageListLink{/* 画像一覧へ２行目 */
display:none;/* 非表示 */
}
※１ 下記の様に遅らせて、下記を、当記事のスクリプトの
下の位置に書く。
<script type='text/javascript'>
$(function(){
$(document).ready(function(){
var orign = "y" // ① オリジナル画像を使うときは y
var leftPx = -10; // ② 位置水平
var topPy = 30; // ② 位置垂直
var wpx = "300"; // ③ 拡大画像の横幅
$(".articleImageListArea img").hover(function(e){
var imgsrc = $(this).attr("src");
var imgsrcp = imgsrc.indexOf("/stat");
var imgsrcy = "http:/" + imgsrc.substring(imgsrcp, imgsrc.length);
if(orign=="y"){var imgsrcx = imgsrcy.substring(0, imgsrcy.length-33) + "o" + imgsrcy.substring(imgsrcy.length-23, imgsrcy.length);
}else{var imgsrcx = imgsrcy;}
$('body').append( '<p class="ibox1" style="display:none;position:absolute;left: 0px;top:0px;border:none;"><img width="' + wpx + '" src="' + imgsrcx + '"></p>' );
var lPos = (e.pageX + leftPx);
var tPos = (e.pageY + topPy);
$('p.ibox1').css("top", tPos + "px");
$('p.ibox1').css("left", lPos + "px");
$('p.ibox1').css("border", "15px solid #cccccc"); // ④ 枠
$("p.ibox1").fadeIn(700);
},function(e){
$("p.ibox1").fadeOut(700);
$("p.ibox1").remove();
})})})
</script>
$(function(){
$(document).ready(function(){
var orign = "y" // ① オリジナル画像を使うときは y
var leftPx = -10; // ② 位置水平
var topPy = 30; // ② 位置垂直
var wpx = "300"; // ③ 拡大画像の横幅
$(".articleImageListArea img").hover(function(e){
var imgsrc = $(this).attr("src");
var imgsrcp = imgsrc.indexOf("/stat");
var imgsrcy = "http:/" + imgsrc.substring(imgsrcp, imgsrc.length);
if(orign=="y"){var imgsrcx = imgsrcy.substring(0, imgsrcy.length-33) + "o" + imgsrcy.substring(imgsrcy.length-23, imgsrcy.length);
}else{var imgsrcx = imgsrcy;}
$('body').append( '<p class="ibox1" style="display:none;position:absolute;left: 0px;top:0px;border:none;"><img width="' + wpx + '" src="' + imgsrcx + '"></p>' );
var lPos = (e.pageX + leftPx);
var tPos = (e.pageY + topPy);
$('p.ibox1').css("top", tPos + "px");
$('p.ibox1').css("left", lPos + "px");
$('p.ibox1').css("border", "15px solid #cccccc"); // ④ 枠
$("p.ibox1").fadeIn(700);
},function(e){
$("p.ibox1").fadeOut(700);
$("p.ibox1").remove();
})})})
</script>