Blog Top
更新歴

SoyCMSブログアレンジ06 ・・・Read More

─「続きを読む」をアコーディオン化─

ブログでよくある「もっと読む」とか「続きを読む」「Read More」。
本文と追記を分けて表示する機能。

「追記」だから文字通り、手紙の PS.(Post Script)のように本文が終わったあとに追加文を添える使い方が本来かもしれませんが、編集用語でいう「リード文」を記事編集画面の「本文」に、続きを「追記」に記述することで、ブログトップの初期表示が<タイトル><リード文>だけになり見渡しがよくなります。

多くのブログシステムがこの「続きを読む」をクリックするとブログの個別記事に移動して全文を表示します。SoyCMSブログページの初期テンプレートでも

<a href="entry.html#more" cms:id="more_link">続きを読む</a>
more_link:対象記事(エントリー)の追記の表示された記事毎(エントリー)ページへのリンクを生成します。

SoyCMSマニュアル「トップページで利用可能なブロック」
となっており、「続きを読む」をクリックすると記事毎ページに移動します。

好みにもよりますが、ページ移動はなるべくしたくないので、「続きを読む」からの追記部分を同じページで開けるようにjQueryでアコーディオンメニューにしてみました。
クリックすると隠されていた部分が開き、もう一度クリックで閉じるという動きです。

jQueryに限ってもアコーディオンメニューの記述の仕方はたくさんあるのですが、LIGブログさんの記事を参考にさせていただいて

<!-- テンプレートhtml -->
<dl class="read_more">
	<dt>続きを読む</dt>
	<dd class="more_content">
		<!-- cms:id="more" -->
			追記部分がここに表示されます(cms:id="more" はSoyMCSで使用するブロックコード)
		<!-- /cms:id="more" -->
	</dd>
</dl>
/* CSS */
/* dl.read_more 子要素 dt 「続きを読む」のアイコンと文字色初期状態 */
dl.read_more dt { cursor:pointer; background:url(../img/mark-more.gif) left top no-repeat; padding: 1px 0 1px 16px; } /* dd以下の追記部分は非表示にしておく */ dl.read_more dd.more_content { display:none; } /* dtにクラスopenが付いた時(dd開き時)「続きを読む」のアイコンと文字色切り替え */
dl.read_more dt.open { background-image:url(../img/mark-more-act.gif) ; color:#aaa; }
//JavaScript部
<script src="/paramy/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){ 
	$("dl.read_more dt").on("click",function(){ 
//dl.read_more の子要素 dt(続きを読む)をクリックすると次の要素 dd が開閉
//閉じていれば開き、開いていれば閉じる(開閉スピード750のゆっくり目)
		$(this).next().slideToggle(750);
//同時にこの dt にクラス名 openを付与
		$(this).toggleClass("open");
	});
});
</script>

これで「続きを読む」クリックで、追記部分が開閉するようになりました。
しかし、追記部分が長いとまた「続きを読む」まで戻るのも面倒です。
そこで追記の終わりに「追記を閉じる」を追加します。

<!-- テンプレートhtml -->
<dl class="read_more">
	<dt>続きを読む</dt>
	<dd class="more_content">
		<!-- cms:id="more" -->続きがここに表示されます<!-- /cms:id="more" -->
		<p class="close">追記を閉じる</p> <!--追加部分 -->
	</dd>
</dl>
//JavaScript
$(function(){ 
	$("dl.read_more dt").on("click",function(){ 
		$(this).next().slideToggle(750);
		$(this).toggleClass("open");
	});
//追加部分
//----------p.close「追記を閉じる」をクリックで、親要素 dd をスピード750で開閉-------
	$("dd.more_content p.close").click(function(){
		$(this).parent().slideToggle(750);
	});
//追加部分ここまで	
});

これで、追記部分の下にある「追記を閉じる」クリックで閉じてくれるようになったのですが、問題点が二つ程発生してしまいました。

  • 「続きを読む」の文字スタイルが開いた時のままになってしまう。
    これは「続きを読む」クリックした時に付いたdtのクラス名 open がそのままになっているからか。開閉時にアイコンや文字色を切り替えないようにするか、クラス名を変更する必要がある。
  • 「追記を閉じる」クリックで閉じると追記の長さ分スクロールした位置で閉じられてしまう。
    追記文の長さが1000ピクセルあったとすると本来戻りたい「続きを読む」の位置から 1000ピクセル下あたりを表示してしまいます。

追記を閉じる(閉じ位置調整なし)

2013.09.17 | Trackback(0)

お名前: 

←「ひとこと」と入力してから送信ボタンをクリックして下さい。