2005-06-17

記事の追記部分を折りたたみ

Seesaaブログでは、追記部分を見るときに「続きを読む」を押すと別ページに飛びますが、それを同一ページ内に折りたたみ式で表示する方法です。
ついでのおまけですが、「続きを読む」部分にのみ独自のスタイルを設定することができます。
サンプルは、このブログ内の「続きを読む」をクリックしてみてください。

動作確認はWindowsXPにてIE6、Netscape7.1、Opera7.53、Firefox1.0.4で行っています。
Macは全く未確認です。
改造はご自由にどうぞ。
この記事内容を利用して起こった不具合や損害などに対して、作者はなんら責任・義務を負いません。
技術的な内容を含む質問にも、お答えする義務を負いません。
自己責任でご利用ください。


まず、管理画面の
デザイン -> コンテンツ
を選択し、コンテンツ一覧の中の「記事」をクリック。
「記事(ページコンテンツ)の設定」というページに切り替わったら、右上のほうにある「コンテンツHTML編集」をクリック。
「コンテンツHTML」というページに切り替わったら、一番大きな入力フィールド内の

<% content.header -%>
<!-- Content -->

と書いてある直下に、以下の文を付け足します。

<script type="text/javascript">
function dd(id){
if(document.all)OBJ = document.all(id).style; else if(document.getElementById)OBJ = document.getElementById(id).style; if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}
</script>

HTMLの分かる方なら、HTMLヘッダ部分に直接記述してもいいと思います。
次に、同じ入力フィールド内で「絶不調」とか書かれている部分の少し上にある

<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %><% article.first_body | bodyfilter(article_info,blog) %></div>

という一文を探します。
よく似た文が真上にあるので、間違わずに「article.first_body」のほうを選んでください。
Ctrl+Fなどで検索するのが一番確実かと思います。
この一文を削除し、以下の文と置き換えます。

<div class="text"><% if:diet_log %><% include:article_diet_file %><% /if %>
<br /><% article.body | bodyfilter(article_info,blog) %>
<% if:article.body_more %>
<div class="more-href"><a href="javascript:void(0)" onclick="dd('more<% article.id %>')">
<script language="JavaScript" type="text/javascript">
document.write('<% article.body_continue_text %>');
</script>
</a></div>
<noscript><div class="more-href"><a href="<% article.page_url %>"><% article.body_continue_text %></a></div></noscript>
<div class="more_body" id="more<% article.id %>" style="display:none">
<% article.body_more | bodyfilter(article_info,blog) %><div class="more-href"><a href="javascript:void(0)" onclick="dd('more<% article.id %>')">閉じる</a></div></div>
<% /if -%></div>

あとは「保存」を押したあと再構築してください。
基本的に、ここまでで記事の開閉はできると思います。
JAVAScriptが使用できなくても、初期状態と同じ記事ページに飛ぶ仕様になっています。


ここからは個人の好みの問題だと思いますが、この方法だと「続きを読む」と本文の間の改行が全て取り払われてしまうようです。
「続きを読む」と本文の間にある程度の隙間を空けたい方は、上記HTML中に直接<br />タグをはさむか、以下のようにスタイルを設定すればOKです。

<style>
.more-href{margin:10px 0px;}
</style>

今回の改造の「コンテンツHTML編集」で、一番最初に付け足したJAVAScriptの直後くらいに付け足せばいけると思います。
また、以下のようにすれば「続きを読む」をボタンのように目立たせることが可能です。
お好みでいろいろ変えてみてください。

<style>
.more-href{margin:20px 0px;
width:100%;text-align:center;
background:silver;color:black;
border:gray 2px solid;}
</style>


今回の改造にあたり、以下のページのスクリプトを利用させていただきました。
ツリー開閉用HTML出力cgiなどもあり、大変クールなサイトです。
ありがとうございました。

