続きを読む

「ベーシックスキン」ですでに記事中で使われていた場合でも
「ＣＳＳ編集用デザイン」に変更してもそのまま使うことが可能です
ＣＳＳだけ一部分変更するだけです

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

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

<div class="more">　を入れます（HTMLタグで）

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

</div> で閉じると

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

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

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

JavaScriptを使えない環境の場合は(携帯の場合も・・)

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

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

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

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

<div class="more">　と　</div> を入れるのは文章を全部書き終わってから入れます

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

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

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

フリープラグインは↓続きをクリック・・

次に・・
フリープラグインにおまじないが入っているか確認します
新デザインではjqueryが標準で読み込まれていませんので入れないと動作しません

上のどちらかが入っているか確認して
なければどちらかをフリープラグインの一番最初にコピペします

入れたあるいは入っているのを確認したら・・フリープラグインに↓コピペ

$(".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'>折りたたむ";

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

あと・・・

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

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の最後に・・・・

/*続きを読むボタン*/
.articleText .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;
}

.articleText .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;
}

.articleText .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;
}