ありのごとくあつまりてFC2ブログカスタマイズ,共有テンプレート,素材リンク集,フリーソフトの紹介など。 迷子にならないブログ作りを目指し... 何か1つでも お役に立てる情報 を提供できたらいいなぁと思っています。

モード変更

この記事に含まれるタグ (Keyword) :
FC2ブログ  追記  折りたたみ  javascript  変数  

固定リンクでも 【続きを読む】 を折りたたむ方法

2010/04/07 (水)  カテゴリー: ブログカスタマイズ上級

固定リンク (個別記事ページ,<!--permanent_area-->) でも 追記 に入れた内容を 【続きを読む】 として折りたたみたい! カスタマイズの方法は...?

という質問を受け、最初は 「個別記事ページでまで 追記 が折りたたまれてたら面倒だよなぁ~」 と思ってしまった私ですが、ある方のサイトで 「追記にはネタバレの内容を含みます」 という一文を見て、こういうサイトでは 「読みたい人だけが自分の意思で 追記 を開く」 という形式もありかなと感じました。

元々、カテゴリー別ページ月別ページ検索結果ページタグ検索結果ページ では、FC2ブログのテンプレート工房(いたおさん) のスクリプトを使わせていただき、追記の折りたたみ機能 (スクリプトON の場合は その場に展開, スクリプトOFF の場合は 固定リンクへ移動) を付けてあるので、それと同じ見た目で スクリプトOFF でも記事が閲覧できる方法を考えてみました。

設置した場合の動きのイメージです。 追記に入れた内容が 個別記事ページ でも折りたたみ状態で表示され、クリックで 展開 ⇔ 閉じる を切り替えます。 スクリプトOFF の場合には、内容だけがそのまま表示されます。

最初は、今使っているスクリプトを利用して...と考えましたが、スクリプトOFFのことも考えた スッキリした方法が見つけられなかったので、同じ作者さんの 「プラグインの折りたたみ」 をアレンジしたものを使ってみたら、上手く出来ました!

スクリプト OFF の場合には 内容だけがそのまま表示されます。

<!--permanent_area--> で 追記部分を折りたたむ方法

1. 折りたたみスクリプト(本体) を 1つ設置する

テンプレート内(<head>~</head> 部分など) に 以下のスクリプトを記入。

<script type="text/javascript">
function showPlagin(idno){
pc = ('PlagClose' + (idno));
po = ('PlagOpen' + (idno));
if( document.getElementById(pc).style.display == "none" ) {
document.getElementById(pc).style.display = "block";
document.getElementById(po).style.display = "none";
}
else {
document.getElementById(pc).style.display = "none";
document.getElementById(po).style.display = "block";
}
}
</script>

※プラグインや記事内など、他で「折りたたみ」を使う場合にも共有できます。
※設置場所は <head> 以外でもOK。 外部スクリプト化も可能です。

2. テンプレートの <!--more--> ~ <!--/more--> 部分を変更

( <!--more--><%topentry_more><!--/more--> という部分です )

※変更前 共有テンプレートでの構造概略

<!-- ▼記事部分▼ -->
(中略)
<!--more-->
<br /><%topentry_more>
<!--/more-->
(中略)
<!-- ▲記事部分▲ -->

この <!--more--> ~ <!--/more--> 部分を 以下のソースに変更します。
追記 : 2012/05/23 改訂版

<!--more-->
<!--permanent_area-->
<script type="text/javascript">
// <![CDATA[
document.write('<div id="PlagOpen200" class="readmore"><a href="#" onclick="showPlagin(200); return false;" title="記事の続きを展開します">【 ↓ 続きを表示する ↓ 】</a></div>');
document.write('<div id="PlagClose200" style="display:none">');
document.write('<div class="readclose"><a href="#" onclick="showPlagin(200); return false;" title="続きを閉じる">【 続きを閉じる 】</a></div>');
// ]]>
</script>
<!--/permanent_area-->
<br /><%topentry_more>
<!--permanent_area-->
<script type="text/javascript">
// <![CDATA[
document.write('</div>');
// ]]>
</script>
<!--/permanent_area-->
<!--/more-->

このようにすれば、見た目も 同じものが使えると思います。

ちなみに、今回はスクリプトの書き方として CDATAセクション を使いましたが、FC2ブログでは 追記部分より前にCDATA を使ってしまうと RSS配信エラー になります。

  • RSSの設定 「一部表示」の場合、冒頭文に CDATA が入っているとダメ
  • RSSの設定 「全文表示」の場合、追記より前に CDATA が入っているとダメ

また、携帯テンプレートで表示した場合、記事中に CDATAセクション を含んでいると、それ以降の文章が上手く表示できなくなってしまうようです。 なので、記事内で 単発的にこの折りたたみスクリプトを使う場合には、以下のように書いてください。

<script type="text/javascript"><!--
document.write('<div id="PlagOpen123"><a href="#" onclick="showPlagin(123); return false;" title="OPEN">▽ 詳しく知りたい方はここを開いてね ▽</a></div>');
document.write('<div id="PlagClose123" style="display:none">');
document.write('<a href="#" onclick="showPlagin(123); return false;" title="CLOSE">詳細を閉じる</a><br />');
//--></script>

