ついでのおまけですが、「続きを読む」部分にのみ独自のスタイルを設定することができます。
サンプルは、このブログ内の「続きを読む」をクリックしてみてください。
動作確認はWindowsXPにてIE6、Netscape7.1、Opera7.53、Firefox1.0.4で行っています。
Macは全く未確認です。
改造はご自由にどうぞ。
この記事内容を利用して起こった不具合や損害などに対して、作者はなんら責任・義務を負いません。
技術的な内容を含む質問にも、お答えする義務を負いません。
自己責任でご利用ください。
まず、管理画面の
デザイン -> コンテンツ
を選択し、コンテンツ一覧の中の「記事」をクリック。
「記事(ページコンテンツ)の設定」というページに切り替わったら、右上のほうにある「コンテンツHTML編集」をクリック。
「コンテンツＨＴＭＬ」というページに切り替わったら、一番大きな入力フィールド内の
<% content.header -%>
<!-- Content -->
<!-- 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>
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>
<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>
.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>
.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
この記事を参考にさせていただいたのですが、フラッシュをはったページが見れなくなっちゃうんですよ。
これってどうしようもないんですかねぇ？
解決したようでよかったです。
以前から追記が飛ぶのが気になってました
こちら参考にさせていただきました
ありがとうございます！！
お役に立てたようで嬉しいです。
私も以前から追記を見ると飛んでしまうのが気になってました。おかげさまで無事に設置することができました。ありがとうございました(*- -)(*_ _)ペコリ
私も飛ぶのが気になっていて、
追記を使うのをためらっていたのですが、
無事に設置ができたので、
これからはどんどん使えそうです。
ありがとうございました。
先日から、折りたたみのスクリプトを使わせて頂いてます。
当方Macなのですが、IE5.1とNetscape7.02で閲覧してみました。
IE5.1では、追記以降のページを開くときは問題無いのですが
閉じる動作のときに「文字列自体は閉じるが、開いたときに生じたスペースが
空白スペースとなってそのまま残る」現象が起こります。
Netscape7.02では、記事の開閉動作は共に問題無いのですが
追記以降に画像が貼ってある場合、その画像がブラウザに読み込まれません。
簡単ですがレポートとして書き残してゆきます。
ではでは、ありがとうございました。
ご報告ありがとうございます、使っていただけて嬉しいです。
しうさん、詳細なご報告ありがとうございます、大変助かります。
なるほど、ちょっと困った仕様になってますね。
身近にMac環境がないのですぐに確認できないのですが、機会があればいただいたレポートを参考に手を入れなおしてみたいと思います。
使わせてもらいました、ありがとうございます。
今後とも記事を参考にさせていただきますね。
活用していただけて嬉しいです。
こちらこそ、今後ともよろしくお願いします。
同じ画面で折りたたみできるのを知りまして、早速使わせて頂きました。これからも参考にさせて頂きます。
記事を折りたたむ、参考にさせていただきました＊＊
ただ設定をしたところトップページ、コメント欄の＊＊
右サイドバーが下に落ちてしまいました＊＊
どのように修正すればいいのでしょうか？＊＊
お忙しいところ申し訳ありませんが＊＊
お時間のあるとき教えていただければ＊＊
嬉しいです＊＊
質問だめだったんですね＊＊
ちゃんと読んでいませんでした＊＊
これからも参考にさせていただきます＊＊
ご報告ありがとうございます。
活用していただけて嬉しいです。
少し前に、こちらはナビゲーションバーに関してでしたが、デザインが崩れたとご相談をいただいたことがありました。
その場合の原因が＜DIV＞タグの閉じ忘れでしたので、もしかしたら同じ現象かもしれません。
ちょっと大変ですが、記事ごとの個別ページに飛んでレイアウトを確認し、崩れているページがあればソースを見て＜DIV＞と＜/DIV＞がきちんと同数あるかどうか確認…という感じで見つかるのではないかと思います。
親切にどうもありがとうございました＊＊
大変そうですが時間のあるとき
頑張ってみます！
その通りでした−−＊＊
ありがとうございました!!!!!
ご報告ありがとうございます。
こちらの方法で、無事に記事の追記部分を折り畳みにすることが出来ました。
ずっと別に開いてしまうのがとても気になっていたので、とても嬉しいです。
ありがとうございました。
お役に立てたようで嬉しいです。
ご報告ありがとうございます。
こちらの方法を使わせていただきました。
おかげ様で、すごく見やすくなりました。
ありがとうございます。
これからも参考にさせていただきます。
有難う御座いますｍ(_ _)ｍ
ご報告ありがとうございます。
役立てていただけて嬉しいです。
今日からこちらのブログの方でブログを書く事にしたので、こちらの方法を使わせていただきました。
どうもありがとうございました。
気になっていたので、私もこの方法を
使わせていただきました。m(__)m
※トラックバックさせていただきました。
少し改造させていただき、記事を書きましたので、トラックバックしました。
CSS等は初心者ですが、以前よりこのカスタマイズを利用していました。
しかし今回seesaaでHTMLが若干変わったため、このカスタマイズが出来るのか出来ないのか分からなくなりました。
タグ機能を使いつつも折りたたみのカスタマイズをするにはどうした良いのでしょうか。
忙しいと思いますが、お時間があるときに教えて頂けたらと思います。
宜しくお願いします。
追記のコメントが全く表示されず、泣きそうになりながらコチラにたどり着きました。おかげさまで、折りたためるようにまでなり、スッキリと表示されました！
本当にありがとうございました！！
seesaaの追記は任意の場所でできるので便利だなと思っていたのですが、別ページに跳んでしまうのがネックだなと思っていました。
追記の折りたたみの方法を教えていただき、今では自分の思い通りに使えています。
本当にありがとうございました。
seesaaの続きを読む機能に不満があり、調べて一発目にこちらにたどり着きました。
説明も分かりやすく、とても簡単にカスタマイズすることができました！
ありがとうございました！
私もこちらのサイトを拝見して「追記部分の折り返し」を変更させていただきました。別画面で開いてしまう場合と違って、とてもすっきりとしましたし、追記部分がどこからかが明確になってとてもわかりやすくなりました。カスタマイズにとても満足しています。ありがとうございました。
West Byfleet Physiotherapy Clinic
http://netministries.org/see/churches/ch08382
記事の追記部分を折りたたみ
ためになる情報ありがとうございます。