《Ameba》ブログで「続きを読む」（Read More）・画像ブログ用
（[5/14,23:00]記事を大幅書き換え）《アメーバ》ブログで、「続きを読む（Read More）機能が、無くなって久しいのですけれども。zzさんが〈br /〉タグが２つあったら、その下を隠して「続きを読む」を入れる、というスクリプトを記事にしていらっしゃいます^^。文章系ブログならzzさんのスクリプトそのままが便利で読みやすいと思うのですが、「続き」に大きな画像を貼る場合は、「続き」が閲覧画面一番上まで上がるのもいいかな？と思いました。
こんな感じですねー^^。
私はとことん不器用でありまして。画像大き目のブログを見ているとすぐ、スクロール行き過ぎちゃったり↓
戻したらまた行き過ぎちゃったり↓
するんです（私だけ？^^;）
大きな画像（写真でもイラストでも）をわざわざブログに貼るほど、その画像に「こだわり」がある方は、やっぱり、きちんと隅から隅まで視界に納めて欲しいと思っていらっしゃるんじゃないか、と思うのです。↓
いったん書いたものは「閉じたときに不具合が出る」状態でした^^;
zzさんがご指摘の上、さらに訂正版を書いてくださいました。
フリープラグインに下記▼と▲の間のソースを貼ると、使えます。IE8,Fx,GoogleChrome,safari確認。Operaは、zzさんの原作が非対応とのこと。
スクリプトがオフの場合は、ReadMore機能はつかず、普通に閲覧できます。
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
<a href="http://group.ameba.jp/thread/detail/fti5_ORJnN5U/--285LmOy-jTKWPqqyPLBv/" title="以下はzz氏作のｊQuery">★</a>
<style type="text/css">
/*■続きを読む*/
.pagem{
padding:0 0 0 0 ;
line-height:1em;
}
.pagem div{
border:1px solid #999;
width:80px;
padding:1px;
margin-bottom:30px;
}
.pagem div a{display:block;
border:1px solid #eee;
padding:3px;
text-align:center;
}
.pictop{height:30px;}
.entry .contents {
overflow: hidden;
}
</style>
<script type="text/javascript">
$(function(){
if($('#recent_comment .menu_frame').children().size()==0){
$('#recent_comment').hide();
}
});
$(function(){
$('.entry .date').each(function(){
if($(this).text().match(/1901-01/)){
$(this).hide();
}
});});
$(function(){
if(!$.browser.opera){
$('.entry .contents').each(function(n){
n = n+1;
rstr = '<br><div class="pagem"><div class="pmtext"><a href="#a' + n + '">続きを読む</a></div></div><p class="pictop" id="a' + n +'"> </p>'
pagemore=$(this).html().replace(/<br><br>|<br>\s<br>/i,rstr);
$(this).html(pagemore);
var high=$('.pagem',this).offset().top-$(this).offset().top+$('.pagem',this).outerHeight();
$(this).height(high);
});
$('.pagem div a').click(function(){
if($(this).parents('.contents').attr('style')){
$(this).parents('.contents').removeAttr('style');
}else{
var high2=$(this).parents('.pagem').offset().top-$(this).parents('.contents').offset().top+$(this).parents('.pagem').outerHeight();
$(this).parents('.contents').height(high2);
return false;
}
});
}
});
</script>
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
zzさん、どうもありがとうございましたm(_ _)m