Seesaaブログでは、追記部分を見るときに「続きを読む」を押すと別ページに飛びますが、それを同一ページ内に折りたたみ式で表示する方法です。
ついでのおまけですが、「続きを読む」部分にのみ独自のスタイルを設定することができます。
サンプルは、このブログ内の「続きを読む」をクリックしてみてください。
動作確認はWindowsXPにてIE6、Netscape7.1、Opera7.53、Firefox1.0.4で行っています。
Macは全く未確認です。
改造はご自由にどうぞ。
この記事内容を利用して起こった不具合や損害などに対して、作者はなんら責任・義務を負いません。
技術的な内容を含む質問にも、お答えする義務を負いません。
自己責任でご利用ください。
まず、管理画面の
デザイン -> コンテンツ
を選択し、コンテンツ一覧の中の「記事」をクリック。
「記事(ページコンテンツ)の設定」というページに切り替わったら、右上のほうにある「コンテンツHTML編集」をクリック。
「コンテンツＨＴＭＬ」というページに切り替わったら、一番大きな入力フィールド内の
と書いてある直下に、以下の文を付け足します。
HTMLの分かる方なら、HTMLヘッダ部分に直接記述してもいいと思います。
次に、同じ入力フィールド内で「絶不調」とか書かれている部分の少し上にある
という一文を探します。
よく似た文が真上にあるので、間違わずに「article.first_body」のほうを選んでください。
Ctrl+Fなどで検索するのが一番確実かと思います。
この一文を削除し、以下の文と置き換えます。
あとは「保存」を押したあと再構築してください。
基本的に、ここまでで記事の開閉はできると思います。
JAVAScriptが使用できなくても、初期状態と同じ記事ページに飛ぶ仕様になっています。
ここからは個人の好みの問題だと思いますが、この方法だと「続きを読む」と本文の間の改行が全て取り払われてしまうようです。
「続きを読む」と本文の間にある程度の隙間を空けたい方は、上記HTML中に直接<br />タグをはさむか、以下のようにスタイルを設定すればOKです。
今回の改造の「コンテンツHTML編集」で、一番最初に付け足したJAVAScriptの直後くらいに付け足せばいけると思います。
また、以下のようにすれば「続きを読む」をボタンのように目立たせることが可能です。
お好みでいろいろ変えてみてください。
今回の改造にあたり、以下のページのスクリプトを利用させていただきました。
ツリー開閉用HTML出力cgiなどもあり、大変クールなサイトです。
ありがとうございました。
http://www.fromdfj.net/javascript/oritatami.html
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
