追記文章の折りたたみ 2.0 for FC2 ブログ
先日公開した「追記文章の折りたたみ 2.0」の FC2 ブログ版カスタマイズをご紹介します。
1.特徴
- JavaScript エフェクトライブラリ script.aculo.us(スクリプタキュラス)を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示します。
- JavaScript が無効の場合はエントリー・アーカイブにジャンプします。
- 「続きを隠す」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。
- ライブラリファイルを編集せずに折りたたみ速度の変更が可能です。
2.サンプル
- 追記文章の折りたたみ 2.0 サンプル(Movable Type のサンプルです)
3.script.aculo.us のインストール
script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。
次のページで「current version」の下にある「scriptaculous-js-1.7.0.zip(または拡張子が tar.gz / tar.bz2)」のリンクをクリック。バージョン 1.7.0 は2007年3月現在です。
ダウンロードアーカイブを解凍して下記の4ファイルを、[ツール] - [ファイルアップロード] を利用してアップロードします。
/lib/prototype.js
/src/controls.js
/src/effects.js
/srcscriptaculous.js
4.テンプレートの修正1(HTMLヘッダ修正)
HTMLの編集画面を開き、</head>
の直前に下記を追加します。
<script type="text/javascript" src="[ファイルをアップロードしたURL]/prototype.js"></script>
<script type="text/javascript" src="[ファイルをアップロードしたURL]/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="[ファイルをアップロードしたURL]/effects.js"></script>
<script type="text/javascript" src="[ファイルをアップロードしたURL]/controls.js"></script>
<script type="text/javascript">
Effect.DefaultOptions = {
transition: Effect.Transitions.sinoidal,
duration: 0.5, // seconds
fps: 60.0, // max. 60fps due to Effect.Queue implementation
sync: false, // true for combining
from: 0.0,
to: 1.0,
delay: 0.0,
queue: 'parallel'
}
function ajaxShowHide(entryID) {
element = $('Text' + entryID);
if(element.style.display == 'none') {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = '≪ 続きを隠す';
Element.show(effect.element);
}
};
Effect.BlindDown(element, options);
} else {
options = {
afterFinish: function(effect) {
$('Link' + entryID).firstChild.innerHTML = '続きを読む ≫';
Element.hide(effect.element);
}
};
Effect.BlindUp(element, options);
}
}
</script>
[ファイルをアップロードしたURL] はファイルのアップロード先のURLを設定してください。
折りたたみ速度を変更する場合は、
duration: 0.5, // seconds
の数値を変更します。0.5
はスライドアップ・スライドダウンに 0.5 秒かかることを意味します。
この Effect.DefaultOptions = { … }
の部分は scriptaculous ライブラリの設定の上書きですので、速度を変更しない場合はここから削除しても構いません。ちなみにデフォルトは1秒に設定されています。
5.テンプレートの修正2(追記文章表示用タグ修正)
追記部分を修正します。デフォルトテンプレートと公開テンプレートの変更例を示します。ご利用中のテンプレートによって変更前の内容が若干異なるかもしれませんが、<!--more_link--> ? <!--/more_link-->
だけを残しておけば大丈夫ですので、あとは変更後の内容に入れ替えてください。
変更前
<!--more_link-->
<div class="entry-more">
<a href="<%topentry_link>#more">続きを読む "<%topentry_title>"</a>
</div>
<!--/more_link-->
変更後
<!--more_link-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">≪ 続きを隠す</a></div>
</div>
<!--/more_link-->
下のリストは、下側に表示された「続きを隠す」をクリックして追記を閉じた時に、折りたたみマーク位置、または記事タイトルに戻したい時のバージョンです。追記が長文の場合に有効です。
変更後(閉じた時に折りたたみマーク位置に戻る)
<!--more_link-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#Link<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<!--/more_link-->
変更後(閉じた時に記事タイトル位置に戻る)
<!--more_link-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#a<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<!--/more_link-->
個別記事でも折りたたみを利用したい場合は下記の部分を変更してください。JavaScript が OFF でも追記部分が読めるよう、noscript
タグで追記を表示するようにしています。
変更前
<!--more-->
<%topentry_more>
<!--/more-->
変更後
<!--more-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><%topentry_more></div>
</noscript>
<!--/more-->
下のリストは、個別記事で下側に表示された「続きを隠す」をクリックして追記を閉じた時に、折りたたみマーク位置、または記事タイトルに戻したい時のバージョンです。追記が長文の場合に有効です。
変更後(閉じた時に折りたたみマーク位置に戻る)
<!--more-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#Link<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><%topentry_more></div>
</noscript>
<!--/more-->
変更後(閉じた時に記事タイトル位置に戻る)
<!--more-->
<div id="Link<%topentry_no>" class="ajax-entry-more-link"><a href="<%topentry_link>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return false;">続きを読む ≫</a></div>
<div id="Text<%topentry_no>" style="display: none">
<%topentry_more>
<div class="ajax-entry-more-link"><a href="#a<%topentry_no>" name="<%topentry_no>" onclick="ajaxShowHide('<%topentry_no>');return true;">≪ 続きを隠す</a></div>
</div>
<noscript>
<div id="more" class="entry-more"><%topentry_more></div>
</noscript>
<!--/more-->
上記のスクリプトは貼り付けた後、編集しても構いませんが、div
開始タグと a
開始タグの間に改行を含まないようにしてください(Firefox で正常に動作しなくなります)。
6.CSS
「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link
を与えています。必要に応じて設定してください。
.ajax-entry-more-link {
/* 任意のプロパティを設定 */
}
7.その他
HTML ページの1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません(開く瞬間と閉じた瞬間にビクッとなります)。サンプルの公開テンプレートは XML 宣言を外しています。
2007.03.19 追記
追記を閉じた時に記事タイトルまたは折りたたみマーク位置に戻るリストを追加しました。
- FC2ブログのサブカテゴリリストの折りたたみ
- FC2ブログでプラグインに表示しているブログパーツを折りたたむ
- サイドメニューの折りたたみ for FC2 ブログ
≫ 追記の折りたたみ from さえらのバルビレ日記
久しぶりに カスタマイズっぽいことをしてみました。
トップページで 「続きを読む」 をクリックしたとき、個別エントリページにとばないで
その場で 追記... [続きを読む]
≫ ページを切り替えてもBGM音が途切れない方法 from ブログで音楽を流す方法
ブログで「つづきを読む」など追記部分をクリックすると、「ページが切り替わる」=「流れていたBGMプレーヤーも新しく読み込みなおす」ことになるので、どうして... [続きを読む]
エントリーしてくださってありがとうございました。
さきほど、必死になってやってみたのですが、
最後の「CSS」のとこでひかかってしまいました(;´▽`A``
恥ずかしながら、まったくのど素人なもので、「任意のプロパティの設定」の意味がよくわからないのです・・。
CSSに何も設定しないと動作しないですよね?(^▽^;)
すみません、色々弄ってたらレイアウトがおかしなことになってしまいました(^▽^;)
とりあえず今は、別の方法での追記折りたたみ方法でやってみます・・・。
勉強しなおして、また再チャレンジします。
せっかくエントリーしてくださったのに、もしわけありません
>ナチさん
こんにちは。
6項は「必要に応じて設定」なので、この作業をスキップしても折りたたみは動作します(最低限、3・4・5項だけでもOK)。
設定されたサイトを見せて頂ければ動作を確認致しますので、機会があれば再チャレンジしてみてください。
「プロパティ」は、color とか margin とか line-height 等を指すための名称です。「colorプロパティ」「marginプロパティ」という使い方をします。
参考:
http://deztec.jp/lecture/css/css_prop.html
とりあえずご連絡まで。
今またチャレンジしてみたのですが、なぜか表示がおかしくなってしまいます・・・。
色々わけもわからず弄ってしまったので、それが原因なのでしょうか・・・。
これからしばらくそのままの表示で残しておきますので、
ご都合のつくときに、確認していただけると幸いです。
ご迷惑おかけしてすみません。
よろしくお願いします○┓ペコリ
今確認してみたところ、Firefoxだと背景の一部とプラグインの一部の表示がおかしくなってて、
IEだと背景は大丈夫なんですが、プラグイン表示が可笑しくなってます。
あと、「続きを隠す」をクリックした後、全然記事と関係ない場所(別の記事)が表示されてしまうのですが、
記事のタイトル、もしくは、「続きを表示する」の位置へ戻すことは出来ないのでしょうか?
お手数お掛け致します
>ナチさん
こんにちは。
ご連絡ありがとうございました。
ご質問をまとめると、
●表示
IE:OK
Firefox:NG(白の背景がブログ全体に反映されない)
●折りたたみ動作
IE/Firefox:いずれも動作するが、
追記の内容が長い時にスクロールをして、一番下の「続きを隠す」のリンクをクリックすると、元の位置に戻らない(ページ一番下になる模様)
ということでよろしいでしょうか。「プラグイン」が何を指されているか不明ですので、上記以外に何か不具合がありましたら具体的な場所をお知らせください。
折りたたんだ時に「続きを表示する」の位置へ戻すことは可能です(タイトルに戻すことも可能)。その場合、数行の短い追記では、ページをスクロールせずに閲覧すると思いますが、その状態で折りたたんだ時はページがずれる感じになりますので予めご了承ください。
こちらにつきましては動作確認ができ次第、本エントリーに追記します。
また、不具合のあるHTMLソースは当方のローカルに保存しましたので追記のカスタマイズは解除してくださって結構です。
それではよろしくお願い致します。
プラグインの表示の可笑しい部分は「最新の記事+コメント」の部分が表示されず、エラーになってしまっているという事です。
今までは、何の問題も無く表示されていたのですが、
こちらのカスタマイズを行うと、エラーになってしまいました。
もしかしたら私が余計な箇所を弄ってしまったためかもしれないですが(^▽^;)
>ナチさん
こんばんは。
遅くなってすいません。
「最新の記事+コメント」が正常に表示されない原因は、prototype.js とプラグインのコードが干渉しているためです。
これを解消するためには、コメントツリー表示の下記の部分に、青色のコード(6行)を追加してください。
for(i in cLst) {
if(i.indexOf('http') != 0){
continue;
}
:
(略)
:
for(j in cLst[i].lst) {
if (isNaN(parseInt(j))) {
continue;
}
tCmt = cLst[i].lst[j];
var cmtIsInLimit = (curTime - tCmt.getTime() < cmtDateLimit);
:
(略)
:
また、追記を閉じた時に記事タイトルまたは折りたたみリンクの位置に戻すバージョンを記事に追加しました。
それではよろしくお願い致します。
( ^ ^ )/ こんにちは ご無沙汰してます←最近のデフォのご挨拶になっちゃってますねぇ(汗)
今一番力を入れてるFC2のブログで、こちらのScriptを使わせていただきました。
「続きを読む」をクリックすると、いちいち 個別エントリページにとぶのをなんとかしたくて・・・
バッチリ、トップページで 追記が開けるようになりました。ありがとうございます。 <(_ _)>
>さえらさん
こんにちは。
ご無沙汰してます(笑)。
久々のご利用&ご連絡ありがとうございます。
ではでは!
初めまして。
昨日からブログを始めて
ブログのカスタマイズでここに
たどり着き挑戦してみました!
出来上がった時はじ~んとしちゃいます^^
まだまだ色々いじってみたいけど
初心者の私には難しい事ばっかりで
四苦八苦してますが
頑張ります☆
>☆撫子さん
こんばんは。
カスタマイズご利用&ご連絡ありがとうございます。
うまくできたようで良かったです。
ではでは!
初めまして。いつもはSerene Bachの改造で大変お世話になっているのですが、今回初めてFC2ブログの改造においても色々と参照させて頂いております。
ですが追記文章の折り畳み、試してみたのですが、うまくいきません。
ブラウザはIE7.0です。safariでも動作確認はしています。
scriptaculous-jsは最初、現在の最新版を使ったのですがうまくいかなかったので、こちらのエントリーで使用されている1.7.0を再度DLして試してみました。が、やはりうまくいきません。キャッシュを消去したり色々あがいたのですが変わりません。
状態は「続きを読む」をクリックするとその個別ベージへ飛び、さらに追記文章は表示されていない、というものです。
普段SBなどでの改造はとてもサクサクできていただけに、困惑しております。テンプレートは公式のものに一切手を加えず使用しています(CSSもそのままです)
指定された位置に基本のタグを挿入しただけなのですが、原因がどうしてもわかりません。他の作者さんのテンプレートもあれこれ試しましたが同じでした。
宜しくご指導の程お願い致します。
すみません、すぐ上で質問した者ですが、自己解決致しました!
シンプルカテゴリ2階層、という共有プラグインを使用していたのですが、それとの相性が悪かったみたいです。何故かはさっぱりわかりませんが、プラグインを外したら何の問題もなく動作いたしました。
カテゴリ階層化は他にもまだ方法がありそうなので、プラグインを外してこちらの折り畳みスクリプトを導入したいと思います。
お騒がせ致しました。これからも活用させて頂きます、ありがとうございました!
>万年青さん
こんにちは。
ご連絡&情報ありがとうございました。
原因が判明して良かったです。
ではでは!
小粋空間さんのテンプレートを愛用させていただいてるものです。
この記事にコメントするようなことかとちょっと悩みましたが、書かせていただきます。
追記のリンクをクリックしたら、当たり前ですが、追記が表示されますよね。
そのとき、本文を表示しないで、追記だけが表示されるにはどうすればよろしいでしょうか?
もしこのカスタマイズ方法が書いてある記事があればURLを教えてください。
見つからなかったもので・・・
お時間があれば結構ですので、よろしくお願いいたしますm(_ _)m
>ラム肉さん
こんばんは。
ご質問の件ですが、要するに
・追記を表示したときに本文を非表示にする
・追記を非表示にしたときに本文を表示する
ということでしょうか。
であれば、動作が確認できしだい、別途エントリーしたいと思います。しばらくお時間ください。
速いご返答ありがとうございます。
>・追記を表示したときに本文を非表示にする
・追記を非表示にしたときに本文を表示する
はい、そうです。
気長に待たせていただきます^^
わあ、ずっと探してたんです。
追記を閉じたまま個別ページに飛ぶ方法。
こちらで教えて頂いたとおりにカスタマイズしたら、イッパツでうまく行きました。
ああでもない こうでもないと弄り回した挙句、諦めていたのですごくうれしいです。
ホントに有難うございます!!!
これから自分でも調べるんですが
さっそくエントリーした追記に 画像を貼ったら左端にべったり寄っちゃいました。
ajax~のプロパティでマージンを設定しても「追記を読む」が動くだけなんですが
どの部分を弄ったら表示位置を動かせるのでしょうか。宜しければご教授いただけると幸いです。
(テンプレート次第なんだから判る訳ないでしょ!といった質問内容でしたらごめんなさい。無知を笑ってやってください)
深い知識を誇っていらっしゃるだけでなく、気さくに皆さんに答えていらっしゃるお姿にも感服いたしました。ますますのご隆盛をお祈りいたします。
>umiさん
こんばんは。
ご返事遅くなり申し訳ありません。
ご利用ありがとうごじいます。
ご質問の件ですが、設定しているブログのURLをお知らせ頂けますでしょうか。
それではよろしくお願い致します。
いつも使いやすいスクリプトをありがとうございます。ありがたく利用させて頂いています。
この折りたたみ、スクリプタキュラス以外のライブラリ以外では作れないでしょうか?
どうもqlook解析と相性が悪いようで、解析を付けるとアコーディオンしなくなってしまうんです…
呟きでした
>ととさん
こんばんは。
ご質問の件ですか、他のライブラリでも作ることはできると思います(着手するという意味ではありません)。
qlook解析に依頼するのも手だと思います。
それではよろしくお願い致します。
大変大変御無沙汰しています。以前は別サイトにてお世話になっていました。敢えて伏せています(笑)。また、先日はBlogPeopleにてリンク有り難うございました。
今はFC2blogにていろいろと試している最中で、この折りたたみカスタマイズも早速導入させていただきました。丁寧な解説に助けられ、動作自体は問題く導入出来たのですが、一度開いた後にたたんだ際、表示が「続きを隠す」のままになってしまいます。他のスクリプトが干渉している可能性もありますでしょうか。是非ともアドバイスをいただけますと幸いです。
自己レスです。
どうもプラグインのどれかが干渉しているようです。ページを全て読み込む前では表示がキチンと切り替わりますが、読み込んだ後だと表示が元に戻らない状態です。もう少しトライしてみます。
>parkinglineさん
こんにちは。
よく分かりませんがご無沙汰してます(笑)。
ご質問の件ですが、こちらで確認した限りでは、右サイドバーの「Pingoo! new entries」にある、
<script type="text/javascript" src="http://pingoo.jp/js/prototype.js"></script>
を削除したところで正常に動作するようになりました。
それではよろしくお願い致します。
早々の御返事有り難うございます。
何故か「Pingoo!」は全然疑ってみませんでした(汗)。
確かに外してみると問題ないです。
干渉するかしないかは地道に調べていくしかないですね。余計なお手数をおかけして申し訳ありませんでした。
はじめまして。
今回ブログを開設しようということで、いろいろカスタマイズをしてますが
こちらのサイトにはとてもお世話になってます。
ありがとです。
質問なんですが
この折りたたみを使おうとしているのですが
追記部分のスタイルがおかしくなってしまうんです。
本文と同様のスタイルをしようしたいのですが
その設定はどこですればよいのでしょうか?
「続きを読む」等は
.ajax-entry-more-link {
/* 任意のプロパティを設定 */
}
で設定できたのですが…
お時間のあるときにでも、ご教授お願いします。
申し訳ないです。自己解決しました。
を
>ぴろさん
こんばんは。
ご連絡ありがとうございました。
ご質問の件、自己解決されたようで良かったです。
ではでは!
はじめまして。
こちらでは いろいろと勝手にお世話になっております。
是非、こちらの追記の折りたたみも使ってみたい!!と思ったのですが
「ファイルのアップロード」のところで問題が起きました。
アップロードしたファイルのURLが開けないのです。
発行元が不明でデジタル署名がないからだそうです。
この場合、どう対処したらよろしいのでしょうか?
ご多忙とは思いますが 是非返答よろしくお願いいたします。
始めまして。
こちらを参考に追記の折りたたみを頑張って付けてみたんですが、少し不具合が…。
記事の折りたたみ自体はokなんですが、「その記事自体」を開いたときに、
追記の部分が2個表示されてしまいます…。
私のブログの場合は、動画を追記に書いているのですが、動画が2個も表示されてます。
htmlで間違ってる所があるんでしょうか。
なにかアドバイスをよろしくお願いします…。
>魔法使いさん
こんばんは。
ご質問の件ですが、当方の環境で拝見する限りでは特に重複することなく閲覧できています。
ブラウザのキャッシュをクリアするか別のブラウザやPCでご覧になってみてください。
それではよろしくお願い致します。