http://www.fromdfj.net/javascript/oritatami.html
posted by 8 at 03:37 | Comment(34) | TrackBack(21) | Seesaaブログ改造
この記事へのコメント
どうも、はじめまして。
この記事を参考にさせていただいたのですが、フラッシュをはったページが見れなくなっちゃうんですよ。
これってどうしようもないんですかねぇ?
Posted by miomio at 2005-07-17 06:08
すいません!!勘違いだったようです。。。
Posted by miomio at 2005-07-17 06:20
こんばんはmiomioさん、初めまして。
解決したようでよかったです。
Posted by 8 at 2005-07-20 02:39
はじめまして
以前から追記が飛ぶのが気になってました
こちら参考にさせていただきました
ありがとうございます!!
Posted by vivi at 2005-08-21 02:50
viviさん、初めまして。
お役に立てたようで嬉しいです。
Posted by 8 at 2005-08-25 03:34
こんにちは、はじめまして!

私も以前から追記を見ると飛んでしまうのが気になってました。おかげさまで無事に設置することができました。ありがとうございました(*- -)(*_ _)ペコリ
Posted by らん at 2005-09-02 18:44
8さん、はじめまして。

私も飛ぶのが気になっていて、
追記を使うのをためらっていたのですが、
無事に設置ができたので、
これからはどんどん使えそうです。
ありがとうございました。
Posted by ともちゃん at 2005-09-04 11:46
こんばんは、初めまして。
先日から、折りたたみのスクリプトを使わせて頂いてます。
当方Macなのですが、IE5.1とNetscape7.02で閲覧してみました。

IE5.1では、追記以降のページを開くときは問題無いのですが
閉じる動作のときに「文字列自体は閉じるが、開いたときに生じたスペースが
空白スペースとなってそのまま残る」現象が起こります。

Netscape7.02では、記事の開閉動作は共に問題無いのですが
追記以降に画像が貼ってある場合、その画像がブラウザに読み込まれません。

簡単ですがレポートとして書き残してゆきます。
ではでは、ありがとうございました。
Posted by しう at 2005-09-07 21:22
らんさん、ともちゃんさん、しうさん、どうも初めまして。
ご報告ありがとうございます、使っていただけて嬉しいです。

しうさん、詳細なご報告ありがとうございます、大変助かります。
なるほど、ちょっと困った仕様になってますね。
身近にMac環境がないのですぐに確認できないのですが、機会があればいただいたレポートを参考に手を入れなおしてみたいと思います。
Posted by 8 at 2005-09-11 01:39
8さん初めまして、こんばんは。私も
使わせてもらいました、ありがとうございます。
今後とも記事を参考にさせていただきますね。
Posted by むぅ at 2005-10-08 00:59
むぅさんこんばんは、初めまして。
活用していただけて嬉しいです。
こちらこそ、今後ともよろしくお願いします。
Posted by 8 at 2005-10-08 02:41
初めまして。
同じ画面で折りたたみできるのを知りまして、早速使わせて頂きました。これからも参考にさせて頂きます。
Posted by マサ at 2005-10-23 18:45
初めまして**
記事を折りたたむ、参考にさせていただきました**
ただ設定をしたところトップページ、コメント欄の**
右サイドバーが下に落ちてしまいました**
どのように修正すればいいのでしょうか?**
お忙しいところ申し訳ありませんが**
お時間のあるとき教えていただければ**
嬉しいです**
Posted by HAna** at 2005-10-26 07:38
ごめんなさい**
質問だめだったんですね**
ちゃんと読んでいませんでした**
これからも参考にさせていただきます**
Posted by HAna** at 2005-10-26 07:54
HAna**さんこんばんは、初めまして。
ご報告ありがとうございます。
活用していただけて嬉しいです。

