HOME Twitter PC RSS 

スマートフォン版 ありのごとくあつまりて

スマートフォン用の共有テンプレートを 3作登録 しています。 FC2ブログユーザーさんは、是非使ってみてくださいね。 詳細はこちら

HOME > ブログカスタマイズ上級 > 固定リンクでも 【続きを読む】 を折りたたむ方法

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

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

固定リンク (個別記事ページ,<!--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配信エラー になります。

また、携帯テンプレートで表示した場合、記事中に 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 であることと関連していたようです。

スポンサーリンク

楽天写真館
今すぐ使える特別クーポンプレゼント!!
初回限定プリント1枚4円 50枚200円!送料無料など

記事URL(共通)
http://arinogotokuatumarite.blog19.fc2.com/blog-entry-124.html

Hatena Google Bookmarks Google+ Yahoo! Facebook Twitter FC2ブログランキング
コメントを見る 15件 コメントを書く PC版で読み直す

CATEGORY RSS

カテゴリ : ブログカスタマイズ上級

カテゴリーリスト (記事件数)

ブログカスタマイズ中級 (15) / ブログカスタマイズ上級 (30) / FC2共有テンプレート (16) / FC2マニア・仕様関連 (21) / アクセス解析・SEO対策 (18) / ブログ雑記・その他 (8) / TV・NET・GAME (12) / 子育て・日々の出来事 (10) / 得するお役立ち情報 (15) / 無料素材のリンク集 (11) / 無料ソフト・フォント等 (10) / Twitter・ブラウザ関連 (26) /

PC版へ変更
トップページへ
ページ先頭へ戻る