ここに折りたたみたい内容を直接記入します。タグなどが入ってもOKです!

<script type="text/javascript"><!--
document.write('</div>');
//--></script>

4箇所の 赤文字部分の数字 を 他の折りたたみと重ならない適当な数字(例えば、記事No.など) に変えて使ってください。 数字以外を入れると機能しません。 追記の折りたたみで 200 を仮に使っているので、200 は外して使ってください。

※この記事で紹介した各ソースは、私が実際に使っているソースとは一部異なります。 混在させると機能しませんので、ここに載せたソースを参照してください。

追記 (2012/04/05) :
document.write の中に ¥ を入れてあると、utf-8 ではエラーになってしまうようです。 FC2ブログの文字コードは utf-8 に統一作業中です。 現在 euc-jp サーバーでエラーのない場合でも、utf-8 に変った時に レイアウトが乱れる 可能性があります。 旧コードを利用の方は ¥ を除いたものに修正してご利用ください。

ちなみに、以前 スマホ用 に変換されるページで、コメントタグ部分が &lt;!-- --> や <!-- --&gt; のように誤変換されてしまっている不具合を見つけたのですが、これも スマホ用テンプレが utf-8 であることと関連していたようです。

キーワード検索 : FC2ブログ  追記  折りたたみ  javascript  変数  

スポンサーリンク