少し前に、こちらはナビゲーションバーに関してでしたが、デザインが崩れたとご相談をいただいたことがありました。
その場合の原因が<DIV>タグの閉じ忘れでしたので、もしかしたら同じ現象かもしれません。
ちょっと大変ですが、記事ごとの個別ページに飛んでレイアウトを確認し、崩れているページがあればソースを見て<DIV>と</DIV>がきちんと同数あるかどうか確認…という感じで見つかるのではないかと思います。
Posted by 8 at 2005-10-30 02:02
こんばんは
親切にどうもありがとうございました**
大変そうですが時間のあるとき
頑張ってみます!
Posted by HAna** at 2005-10-30 21:22
こんにちは
その通りでした−−**
ありがとうございました!!!!!
Posted by HAna** at 2005-10-31 14:26
こんばんはHAna**さん、無事解決したようでよかったです。
ご報告ありがとうございます。
Posted by 8 at 2005-11-02 01:16
はじめまして。
こちらの方法で、無事に記事の追記部分を折り畳みにすることが出来ました。
ずっと別に開いてしまうのがとても気になっていたので、とても嬉しいです。
ありがとうございました。
Posted by トロロ at 2005-12-03 14:35
トロロさんこんばんは、初めまして。
お役に立てたようで嬉しいです。
ご報告ありがとうございます。
Posted by 8 at 2005-12-06 02:48
初めまして。
こちらの方法を使わせていただきました。
おかげ様で、すごく見やすくなりました。
ありがとうございます。
これからも参考にさせていただきます。
Posted by yo- at 2006-01-10 02:16
使わせて頂きました。
有難う御座いますm(_ _)m
Posted by 憂蜘蛛 at 2006-02-07 05:22
yo-さん、憂蜘蛛さんこんばんは、初めまして。
ご報告ありがとうございます。
役立てていただけて嬉しいです。
Posted by 8 at 2006-02-21 03:12
初めまして。
今日からこちらのブログの方でブログを書く事にしたので、こちらの方法を使わせていただきました。
どうもありがとうございました。
Posted by Haruhi at 2006-03-03 18:10
Posted by Earth at 2006-03-31 01:25
初めまして。続きを読む、が
気になっていたので、私もこの方法を
使わせていただきました。m(__)m
※トラックバックさせていただきました。
Posted by manami at 2006-07-05 11:11
 素晴らしいカスタマイズ方法を教えていただき、有難うございます。早速、カスタマイズしました。
 少し改造させていただき、記事を書きましたので、トラックバックしました。
Posted by のぶ at 2006-07-14 01:21
はじめまして、お世話になります。
CSS等は初心者ですが、以前よりこのカスタマイズを利用していました。
しかし今回seesaaでHTMLが若干変わったため、このカスタマイズが出来るのか出来ないのか分からなくなりました。
タグ機能を使いつつも折りたたみのカスタマイズをするにはどうした良いのでしょうか。
忙しいと思いますが、お時間があるときに教えて頂けたらと思います。
宜しくお願いします。
Posted by とも at 2006-07-22 08:57
こんばんは、初めまして。

追記のコメントが全く表示されず、泣きそうになりながらコチラにたどり着きました。おかげさまで、折りたためるようにまでなり、スッキリと表示されました!

本当にありがとうございました!!
Posted by 睦月 at 2006-08-09 02:00
初めまして。
seesaaの追記は任意の場所でできるので便利だなと思っていたのですが、別ページに跳んでしまうのがネックだなと思っていました。
追記の折りたたみの方法を教えていただき、今では自分の思い通りに使えています。
本当にありがとうございました。
Posted by S9 at 2006-08-14 18:26
はじめまして。
seesaaの続きを読む機能に不満があり、調べて一発目にこちらにたどり着きました。
説明も分かりやすく、とても簡単にカスタマイズすることができました!
ありがとうございました!
Posted by イク at 2006-09-29 21:27
はじめまして。
私もこちらのサイトを拝見して「追記部分の折り返し」を変更させていただきました。別画面で開いてしまう場合と違って、とてもすっきりとしましたし、追記部分がどこからかが明確になってとてもわかりやすくなりました。カスタマイズにとても満足しています。ありがとうございました。
Posted by 飛梅 at 2006-10-24 23:12
devoutlessness parenchymatously undercoated laodicean azophenyl nandina disimmure cernuous
West Byfleet Physiotherapy Clinic
http://netministries.org/see/churches/ch08382

