Blog Top
更新歴

SoyCMSブログアレンジ07 ・・・ReadMore続き

追記文章下「追記を閉じる」の課題点

  1. 「続きを読む」の文字スタイルが開いた時のままになってしまう。
    最初に「続きを読む」クリックした時に付いたdtのクラス名 open がそのままになっているため。
  2. 「追記を閉じる」クリックで閉じると追記文の長さのまま下の位置で閉じられてしまう。

実はもう一つ問題点がありました。

  1. 追記文があってもなくても「続きを読む」が表示されてしまう。

(SoyCMS初期テンプレートで使われている cms:id="more_link" は追記があるときだけ自動的に現れてくれます)

今回はテンプレートに dlタグを直書きしているので、当然ながら自動表示・非表示というわけにいかず、なにか「続きを読む」をON・OFF設定する必要があります。

<!-- 今回のテンプレートhtml -->
<dl class"read_more">
	<dt>続きを読む</dt>
	<dd class="more_content">
		<!-- cms:id="more" -->続きがここに表示されます
		(cms:id="more" はSoyMCSで使用するブロックコード:追記文を出力)
		<!-- /cms:id="more" -->
		<p class="close">追記を閉じる</p> <!--追加部分 -->
	</dd>
</dl>

 

1. 「続きを読む」の文字スタイルを戻す

これは、JavaScript部分に一行追加することで解決しました。

$(function(){ 
//-----dl.read_more の子要素 dt(続きを読む)をクリックすると次の要素 dd が開閉
	$("dl.read_more dt").on("click",function(){ 
		$(this).next().slideToggle(750);
//-----dt にクラス名 openを付与
		$(this).toggleClass("open");
	});
//----------p.close「追記を閉じる」をクリックで、親要素 dd を開閉
	$("dd.more_content p.close").click(function(){
		$(this).parent().slideToggle(750);
//追加部分 -----dt に付けられたクラス名を削除------
		$("dl.read_more dt").toggleClass();
	});
});

これで「追記を閉じる」の方をクリックしても dtのクラス名 open がなくなり、「続きを読む」も元のスタイルに戻ります。

2. 「追記を閉じる」クリック後の戻り位置
3. 「続きを読む」を表示/非表示できるように

スクロール量を計算して巻き戻すようなスクリプトがあるのかもしれませんが、JavaScript は全く詳しくないので、記事の先頭にジャンプする方法で考えてみます。
元の位置といえば、「続きを読む」ですが、ここより記事タイトルにジャンプした方が自然な感じなので 次のような html を想定してみます。

<!-- 記事部分-->
<div class="entry">
	<!-- 記事カテゴリー表示(テンプレートではcms:id="category_link"とcms:id="category_name" を使う)
	<ul class="posted-cat">	
		<li><a href="category_link">category_name</a></li>
	</ul>
	<!-- 記事タイトルにIDを付けて「追記を閉じる」クリックからの戻り先に指定する -->
	<h2 id="post108" class="title">タイトル(テンプレートではcms:id="title" を使う)
		<span>・・・タイトル後にサブタイトル</span></h2>
	<h2 class="subtitle">タイトル下に副題</h2>
	<p>本文(前文)ここに表示</p>
	<dl class="read_more"><!-- 追記が無い場合 class="no_more” とし表示しないようにする -->
		<dt>続きを読む</dt>
		<dd class="more_content">
			<p>追記部分ここに表示</p>
			<p class="close"><a href="#post108">追記を閉じる</a></p>
		</dd>
	</dl><!-- 追記終わり -->
</div><!-- 記事部分終わり -->

上のhtml で斜体字でカラー背景になっている箇所が、記事ごとに違う内容を記述しないといけない部分です。

「アレンジ03・・・記事タイトル」でも使用したカスタムフィールドを作ります。

フィールドID 属性 フィールド記述例 出力 目的
sub-title-span   <span>・・・温故知新</span> <span>・・・温故知新</span> タイトル後ろにサブタイトル
sub-title-under   ─往年の 名機かも─ ─往年の名機 かも─ タイトル下行に副題
title-id id mac8500 id="mac8500" 記事タイトルに id を付ける
read-more class no_more class="no_more" 「続きを読む」の表示・非表示(クラス指定)を ラジオボタンで選択して
close-more-id href #mac8500 href="#mac8500" 「追記を閉じる」クリックで記事タイトルに移動

 

<!-- b_block:id="entry_list" エントリーの記述-->
<div class="entry">
	<!-- 記事カテゴリー表示-->
	<ul class="posted-cat">	
		<!-- cms:id="category_list" -->
		<li><a cms:id="category_link"><!-- cms:id="category_name" --><!-- /cms:id="category_name" --></a></li>
		<!-- /cms:id="category_list" -->
	</ul>
	<h2 cms:id="title-id" class="title">
		<!-- cms:id="title" -->タイトル<!-- /cms:id="title" -->
		<!--  cms:id="sub-title-span" -->タイトル後サブタイトル<!-- /cms:id="sub-title-span" -->
	</h2>
	<h2 class="subtitle"><!-- cms:id="sub-title-under" -->副題<!-- /cms:id="sub-title-under" --></h2>
	<div cms:id="content">本文</div>
	<dl cms:id="read-more"><!-- class="read_more" か class="no_more" をラジオボタンでチェック -->
		<dt>続きを読む</dt>
			<dd class="more_content">
			<!-- cms:id="more" -->追記部分がここに表示<!-- /cms:id="more" -->
			<p class="close"><a cms:id="close-more-id">h2タイトルに移動して追記を閉じる</a></p>
		</dd>
	</dl><!-- 追記終わり -->
</div><!-- エントリー終わり -->
<!-- /b_block:id="entry_list" エントリーの記述終わり -->

/*CSS追加 追記がない時は「続きを読む」は表示しない */
dl.no_more {display:none;}

カスタムフィールドを設定した記事編集画面

mac8500

カスタムフィールド:title-id は記事タイトルのID名を(xxxxxの部分)を出力

<h2 id="xxxxx" class="title">タイトル</h2>

カスタムフィールド:close-more-id は「追記を閉じる」クリック時の移動先(#xxxxxの部分)を出力します。

<p class="close"><a href="#xxxxx">追記を閉じる</a></p>

カスタムフィールド:read-more はラジオボタンチェックで dl(「続きを読む」以下追記部分を包含)にクラス名を出力します。

<dl class="read_more"> または <dl class="no_more">

2013.09.17 | Trackback(0)

お名前: 

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