記事のページナビの表示制御 | リアナのカスタマイズ日記(CSS編集用デザイン)

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

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




この記事の内容は少し、おかしい様なので、直します。




★ 記事のページナビの表示制御


2013年7月21日現在、記事下のページナビ部分に修正が
入ったようなので、ページナビを画像にしている方は下記を参照
してください。

http://ameblo.jp/new-blue-777/entry-11577369459.html


● ページナビは、記事と各一覧(記事一覧など)に表示されています。

  また、記事では、記事上と記事下の2箇所表示されます。

  コメントを表示した場合には、記事上と記事下と
  コメント上、コメント下の4箇所に表示されます。


★ 以下の画像は、次ページ 記事一覧 次ページとなってしまっていますが、
前ページ 記事一覧 次ページ の間違えです。了承願います。

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











● 条件


 ① 下記をフリープラグインの先頭に、入れておく必要があります
   1つ先頭に入れてあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>


 ② 各一覧(記事一覧など)は、この記事では対象外です。

 ③ 全体の右下にあるページナビは、この記事では対象外です。











◆ 全て表示したくない場合


× 記事上
× 記事下(ブログホーム)
× 記事下(記事個別)
× コメント上
× コメント下

   凡例:○・・・表示 ×・・・非表示



① CSSへ下記を追記。

/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除       */
/* ------------------------------------------------------- */
.skinMainArea .pagingArea{
display:none;
}
/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除(個別記事)  */
/* ------------------------------------------------------- */
.skinMainArea .entryPaging{
display:none;
}
.skinMainArea .detailPaging{
display:none;
}










◆ 記事上のみ表示したい場合



○ 記事上
× 記事下(ブログホーム)
× 記事下(記事個別)
× コメント上
× コメント下

   凡例:○・・・表示 ×・・・非表示




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






① CSSへ下記を追記。

/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除       */
/* ------------------------------------------------------- */
.skinMainArea .pagingArea{
display:none;
}
/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除(個別記事)  */
/* ------------------------------------------------------- */
.skinMainArea .entryPaging{
display:none;
}
.skinMainArea .detailPaging{
display:none;
}


② フリープラグインへ下記を追記。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".skinMainArea .pagingArea:eq(1)").remove();
$(".skinMainArea .detailPaging:eq(1)").remove();
$(".skinMainArea .detailPaging:eq(1)").remove();
$(".skinMainArea .pagingArea").css("display","block");
});
</script>















◆ 記事下のみ表示したい場合



× 記事上
○ 記事下(ブログホーム)
○ 記事下(記事個別)
× コメント上
× コメント下

   凡例:○・・・表示 ×・・・非表示



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



① CSSへ下記を追記。

/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除       */
/* ------------------------------------------------------- */
.skinMainArea .pagingArea{
display:none;
}
/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除(個別記事)  */
/* ------------------------------------------------------- */
.skinMainArea .entryPaging{
display:none;
}
.skinMainArea .detailPaging{
display:none;
}


② フリープラグインへ下記を追記。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".skinMainArea .pagingArea:eq(0)").remove();
$(".skinMainArea .detailPaging:eq(0)").remove();
$(".skinMainArea .detailPaging:eq(0)").remove();
$(".skinMainArea .pagingArea").css("display","block");
});
</script>









◆ 記事下のみ表示したい場合で記事個別はコメント下のみ表示




× 記事上
○ 記事下(ブログホーム)
× 記事下(記事個別)
× コメント上
○ コメント下

   凡例:○・・・表示 ×・・・非表示





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

① CSSへ下記を追記。

/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除       */
/* ------------------------------------------------------- */
.skinMainArea .pagingArea{
display:none;
}
/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除(個別記事)  */
/* ------------------------------------------------------- */
.skinMainArea .entryPaging{
display:none;
}
.skinMainArea .detailPaging{
display:none;
}




② フリープラグインへ下記を追記。



<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".skinMainArea .pagingArea:eq(0)").remove();
$(".skinMainArea .entryPaging:eq(0)").remove();
$(".skinMainArea .detailPaging:eq(0)").remove();
$(".skinMainArea .pagingArea").css("display","block");
});
</script>








◆ 記事下のみ表示したい場合で記事個別はコメント上のみを表示


× 記事上
○ 記事下(ブログホーム)
× 記事下(記事個別)
○ コメント上
× コメント下

   凡例:○・・・表示 ×・・・非表示



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


① CSSへ下記を追記。

/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除       */
/* ------------------------------------------------------- */
.skinMainArea .pagingArea{
display:none;
}
/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除(個別記事)  */
/* ------------------------------------------------------- */
.skinMainArea .entryPaging{
display:none;
}
.skinMainArea .detailPaging{
display:none;
}




② フリープラグインへ下記を追記。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".skinMainArea .pagingArea:eq(0)").remove();
$(".skinMainArea .entryPaging:eq(0)").remove();
$(".skinMainArea .detailPaging:eq(1)").remove();
$(".skinMainArea .pagingArea").css("display","block");
});
</script>
















◆ 記事下とコメント上下のみ表示したい場合



× 記事上
○ 記事下(ブログホーム)
○ 記事下(記事個別)
○ コメント上
○ コメント下

   凡例:○・・・表示 ×・・・非表示




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




① CSSへ下記を追記。

/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除       */
/* ------------------------------------------------------- */
.skinMainArea .pagingArea{
display:none;
}
/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除(個別記事)  */
/* ------------------------------------------------------- */
.skinMainArea .entryPaging{
display:none;
}
.skinMainArea .detailPaging{
display:none;
}


② フリープラグインへ下記を追記。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".skinMainArea .pagingArea:eq(0)").remove();
$(".skinMainArea .pagingArea").css("display","block");
});
</script>












◆ 記事上とコメント上下のみ表示したい場合



○ 記事上
× 記事下(ブログホーム)
× 記事下(記事個別)
○ コメント上
○ コメント下

   凡例:○・・・表示 ×・・・非表示





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




① CSSへ下記を追記。

/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除       */
/* ------------------------------------------------------- */
.skinMainArea .pagingArea{
display:none;
}
/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除(個別記事)  */
/* ------------------------------------------------------- */
.skinMainArea .entryPaging{
display:none;
}
.skinMainArea .detailPaging{
display:none;
}


② フリープラグインへ下記を追記。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".skinMainArea .pagingArea:eq(1)").remove();
$(".skinMainArea .entryPaging:eq(0)").remove();
$(".skinMainArea .pagingArea").css("display","block");
});
</script>












◆ コメント上下のみ表示したい場合



× 記事上
× 記事下(ブログホーム)
× 記事下(記事個別)
○ コメント上
○ コメント下

   凡例:○・・・表示 ×・・・非表示





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




① CSSへ下記を追記。

/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除       */
/* ------------------------------------------------------- */
.skinMainArea .pagingArea{
display:none;
}
/* ------------------------------------------------------- */
/* 記事上・記事下・コメントのページナビの削除(個別記事)  */
/* ------------------------------------------------------- */
.skinMainArea .entryPaging{
display:none;
}
.skinMainArea .detailPaging{
display:none;
}


② フリープラグインへ下記を追記。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".skinMainArea .pagingArea:eq(0)").remove();
$(".skinMainArea .pagingArea:eq(0)").remove();
$(".skinMainArea .pagingArea").css("display","block");
});
</script>







● 参考(ケース)


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