記事の追記部分を折りたたみ
Posted by Maggie Mullen at 2007-12-17 03:17
初めまして。

ためになる情報ありがとうございます。
Posted by てつお at 2008-11-12 12:31
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/4412302

続きを読む(記事の追記部分)を折りたたむ
Excerpt: Style book さんのところで、ナイスなカスタマイズが紹介されていたので、当サイトにも導入してみました。 Seesaaブログでは、追記部分を見るときに「続きを読む」を押すと別ページに飛びますが、..
Weblog: べんじゃみんのSeasaaBLOG
Tracked: 2005-06-25 17:45

鉄鍋でレーズンパン
Excerpt: 今日は朝から大雨。 普段よりもゆっくり時間をとれたので、 追記分の記事を折りたたみで表示するように、設定を変更しました。 参考にしたのはStyle bookさんです。 子供達はお散歩に行けないので、..
Weblog: 今日はこんな一日。
Tracked: 2005-07-04 18:12

いじってみました。
Excerpt: 前々から気になっていた、「続きを読む」。 私の場合、大概の記事が長文になってしまうので、本やCDのタイトル等は本文(投稿フォームでは「内容」の欄)に書いて、それ以降の部分(感想とか)は追記の欄に書い..
Weblog: 似非晴耕雨読の日々。
Tracked: 2005-07-18 00:27

記事の追記部分を折りたたみ
Excerpt: 追記部分が別ページになるのか気掛かりだったので、 『Style book』さんで改造術を教えていただきました。
Weblog: Happy Style!!
Tracked: 2005-09-04 11:42

あちこちカスタマイズ。
Excerpt: ブログのあちらこちらがカスタマイズされています。お暇な方は探してみてください。 ヒントは、YYMMDDHHMMSSと、ニュース×××××。わかりますか? あ、忘れてた。もう一つあります。折りたたみ、で..
Weblog: MoonlightのPC日記
Tracked: 2005-11-19 23:53

記事の追記部分(続きを読む)の折り畳み
Excerpt: 「続きを読む」をクリックすると、新たに記事ページを開くので時間がかかるのが気になっていました。 で、Style bookさんでカスタマイズ方法を紹介されていたので、やってみました。
Weblog: ほんの保管所
Tracked: 2006-01-15 19:09

追記を折りたたみ式にする
Excerpt: 記事の追記部分「続きを読む」を読む際、個別ページへジャンプしていたのを、同じページ上に追記部分を展開させる方法です。これは結構格好ヨイカスタマイズではないですか?? これは「記事」コンテンツ画面の「コ..
Weblog: 2人はPETANCO-ペタンコ-
Tracked: 2006-01-21 06:52

終息
Excerpt: 再構築したブログの様相は一変していた 暇潰しにも手を抜けぬ憂蜘蛛の本性が剥き出しになっていたのだ というわけで、ブログ改造作業ひとまず完了。 いざCSSを移した段階で更にやりたいことが二、三増え..
Weblog: 色即是空
Tracked: 2006-02-07 06:28

ナビゲーションバー
Excerpt: もうひとつ、今のブログにはつけないかも知れないけれど 覚えておきたいカスタムを発見したのでメモを兼ね
Weblog: みぃちゃんネット
Tracked: 2006-02-21 00:19

「続きを読む」に変更中
Excerpt: 好みが分かれるところだと思いますが、記事の全文表示を 「続きを読む」スタイルにしてみました。(現在LOVEカテゴリのみ) ■追記の折りたたみ表示はStyle bookさんを参考にしました。 この..
Weblog: +LOVE PARADISE+
Tracked: 2006-03-06 07:08

seesaaブログ 「続きを読む」
Excerpt: 今回のカスタマイズは、「続きを読む」です。 Seesaaブログでは、「続きを読む」を見る際、 クリックすると別ページに飛んでしまうのですが、 それを防ぐことが出来ました。 同一ページ内に折りたたみ式..
Weblog: 稼げるサイトdeネット~子育てママの便利帳~
Tracked: 2006-07-05 11:10

「記事の追記部分を折りたたみ」の改造
Excerpt: 記事の追記部分を折りたたみ、素早く開閉できる方法がありました。 「記事の追記部分を折りたたみ : Style book」 これは素晴らしいカスタマイズです。今まで「続きを読む」をクリックすると個..
Weblog: 蓼科山麓阿呆陀羅日乗
Tracked: 2006-07-14 01:08

記事の折りたたみ
Excerpt: Thanks このブログは、「続きを読む」をクリックすると、その都度、別ページを読み込み、飛んでいましたが、「Style book」さんのページで、同じ画面のまま記事を折りたためる方法が載ってたので、..
Weblog: ブログで手作り英語
Tracked: 2007-01-10 21:09

ページを切り替えてもBGM音が途切れない方法
Excerpt: ブログで「つづきを読む」など追記部分をクリックすると、「ページが切り替わる」=「流れていたBGMプレーヤーも新しく読み込みなおす」ことになるので、どうしても音楽は途切れてしまいます。 しかし発想を変..
Weblog: ブログで音楽を流す方法
Tracked: 2007-06-11 13:20

ブログ構築時にお世話になったサイト
Excerpt: このブログを作成するに当たって、参考にさせて頂いたサイトを紹介します。 (自分用の覚書とも言う) ◇◇◇記事中に「編集」リンクを表示する◇◇◇ Inqsite Blog様 - 記事編集リンク改訂版 ..
Weblog: Ρメモ帳
Tracked: 2007-06-18 10:05

音楽とは関係無いのですが
Excerpt: 音楽とは関係無いのですが、プラウザを“Internet Explorer 7”に換えてみました&amp;#63903; ですが、導入して自分のブログを開いてみてビックリ! 「レイアウトが崩れてる~&a..
Weblog: ☆勝手に音楽のススメ☆
Tracked: 2007-07-27 05:54

『続きを読む』を折りたたむ方法
Excerpt: 最近ブログのスタイルシートをいじくるのにはまってる。必ずしもいい感じにはなってないがね( ^ω^)やっとこさHTMLやCSSの編集の仕方がおおまかだが分かってきた。んで、今日はちょっくら記事部分のHT..
Weblog: 東京大学無教養学部留年組
Tracked: 2008-04-28 18:00

ブログ改造
Excerpt: このブログはテンプレートに「落葉」を使っていますが、ところどころ改造を加えています。 それらをいくつか紹介したいと思います。 今回は、追記記事の折りたたみについて。 「記事の追記部分を折りたたみ :..
Weblog: 消波ブログ
Tracked: 2008-10-09 01:56

【So-net blog】「続きを読む」を折り畳みにする
Excerpt: Style book さんのところで、記事の追記部分を折りたたみという記事を見つけて、 私のブログにも導入できないかといろいろ試してみました。 So-net blogで使いやすいように、メモがわりに..
Weblog: 真っ赤なりこぴん日記
Tracked: 2009-02-06 01:25

【続きを読む】のカスタマイズ
Excerpt: 先日、続きを読むの機能を設定しましたが、 続きを読むをクリックすると ちょっとページが飛んで見難いため、 折りたたみ式に、カスタマイズしてみました。
Weblog: 0からの挑戦 〜情報商材アフィリエイターへの実践記〜
Tracked: 2009-07-03 00:23

追記記事の折りたたみ
Excerpt: 記事移転にともなう再送信です。
Weblog: ネオンテトラ
Tracked: 2009-08-09 15:50
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。