アメブロで 【続きを読む】 を設定する方法

あれ！？


そういえば、アメブロは続きを読むってのがないよね・・・


って思ったことはありませんか？

他のブログではよくある続きを読むってのが、
このアメブロには標準で実装されていないのです。


そもそも、ワンクリックを促す続きを読むには
興味のない内容の記事を長々とスクロールされる手間を省き
タイトルだけを流し読みしてもらい興味のある記事だけを
探してもらえるので、欠かせないのです。


では、どうやって、続きを読むを実装させるかと言うと、

 

詳しくは アメブロ向上企画書　を参照ください。

はしょって書くと

フリープラグインに

<script language="javascript">

<!--

/* 0911 exlink */

$(function(){

var op = "続きをよむ　>>";

var cl = "<<　折りたたむ";

$(".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>

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;

}

を設定する。

※ＣＳＳの設定についてはコチラ

記事 の続きを読むで隠したいところを

<div class="more">

----記事の内容----

</div> 
で囲む

これで完成です！

---

アメンバー限定の記事にはもう少し


ディープな情報やテクニックを載せています。


是非　アメンバー登録してみて下さい。

おやじが喜びます

右のおやじピグをクリックすると

おやじが喜ぶよ。　(*^_^*)


記事の内容が面白かったもしくは役に立ったと


思っていただけたら、下のいずれかのリンクを


クリックしていただけると嬉しいです。




・人気ブログランキングへ

---