はてなブックマーク  Google Bookmarks Google Bookmarks Yahoo!ブックマーク Facebook Twitter
お役に立ちましたら、応援して頂けると嬉しいです(*´`*)
記事を読んで頂きありがとうございます。 FC2ブログランキング

URL http://arinogotokuatumarite.blog19.fc2.com/blog-entry-124.html

2010/04/07 ~ | Comment (15) tweet? | ↑ ページ先頭へ ↑ |

15 Comment


paruparuさん こんにちは!
このところ ゆっくりネットを見られる時間があまりありませんでした(涙)
ひさしぶりにお邪魔します!

わたしのブログにも 少ないですが追記を使ってネタバラシ的な記事があります!
こんな感じで くだらないのですけどね(汗
http://chocovism.blog46.fc2.com/blog-entry-851.html

ですので早速使わせていただきました!
ありがとうでーす♪

るしあ |  2010/04/27 (火)  No.474


るしあさんへ

使ってもらえて良かったです。
修正もOKでした!  また、遊びに来てくださいね!

paruparu |  2010/04/27 (火) [ 編集 ] No.475


こんにちは

丁度私が探していた内容で参考になりとても助かりました。ありがとうございます。

それで一つ質問をさせていただきたいのですが
この方法で表示した場合に続きを閉じるを文末に持ってくる事は可能でしょうか?

ぷるみえーる23 |  2012/05/21 (月)  No.1389


ぷるみえーる23さんへ

> 続きを閉じるを文末に持ってくる事は可能でしょうか?

それも可能です。 2. の部分ソースを以下のものと変更します。
ただ... これ実際に試してみると分かると思いますが、閉じた時に ページ位置はそのままで 内容だけ閉じる状態 になるので、位置が変な感じがすると思います。

追記 (2012/05/23) :
コード数箇所 修正しました。 閉じるの位置が変にならないように 他、少しの修正。

<!--more-->
<!--permanent_area-->
<script type="text/javascript">
// <![CDATA[
document.write('<div id="PlagOpen200" class="readmore"><a href="#" onclick="showPlagin(200); return false;" title="記事の続きを展開します">【 ↓ 続きを表示する ↓ 】</a></div>');
document.write('<div id="PlagClose200" style="display:none">');
// ]]>
</script>
<!--/permanent_area-->
<br /><%topentry_more>
<!--permanent_area-->
<script type="text/javascript">
// <![CDATA[
document.write('<div class="readclose"><a href="#PlagOpen200" onclick="showPlagin(200); return true;" title="続きを閉じる">【 続きを閉じる 】</a></div>');
document.write('</div>');
// ]]>
</script>
<!--/permanent_area-->
<!--/more-->

個人的には、続きを読むで 開いたものは 「必要ない情報だった」 と思って、すぐ閉じたくなることはあっても、最後まで読んだのに わざわざそれを閉じる動作は(誰もしない気がするので)必要ないのでは...? と思います。

paruparu |  2012/05/22 (火) [ 編集 ] No.1391


こんにちは。
通常時は記事をたたむを文末にもってきているので
記事への固定リンクでも同じように表示したいなと思ったんですが
固定記事の場合仰る通り最後まで読んでも閉じる必要はないかもしれません
どちらの方がいいか両方使ってみてから考えようと思います。

どうもありがとうございました。

ぷるみえ |  2012/05/22 (火)  No.1392


ぷるみえさんへ

コメント と 記事 のコードを修正しました。

コメントに載せた 「続きを閉じるを文末に持ってくる」 のコードは
閉じるリンクに href="戻りID" を入れ、return true にすれば、戻り位置を修正できました。

ちなみに、記事のコードは スタイルシートの設定によって不具合(レイアウトの乱れ)が起こってしまうことに気付いたので、その部分を修正しました。
こちらは、元のソース通り 閉じるリンクも return false のままにしてあります。

新しいコードを参考にしてみてください m(__)m

paruparu |  2012/05/23 (水) [ 編集 ] No.1393


こんにちは。私のテンプレは

<%topentry_body>
<!--more_link-->
<p class="more"><a href="<%topentry_link>#m<%topentry_no>" title="続きをみる">...続きをみる</a></p>
<!--/more_link-->

<!--more--><div id="more"><%topentry_more></div><!--/more-->

てなっているんです。パルパルさんの方法でやってみると個別記事に飛んでしまうのですが
良い方法はないでしょうか?色々やってみたんですが、私の頭では無理でした・・・・<!--/more_link-->の部分がくせもののような気がするんですが、わかりません。。
お手数おかけしてすみません。教えてください(TT)

たろう |  2013/01/16 (水)  No.1564


管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

- |  2013/01/16 (水)  No.1565


何度もすみません!FC2ブログのテンプレート工房様のサイトを参考にして解決しました。ありがとうございます。
これからもFC2で困ったらここへきます!いつも感謝しています(^^)

たろう |  2013/01/16 (水)  No.1566


たろうさんへ

自己解決されたようでよかったです。
また何かありましたら来てくださいね。

paruparu |  2013/01/17 (木) [ 編集 ] No.1568


初めまして。

昨日、初めて自分のブログで「続きを読む」を利用しました。
サイドバーの新着記事からクリックすると
記事全てが表示されるため、こちらの記事を参考にさせて頂き
ました。

結果、新着記事から入ったらうまく表示されますが
TOPから入り「続きを読む」をクリックしても
1度で表示されず2度クリックしなくては
いけません。

どのように改善すればよろしいでしょうか?
宜しくお願いします<(_ _)>

ルパンコナン |  2013/11/01 (金) [ 編集 ] No.1712


ルパンコナンさんへ

ページエリアで記事の折りたたみをしていないテンプレートでは、
<!--more_link--> ~ <!--/more_link--> 部分も 折りたたみに対応させる必要があります。

<!--more_link-->
<div id="PlagOpen<%topentry_no>" class="readmore"><a href="<%topentry_link>" title="記事の続きを展開します" onclick="showPlagin(<%topentry_no>); return false;">【 ↓ 続きを表示する ↓ 】</a></div>
<div id="PlagClose<%topentry_no>" style="display:none">
<div class="readclose"><a href="#" title="続きを閉じる" onclick="showPlagin(<%topentry_no>); return false;">【 続きを閉じる 】</a></div>
<%topentry_more>
</div>
<!--/more_link-->
<!--more-->
(この記事のソース or 元のソース)
<!--/more-->



こんな感じです。言葉などは変更したものに合わせてください。
<!--more--> ~ <!--/more--> 部分は、固定リンク(個別記事ページ)に適応されます。

paruparu |  2013/11/01 (金) [ 編集 ] No.1713


paruparu様

早速のご回答ありがとうございました。
ちゃんと出来ました<(_ _)>

あと、スマホで見ると追記部分の画像が
拡大されて表示されていますが
これはCDATAと言うものに関係していることなんでしょうか?

説明にある
「記事内で 単発的にこの折りたたみスクリプトを使う場合には、以下のように書いてください。」とはどこに書くものなのですか?

たびたび 申し訳ございません。

ルパンコナン |  2013/11/01 (金) [ 編集 ] No.1715


ルパンコナンさんへ

> スマホで見ると追記部分の画像が 拡大されて表示されていますが
これは今回のものとは関係なく、スマートフォン用テンプレートのスタイルシートで、記事中の画像を画面幅に合わせるようにしてある設定の関係です。

お使いのスマホ用テンプレートのスタイルシートの中に
↓下のような設定が入っています。

/* 記事本文・追記
---------------------------------------------- */
(中略)
.entry_body img {
max-width:100%;
height:auto;
}

もともと記事に貼っている画像は 1440 x 954 ピクセルなどの かなり大きいサイズのものを使っているようですので、iPad や PC などでスマホ用テンプレートを見た場合には、かなり大きく感じると思います。
記事に使う画像をそこまで大きい画像にしなければ max-width での最大幅も抑えられます。

> 「記事内で 単発的に...」とはどこに書くものなのですか?
記事の内容に 例えば、クイズを作ってその答えを書くような場合 に使いたい時のものです。 記事の内容は、PC用,スマホ用,携帯用 テンプレートでほぼ共通で使われるのでエラーにならないようにしたものです。 通常は使わなくてOKです。

paruparu |  2013/11/02 (土) [ 編集 ] No.1717


ごめんなさい。
折角ご回答いただきましたが
理解が出来ませんでした。

もう少し勉強します。
ありがとうございました。

ルパンコナン |  2013/11/02 (土) [ 編集 ] No.1719

コメントを投稿する 記事: 固定リンクでも 【続きを読む】 を折りたたむ方法


お気軽にコメントをどうぞ。
ソースコード等の < と > は (実態参照に変換されるので) そのまま使ってOKです。 & は 全角 に変えて使ってください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback