FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

追記【続きを読む】を同一ページに表示させる 

追記表示(続きを読む)をページ遷移させることなくシームレスに同一ページに表示させる方法を紹介します。
この機能は現在(2006/09/01以後 Ver.7)には標準装備されています。それ以前のバージョンをお使いの方は下記を参考にカスタマイズしてください。
このカスタマイズはABCK(アジアンビートカンケリキッズ)さんの追記の展開・折りたたみを参考にアレンジしました。


HTMLを編集します。<head>と</head>の間に以下を挿入します。


<head>

<script type="text/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>


</head>



更に下記箇所を変更します。


<!--▼ エントリー(記事)▼-->

<!--more_link--><a href="<%topentry_link>#more">続きを読む</a><!--/more_link-->
<!--more-->
<hr class="tuduki" noshade size="1">
<%topentry_more><!--/more-->


<!--▲ エントリー(記事)▲-->



この部分を次の記述に書き換えてください。


<!--▼ エントリー(記事)▼-->

<!--more_link-->
<div id="varP<%topentry_no>">
<div class="readmore"><a href="<%topentry_link>" title="続きを読む" onclick="showMore(<%topentry_no>,'<%topentry_link>');return false;">【続きを読む】</a></div>
</div>
<div id="varXYZ<%topentry_no>" style="display: none">
<div class="readclose">
<a href="#entry<%topentry_no>aa" title="続きを閉じる" onclick="showMore(<%topentry_no>,0);return true;">【続きを閉じる】</a></div>
<%topentry_more>
</div>
<!--/more_link-->
<!--more-->
<%topentry_more><!--/more-->


<!--▲ エントリー(記事)▲-->



最後にスタイルシートに次の記述を追加します。


/* 続きを読む・閉じる */
.readmore {
margin-top: 10px;
}
.readclose {
margin-top: 10px;
margin-bottom: 10px;
}



これで追記が同一ページで表示されます。変更箇所が多いのでバックアップをとってから挑戦することをお薦めします。
はじめましてこんばんは!けろのりと申します。
最近fullmoon_howlingのテンプレートをお借りしてブログを始めました。初心者なもので、続きを読むの表示方法がわからず困っております。
このテンプレートは続きの設定は標準装備されていると思うのですが、
どうすれば記事内に続きを読むという風に表示させて、記事を折りたたんだり出来るのかがわかりません。記事にただ続きを読むと書いても何もならないですよね?リンクとかさせるのですか?何かやり方があるのでしょうか?自分なりに調べたのですが、お手上げなもので、教えていただけないでしょうか?
[ 2006/09/16 23:12 ] [ 編集 ]
こんばんは、けろのりさん。
いつも記事を書き込む画面の少し下を見てください。別の入力箇所があります。そこに書き込んだものが「続きを読む」で開かれる部分となります。
はじめたばかりとは思えないほどよくカスタマイズされてますよ^^
その調子で頑張ってくださいね。
[ 2006/09/16 23:36 ] [ 編集 ]
こんにちは!
回答ありがとうございます。早速試した所ちゃんと出来ました!
いつも下書き状態でしか確認していなかったので、うまく出来なかったようでした。本当にありがとうございます。これからもよろしくお願いします。
[ 2006/09/17 13:46 ] [ 編集 ]
こんばんは、けろのりさん。
早速追記で書きましたね。また何かあれば聞いてください。もっとも私にも解からないことばかりですが^^;
[ 2006/09/17 22:08 ] [ 編集 ]
テンプレートを使用させて頂いております。ありがとうございます。
旧バージョンに、リリースされてる新機能を付け加えてるのですが、
追記表示をシームレスに同一ページに表記した場合に、コメント欄まで表示出来る方法とかはあるのでしょうか?
知識・見識が乏しいもので、よろしくお願い致します。
[ 2006/09/18 01:32 ] [ 編集 ]
おはようございます。ゼットンさん。
ABCK(アジアンビートカンケリキッズ)さんがコメントの折りたたみを紹介しています。
http://bisco.blog2.fc2.com/blog-entry-121.html
こちらの記事を参考にすれば出来そうな気もします。
実は以前にこのカスタマイズを試みて恥ずかしながら上手くいかずに断念したことがあります。今思えば「環境設定の変更」→「ブログの設定」のページの一番下にある<%topentry_comment_list>を有効に設定していれば出来たのかなと思っています。
ちょっと難しいカスタマイズだとは思いますが頑張ってくださいね。
[ 2006/09/18 08:46 ] [ 編集 ]
いたおさん、どうも初めまして
standard_monotoneのテンプレートを使わせて頂いている
はーくるという者です。追記【続きを読む】をページ遷移させる方法に戻すにはどうすればいいのでしょうか?

自分なりにやってみたらメチャクチャになってしまい
お手上げ状態に・・・。お手数をお掛けしますが
何卒、よろしくお願いします
[ 2006/09/19 15:42 ] [ 編集 ]
fc2で追記を同一ページに表記する方法がわからず、悩んでいたのですがおかげさまでカスタマイズできました。
ありがとうございました。m(_ _)m
[ 2006/10/06 15:47 ] [ 編集 ]
こんばんは、fuulさん。
ブログも本サイトも拝見しました。作成されてる共有テンプレートも写真素材も素晴らしいです!激しく影響されてしまいました。私も素材屋やろうかな^^;
[ 2006/10/07 00:13 ] [ 編集 ]
この機能、とてもいいですね〜。
続きを読むがすぐに表示され、かつすぐに閉じれる。今まで以上にブログが良くなりました。
これからもいい素材、アドバイス期待しています。
[ 2006/11/04 09:27 ] [ 編集 ]
こんばんは、源八さん。
有難う御座います。これからもいい素材を提供できるように頑張ります。源八さんもなにかご希望、ご要望の機能があったら教えてくださいね。可能な限りお答えしますよ。
[ 2006/11/06 23:39 ] [ 編集 ]
初めまして。

追記についてですが現在、私のブログの仕様だと記事URLに直接飛ぶと続きを読むのリンクが表示されず、追記の内容がイキナリ全て見えるようになっています。

これを、記事URLに直接飛んでも追記の内容を開かれずに、続きを読むのリンクを表示させる方法はあるのでしょうか?

なんかあまり意味の無い行為かもしれませんがやり方がありましたらご指導の程宜しくお願いします。
[ 2006/12/02 23:20 ] [ 編集 ]
2度目の連続投稿申し訳ありません。

詳しく言うと…
つまり、他のサイトからのリンクから指定記事に直リンクしてしまっても追記の内容を開かせず、一旦『続きを読む』を押させようとする方法があるのか?という事になります。

分かりにくい内容で大変申し訳ありませんがご指導のほど宜しくお願いします。
[ 2006/12/02 23:27 ] [ 編集 ]
こんばんは、田中さん。
なるほど、これはちょっと変則的な使い方ですね。
よくよく調べれば存在するのかも知れませんが、現時点ではこれを実現する方法が解かりません。力及ばず申し訳ありません。
もし何か解かればお知らせしますね。
[ 2006/12/03 21:50 ] [ 編集 ]
お返事ありがとう御座います。
確かにちょっと特殊なやり方ですよね。
自分でも色々試したんですが中々うまくいかなくて、いたお様に質問しました。
もし何か良い方法がありましたらお知らせ頂ければ大変嬉しいです。
[ 2006/12/03 23:38 ] [ 編集 ]
こんばんは、田中さん。
かなり以前に不可能だと思えていた質問が実は可能であることに気づくという事がたまにあります。この機能も実は可能なのかもしれません。
いつそれに気付くか解かりませんが気を長くしてお待ち下さい。
[ 2006/12/06 00:00 ] [ 編集 ]
初めまして。
最近ブログを始めた者です。
色々自分でカスタマイズしていってるのですがこの機能はすごい見やすく出来ていいですね。
満足しています。
ところが一つわからない点が御座いまして、続きを読むを押すと追記の文が出て来るのですがそのその追記の文の文字が見出しの文字よりも小さく表示されて出てきます。
どこを変えると文字の大きさを均一に出来ますか?
説明が分かりづらくてすいません。
お願いします。
[ 2007/06/04 05:27 ] [ 編集 ]
解決しました。
お騒がししました。
すいません。
[ 2007/06/04 07:02 ] [ 編集 ]
解決おめでとうございます。
私も回答が遅く申しわけありませんでした。
[ 2007/06/04 23:50 ] [ 編集 ]
とても使い勝手のいい折りたたみだと思います。

でも、私は折りたたみをせず前の状態で使えれば嬉しいのですが・・・
この折りたたみをしない、前の状態で使いたいときは
どうすればいいのでしょう。
[ 2007/08/28 16:35 ] [ 編集 ]
>この折りたたみをしない、前の状態で使いたいとき
前の状態というのが、具体的にどういう状態のことなのか
ちょっと質問の意味がよく分からないのですが、
下記の記事のようなカスタマイズのことでしょうか?

●続きを読むを個別記事ページに遷移させる
http://10plate.blog44.fc2.com/blog-entry-114.html

全然違う回答だったらすいません・・・。
[ 2007/08/28 16:46 ] [ 編集 ]
これです。
ありがとうございます!
探せてなかったみたいでした。すみません。
お手数おかけしました。
さっそくやってみます!ありがとうございました。
[ 2007/08/28 23:52 ] [ 編集 ]
いつも本当に有り難うございます、かどりんさん m(__;)m
tomoさん、かどりんさんが教えてくれた記事でお望みの動きになるかと思います。カスタマイズ頑張ってくださいね。
[ 2007/08/29 00:03 ] [ 編集 ]
はじめまして。
"続きを読む"の機能を残したまま、"続きを読む"と同じように続きが読めるリンクを別の言葉で表現したものを"続きを読む"とは別に作りたいのですが、それって可能なんでしょうか?なんかややこしいですが・・・。

もしダメでも他に良い方法があれば是非教えてください。
[ 2007/09/23 22:39 ] [ 編集 ]
それは簡単じゃないでしょうか?
zepさんは、lightframeタイプを利用しているようなので、テンプレートのHTML部分にこの記述があると思います。

<!--more_link-->
<div><a href="<%topentry_link>#more">続きを読む</a></div>
<!--/more_link-->
<!--more-->
<%topentry_more>
<!--/more-->

例えば、「続きを読む」を、「コチラへどうぞ」と変えたければ、これで変わりますよ。

<!--more_link-->
<div><a href="<%topentry_link>#more">コチラへどうぞ</a></div>
<!--/more_link-->
<!--more-->
<%topentry_more>
<!--/more-->

こう言うことではないのでしょうか。
[ 2007/09/24 00:04 ] [ 編集 ]
>あなろぐさん
ご返答ありがとうございます。
それを"続きを読む"とは別にもう一つ作りたいんです。なので、複数のパターンの"続きを読む"を置きたいんです・・・。言葉を変えるのではなく、違う言葉のパターンの"続きを読む"をもう一つ追加したいと思っているんです。
やっぱり難しいんですかね・・・。
[ 2007/09/24 00:56 ] [ 編集 ]
ゴメンナサイ。少し調べたのですが、「続きを読む」を同一記事で複数、書いているサイトを見たことがございません。

もしご覧になった経緯があればアドレスを教えていただけませんか?

個人的には、FC2の管理画面にて 『親記事』 『追記の編集』の二箇所しか入力が出来ない為、難しいかな?と予想しております。
[ 2007/09/24 16:26 ] [ 編集 ]
「続きを読む」とは別に、ということで、
記事文章の一部を表示-非表示で切り替えたい、
ということだと思いましたが、どうでしょう?

それならば、非表示にしたい部分に「折りたたみ」を使えばいいんじゃないかと。

『プラグインの折りたたみ』を参考にして記事を編集してはどうでしょう?

全文用意しておく必要があり、
さらに一度全文読み込んでから非表示にするために
内容が多ければ多いほど表示速度が遅くなりますが…。
[ 2007/09/24 23:59 ] [ 編集 ]
>zep さん
なるほど、意味が理解できました。
1ページに複数の「続きを読む」を取り入れたいという事ですね?これは僕の薄い知識では分りません。
ごめんなさい。
ただ、論理的には可能だと思います。
ですが、このFC2ブログの管理画面自体に、追記を複数展開できる機能がないため、テンプレートをカスタムしても難しいのではないかと思います。
あまり役立たず、申しわけありませんでした。
[ 2007/09/25 09:26 ] [ 編集 ]
>マコ♂さん
あ、否、どこかで見たというわけではないんですが、そういうのは出来ないのかなぁと思いまして・・・。やっぱり難しいですよね・・・。

>ゆうにぃさん
そうなんです、おっしゃる通りです。でも折りたたみにしてしまうとまた弊害が出てきてしまうんですよね・・・。

>あなろぐさん
いえ、こちらこそ訳のわからないようなことを言ってしまってなんだか逆に申し訳ないです・・・。

やはり続きを読むにこだわっては難しいようなので他の方法を探してみます。みなさま、ご迷惑をおかけしました。そして、親切な対応ありがとうございました。
[ 2007/09/26 23:50 ] [ 編集 ]
"にこにこで発見しました おなじみのロンフォールの曲","で歌詞つけて 歌ったみたいです。超ウマイw …",http://www.lineagecojp.com/movie/mov0025.zip
[ 2008/01/06 12:54 ] [ 編集 ]
FC2でブログをやっています。初心者なので続きを読むのやり方がわからなくて、こちらに伺いました。
記事の通り一応やりましたが、「続きを読む」が表示されなくて、そのまま本文文章の下に追記した内容が直接出るような形になっています。
あとは何をすれば良いんでしょうか?;
[ 2008/01/27 20:25 ] [ 編集 ]
 ありがとうございます
自分にもできました。v-221
ちょ〜うれしぃです。
[ 2008/02/01 01:12 ] [ 編集 ]
[ 2008/03/10 19:24 ] [ 編集 ]
はじめまして。
コチラのテンプレートを使用してはいないのですが
追記の展開カスタマイズを探してこちらに辿り着き、使わせていただいたところ
問題なく設置できたので、とても幸せになれました(*´д`*)
本当にありがとうございます┏○ ペコリ
テンプレ使用者以外が、こちらのカスタマイズ方法を利用するにあたっての規約など
探してみたのですが見当たらず・・・。もしあれば、ご連絡ください!
[ 2008/03/13 19:12 ] [ 編集 ]
シンプルで使いやすいユーザーインターフェース。
[ 2008/03/31 23:20 ] [ 編集 ]
感想のところにカキコしに行ったのですが、どうしてもフリーズして
表示ができなかったので、こちらに感想を書きますね。
「続きを読む」の設定方法を探していて、いたおさんのブログにやってきました。
早速テンプレートをお借りして、試してみたのですが上手く表示されて、
理想の型に近づけたのでほんと感謝な気持ちで一杯です。

また色々と、伺うこともあるかなと思い
リンクフリーということなので、張らせてもらいましたが
不都合な点がありましたら教えてくださいm(._.*)m
[ 2008/04/24 13:08 ] [ 編集 ]
折りたたみ表示でやってみたくて、ここを見て、やってみると
できました〜
ありがとうございました。
[ 2008/06/30 04:27 ] [ 編集 ]
ネットサーフィンして、たどり着きました。
悩みが解決しました。
ありがとうございます。
[ 2008/09/11 10:25 ] [ 編集 ]
コメントの投稿













管理者にだけ表示を許可する
この記事のトラックバックURL


今回は、『追記を展開式にするJavaScript』です。このスクリプトは、FC2ブログのテンプレート工房のいたおさんが考案されたもので、FC2ブログの共有プラグイン『プ...
ブログ検索
カテゴリー
プロフィール

Author:いたお
皆さんに喜ばれるテンプレートを目指して頑張ります!


当サイトはリンクフリーです。
ブログ全記事表示
カレンダー
12 | 2009/01 | 02
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31