fc2ブログ

ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう！ 		ＦＣ２動画 FC2動画
自分で撮った動画を公開！共有！携帯でも利用できる！！ 		ＦＣ２プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう！ 		FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう！
TOP > カスタマイズをしよう！ > title － 続きを読むを折りたたみたい！
[Edit][NewEntry] [Admin]

続きを読むを折りたたみたい！

追記の部分に文章を書いてブログをつくっていると、続きを読むを押すと追記が見れるようになります。でも続きを読むを押すたびに、また読み込みを始めるので少しもたつく感じがします。
でも続きを読むを折りたたみにすると、クリックした瞬間に追記が開くのでとても動作がスムーズになります。

続きを読むを折りたたむ方法

【参考記事】 「こそっとゴルフ・パンヤ」様：続きを読むを折りたたみ表示する 　　

最初に管理画面のテンプレートの設定からHTMLの編集を開きます。そして上の方にある</head>というタグを探します。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

このブログでは・・・
<!--nextentry--><link rel="prev" href="<%nextentry_url>" title="<%nextentry_title>" /><!--/nextentry-->
</script>
</head>
<body>
この様になっていました。見つかったらこの</head>のすぐ上に下記のタグをコピーして張りつけます。

<script language="javascript">
<!--
function showMore(varA1, varB1){
var123 = ('varXYZ' + (varA1));
varABC = ('varP' + (varA1));
if( document.getElementById ) {
if( document.getElementById(var123).style.display ) {
if( varB1 != 0 ) {
document.getElementById(var123).style.display = "block";
document.getElementById(varABC).style.display = "none";
} else { document.getElementById(var123).style.display = "none";
document.getElementById(varABC).style.display = "block"; }
} else { location.href = varB1;
return true; }
} else { location.href = varB1;
return true; }
}
//-->
</script>


このブログを例にすると、
<!--nextentry--><link rel="prev" href="<%nextentry_url>" title="<%nextentry_title>" /><!--/nextentry-->
</script>
<script language="javascript">
<!--
～～～～～～
//-->
</script>
</head>
<body>
この様に張りつけます。

次にそのままHTMLの編集の画面で今度は<!--more_link-->と<!--/more_link-->で囲われている所を探します。<!--topentry-->の少し下にあると思います。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

このブログでは・・・
<!--more_link-->
<p class="more"><a href="<%topentry_link>#m<%topentry_no>" title="続きを読む">...続きを読む</a></p>
<!--/more_link-->
この様になっていました。この囲まれた中のタグを下記のタグに書き換えます。

<div class="entry_text">
<div id="varP<%topentry_no>">
<a href="<%topentry_link>#<%topentry_no>" onclick="showMore(<%topentry_no>,'<%topentry_link>#<%topentry_no>');return false;">続きを読む</a><br />
</div>
<div id="varXYZ<%topentry_no>" style="display: none"><%topentry_more><br />
<a href="#entry<%topentry_no>" onclick="showMore(<%topentry_no>,0);return true;">続きをたたむ</a>
</div>
</div>


このブログを例にすると、
<!--more_link-->
<div class="entry_text">
<div id="varP<%topentry_no>"> 
～～～～～～～
</div>
</div>
<!--/more_link-->
この様に書き換えます。

ここまでの作業ができたら、最後に更新を押して保存をします。これで完成です。自分のブログで確認してみて下さい。クリックするだけで、続きを読むが開くと思います。

修正と言葉を変える方法

続きをたたむを押した時に、その記事のタイトルが一番上に来るようにならずに、変な場所に戻ってしまう人はここを読んで下さい。

テンプレートの設定からHTMLの編集を開きます。そして<%topentry_title>を探します。<!--topentry-->のすぐ下にあると思います。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

見つかったら<%topentry_title>を囲っているタグにid="entry<%topentry_no>"を書き加えます。
このブログを例にすると、
<h2><a href="<%topentry_link>" title="<%topentry_year><%topentry_month><%topentry_day>-<%topentry_title>" accesskey="T"><%topentry_title></a></h2>
<%topentry_title>が見つかり、囲っているタグが<h2>のタグだとわかりました。
なのでこのタグに先ほど紹介したタグを書き加えます。

<h2 id="entry<%topentry_no>"><a href="<%topentry_link>" title="<%topentry_year><%topentry_month><%topentry_day>-<%topentry_title>" accesskey="T"><%topentry_title></a></h2>
この様になります。これで折りたたみを閉じると、タイトルの頭の位置に戻ると思います。

