★ 続きを読む①
記事内に続き部分を書いて、続き部分を非表示にして置きます。
続きを読むをクリックすると、続き部分を開閉します。
● フリープラグイン追加
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$(".read_open_close").click(function(){
$(this).next().slideToggle(1000);
});});
</script>
<script type="text/javascript">
$(function(){
$(".read_open_close").click(function(){
$(this).next().slideToggle(1000);
});});
</script>
◆ 説明
・slideToggle(1000)・・・開閉が終わるまでの時間 1000 は１秒のこと。
下記も指定が可能(ゆっくり、普通、早い）
slideToggle("slow")
slideToggle("normal")
slideToggle("fast")
・下記はフリープラグインンの先頭に１つあればOKです。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
● 記事部分（ＨＴＭＬタグを表示のタブをクリックして入れる）
<div class="read_open_close" style="cursor:pointer;">続きを読む</div>
<div class="tuduki" style="display: none;">
続きの記事部分
</div>
<div class="tuduki" style="display: none;">
続きの記事部分
</div>
● 携帯では、表示したいという場合は下記にする。
記事部分（ＨＴＭＬタグを表示のタブをクリックして入れる）
<div class="read_open_close" style="cursor:pointer;">続きを読む</div>
<div class="tuduki">
続きの記事部分
</div>
<div class="tuduki">
続きの記事部分
</div>
CSSへ追加する
.tuduki{
display:none;
}
display:none;
}
● 記事作成手順
① 記事を書く
② ＨＴＭＬタグを表示のタブをクリックして 上記タグを入れる
③ 続きを読むは、目立たないので、タグの非表示をクリックして
文字をデコレーションして下さい（文字を大きくしたり、色を付けたり）
◆ 実例
続きを読む
◆ 続きを読む を画像にしたい場合は下記の様にします
<div class="read_open_close" style="cursor:pointer;"><img src="画像のURL"> </div>
<div class="tuduki" style="display: none;">
続きの記事部分
</div>
<div class="tuduki" style="display: none;">
続きの記事部分
</div>