『JavaScript 続きを読む』

※11/25AM4：00前にコピーされた方・・・

　) の場所を間違っていました

　動作しない場合は再度やり直してください　m(_ _)m

みなさまありがとうございました

お一人お一人にお礼のコメント返しが出来なくて心苦しいのですが

ありがとうございました

実験中・・

コメントの質問に回答が出来なくてすみませんでした・・

申し訳ありませんが

ちょっと・・疲れちゃっていますので

回答はもう少しお待ち下さい　m(_ _)m

結局・・・

頭が痛くて眠れませんでしたので記事を書いていました・・・

さっさと寝ろって～んだよね・・・

で・・・・

とりあえず・・・

「続きを読む」を公開しちゃいます・・

見本サイト

やり方としては普通に記事を書いた後で・・

続きにしたいところに（隠したい初めの部分に）

<div class="more">　を入れます

そして・・　最後に　（別に記事の最後でなくてもかまいません・・）

</div> で閉じると

JavaScriptが有効になっている場合は

その間が隠れるようになっています

また・・自動で[続きを読む]ボタン？が表示されます

JavaScriptを使えない環境の場合は

最初から全部が表示されていて[続きを読む]ボタン？は現れません

フリープラグインにブログパーツがいっぱい入っていたり

フリープラグインの配置位置によって

文章が隠れるまでに時間がかかる場合もあります

いつものことですが・・携帯からは関係がありません

また・・すでに入っているブログパーツとかち合って動作しない場合もあります

Google Analytics の古いトラッキングコードが入っている場合は動作しませんでした
最新バージョンなら大丈夫です(でも・・別のが動作しなくなりましたので結局削除しました)

動作しない場合はブログパーツを１つ1つ外していって確認下さい

フリープラグインにこのまま貼り付けてください

（簡単なほうがいい方はコレを貼り付けないで記事下にある方法でも同じになります）

$(".more").css("display", "none")
.after("<p class='expand'>" + op + "</p>");
$(".expand").css("cursor", "pointer");

$(".expand").toggle(
function(){$(this).prev().show("slow"),$(this).html(cl);},
function(){$(this).prev().hide("slow"),$(this).html(op);}
);
});
// -->
</script>

赤字部分は自由に変更下さい

続きをよむ　>>　は　　続きを読む　>>　・・　つづきは　>> とか　続き　とか

<<　折りたたむ　は　　<<　折りたたむ　・・　隠す　なんかでもいいかも・・

var op = "続きをよむ<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/243.gif'>";
var cl = "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/244.gif'>折りたたむ";

このようにアイコン画像を使ってもおもしろいかも（　" と　" の中には　' と　' しか使えません）

フリープラグインの中でも一番最初に貼り付けたり

また・・フリープラグインは3カラムでしたら左サイドの上

2カラムでしたら上が早く読み込まれますので動作も速く終了します

あと・・・

好みのエフェクトを使ってください

show　フェードインしながら拡大

hide　フェードアウトしながら縮小

見本サイトで使っているのはこれです
function(){$(this).prev().show("slow"),$(this).html(cl);},
function(){$(this).prev().hide("slow"),$(this).html(op);}

slideDown　下へスライド
slideUp　上へスライド

function(){$(this).prev().slideDown("slow"),$(this).html(cl);},
function(){$(this).prev().slideUp("slow"),$(this).html(op);}

fadeIn　フェードイン
fadeOut　フェードアウト

function(){$(this).prev().fadeIn("slow"),$(this).html(cl);},
function(){$(this).prev().fadeOut("slow"),$(this).html(op);}

次はCSS・・・

ここでは　続きを読む　>>　や　<<　折りたたむ　を何とかします

上の例のようにアイコン画像だけでいい場合や

普通に文字で表示されるだけでよければ・・　CSSは必要ありません

CSSの最後に・・・・

/*続きを読むボタン*/
.entry .expand{
font-size:10px;/*文字サイズ*/
color: #00cc00;/*文字色*/
width:80px;/*枠の幅*/
border:1px solid #00cc00;/*枠線*/
background-color:#99ff99;/*枠の中の色*/
text-align: center;/*文字を中央に*/
margin:30px 0 30px 10px;/*表示位置*/
display:block;
}

.entry .expand{
font-size:10px;
color:#ffcc33;
border:1px solid #ffff66;
background-color:#ffffcc;
display:block;
text-align: center;
width:80px;
margin:30px 0 30px 10px;
}

.entry .expand{
font-size:10px;
color:#ff00ff;
border:1px solid #ff99ff;
background-color:#ffccff;
display:block;
text-align: center;
width:80px;
margin:30px 0 30px 10px;
}