「続きを読む」と「続きをたたむ」の言葉は2番目に張りつけたタグの該当場所を好きな言葉に書き換えて下さい。

できたので「こそっとゴルフ・パンヤ」のTigerうっすさんにお礼を言に行く。

またこの方法でどうしても上手くいかない人は、「アジアンビートカンケリキッズ」さんにも追記の展開・折りたたみの記事があるのでそちらを見てみて下さい。閉じたときに記事の頭に戻りたくない！方法や個別記事でも折りたたみたい！方法も紹介されています。


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★　　[アフィリエイトとは？]
リンクシェア
の詳細はこちら
 エーハチネット
の詳細はこちら
 ﾊﾞﾘｭｰｺﾏｰｽ
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
助かりました！
ずっと記事を折りたたみたいと思っていたので、とても助かりました！ありがとうございました！これからも運営頑張ってください！
  • 20070919 |
  • いたふさん ＠管理人 #sq0pt15s
  • [Edit]
いたふさんへ
折りたたみができて良かったですね！参考になってうれしいです。
  • 20070922 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 20071007 |
  • さん ＠管理人 #
  • [Edit]
鍵コメさんへ
はじめまして。参考にしていただいてありがとうございます。
ブログを拝見させていただいたのですが、現在は折りたたみの状態になっていないですね。なぜコメントの時は追記がきえてしまうのかは、その状態を見てみないとちょっとわからないです。。・°°・(>_<)・°°・。
  • 20071009 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 20071021 |
  • さん ＠管理人 #
  • [Edit]
鍵コメさんへ
ちょっとお時間がかかるかも知れませんが、それでもよかったら、お力になれたらなりますよ！
  • 20071023 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 20071023 |
  • さん ＠管理人 #
  • [Edit]
鍵コメさんへ
返事が遅くなってしまい申し訳ないです。
ブログは何時に見れるのかちょっとわからないですよね。
かといってHTMLを貼り付けるのは長いのと、やっぱりどんな状態になっているのかを見てみないとなかなか難しいですね。
でも解決できないかもしれませんが、一応HTMlをコメント欄に張ってみてください。
もしかしたら、簡単な事ですぐに直る可能性もあると覆うので！
  • 20071031 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 20071102 |
  • さん ＠管理人 #
  • [Edit]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 20071102 |
  • さん ＠管理人 #
  • [Edit]
鍵コメさんへ
月曜日は帰宅がかなり遅くなりそうなんです。整っていないテンプレを使っているのは心苦しいと思いますが、０時きっかりにテンプレをまた元に戻してしまわないで、次の日の朝に戻していただけると助かります。
  • 20071104 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 20071104 |
  • さん ＠管理人 #
  • [Edit]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 20071106 |
  • さん ＠管理人 #
  • [Edit]
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
  • 20071107 |
  • さん ＠管理人 #
  • [Edit]
鍵コメさんへ
無事に折りたたみができてホッとしました。原因は文字化けっでしたか～。
あとプレビューはすごく便利だけど、全てがプレビューで見れるわけではないので、なかなか気づかない人が多いですね。
テンプレートは画像や幅などかなりカスタマイズされていて、かなりお気に入り仕様になっているので、そこに折りたたみがつけれて本当に良かったです。
これからも楽しんでブログ生活してくださいね！
  • 20071110 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
いつも参考にしています
解らない事があるといつもこちらを参考にしています。
今回もテンプレートを変更したら
記事が折りたためなくて困っていましたが
早速上の手順で無事に折りたたみに成功しました。
とっても嬉しいです。
私にとってここは困った時の強い味方です。
ありがとうございます。
  • 20080203 |
  • meiさん ＠管理人 #-
  • [Edit]
meiさんへ
この様なコメントを頂いて大変うれしく思います。
本当にありがとうございます。
  • 20080229 |
  • るんばばさん ＠管理人 #c8dTRiQ2
  • [Edit]
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/174-cb4c8ea4   

続きを読むを折りたたみたい！
続きを読むを折りたたみたい私はずっとこれがやりたかったのです。グーグルでさがしたところやっと詳しく解説しているサイト（ブログ）にたどり着けました。エントリータイトル：続きを読むを折りたたみたいネ
  • 20070426 |
  • 実録無職引き篭もりがwebデザイナーを目指す（無謀かも)
「続きを読む」を改善しました
ブログの調整をしました。 今までは，「続きを読む」をクリックすると，その記事のURLに飛ばされるだけでしたが， 今回の調整で「続きを読む...
  • 20101030 |
  • wralknなブログ。
HOME | ▲

Template Designed by DW99