ブログ記事を隠す方法 | アメブロ カスタマイズ CSSメモ帳

ブログ記事を隠す方法



ブログ記事を途中から隠す





ブログ記事が長くなったり、メイン部分を隠し



記事の続きを読むなど



続きを見たい人だけに 読んでもらう方法をご紹介します。





ブログ上では、文章のさわりだけを表示して続きを隠す。




初心者向け アメピグ情報局  赤枠部分のように 続きを読む と表示します。





アメブロ カスタマイズ CSSメモ帳




初心者向け アメピグ情報局  赤枠 部分をクリックすると 下画像のように全文が表示されます。






アメブロ カスタマイズ CSSメモ帳



 アメブロ カスタマイズ CSSメモ帳 ( 下の、画像は 表示の都合上 縮小しておりますので カスタマイズで小さくなってはおりません。)





・ 記事をたたむためのカスタマイズ




 

フリープラグインにCSSを入れます。



 マイページ → ブログを書く → サイドバーの設定 → サイドバーの基本設定



 初心者向け アメピグ情報局  フリープラグインをクリックします。



アメブロ カスタマイズ CSSメモ帳



 初心者向け アメピグ情報局  この 赤枠部分に命令文を入れます。




アメブロ カスタマイズ CSSメモ帳



 

 初心者向け アメピグ情報局   命令文です。




<script language="javascript">
<!--
/* 0911 exlink */
$(function(){
var op = "続きをよむ &gt;&gt;";
var cl = "&lt;&lt; 折りたたむ";

$(".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をコピペしてね



赤文字の 「続きを読む」 「折りたたむ」 は自分のお好きな言葉に変えて下さい。



これは、下準備です。




・ 記事を書く




 初心者向け アメピグ情報局  通常通り記事を書いていきます。 




アメブロ カスタマイズ CSSメモ帳




赤枠の部分を 隠します。





青枠の HTMLタグを表示します。




アメブロ カスタマイズ CSSメモ帳




隠したい部分の 文章の始めと 終わりに 命令文を入れます。




 初心者向け アメピグ情報局   頭の部分は



<div class="more">


 初心者向け アメピグ情報局  終わりの部分に



</div>





文章をはさむように 入れて下さい。







初心者向け アメピグ情報局



                  ダウン ランキング参加中 ニコニコ


                お役に立てましたら ポチッとお願い致します。


                       にほんブログ村 ブログブログ ブログノウハウへ


                            アップ

  

                 みなさまの、ワンクリックが 励みになります。