<< プルダウンメニュー | Main | 最近のコメント >>
Top ＞ FC2ブログ ＞ カスタマイズ ＞ 折りたたみ [全て開く]
2009年4月14日

FC2ブログでプラグインに表示しているブログパーツを折りたたむ

April 14,2009 1:55 AM
Tag：[, , ]
Permalink

当サイトで公開している、FC2ブログのカスタマイズ「サイドメニューの折りたたみ for FC2 ブログ」で、プラグインに対して折りたたみを設定するカスタマイズを紹介します。

おりたたんだ状態
　　　　　　　　　　↓
開いた状態

2009.04.22 「hatena chips - サイドメニュー折りたたみスクリプトを導入」を参考に、記事の２項を修正しました。

１．元記事のカスタマイズで正常に折りたためない問題

FC2ブログのプラグインとは、サイドバーにブログパーツを表示するための機能です。プラグインを利用するためには、テンプレートに下記のようなブロック変数を設定しておきます。

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle">
<%plugin_first_title>
</div>
 
<div class="fold">
<%plugin_first_content>
</div>
<!--/plugin_first-->
<!--/plugin-->

このプラグイン用ブロック変数は、テンプレート内に合計3つ（plugin_first/plugin_second/plugin_third）まで設定することができ、これを「プラグインカテゴリ1～3」と呼びます。

また、プラグインの中に表示するブログパーツは、次のように管理画面から設定します。ひとつのプラグインカテゴリには複数のブログパーツを表示することができます。

プラグイン設定画面

さて、プラグインに表示するブログパーツに対して折りたたみを行いたい場合、下記のように、プラグイン用ブロック変数に折りたたみの設定を行なっても正常に動作しません。

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle" id="hogename">
<%plugin_first_title>
</div>
 
<div class="fold" id="hogelist">
<%plugin_first_content>
</div>
 
<script type="text/javascript">
FoldNavigation('hoge','on',false);
</script>
<!--/plugin_first-->
<!--/plugin-->

理由は、ブロック変数内の内容は、設定したブログパーツ数だけ繰り返し表示されます。つまり、追加設定した、折りたたみ用の id 属性値（hogename/hogelist）は、追加したプラグイン数だけ繰り返し表示されてしまいます。

言い換えると、異なるプラグインパーツに同じ id 属性値が設定されるので、仮にプラグインカテゴリ1に3つのブログパーツを表示している場合、JavaScript で最初にみつけた id 属性のブログパーツ、つまり一番最初のブログパーツしか折りたたみができません。

ということで、以下、プラグインを使って表示するブログパーツで折りたたみを行う場合のカスタマイズを紹介します。

１．前処理

まず、「サイドメニューの折りたたみ for FC2 ブログ」の１～３項の設定を行います。

２．HTMLの修正

テンプレート編集画面（HTML編集）のプラグイン用ブロック変数をさがし、次の青色部分の class 属性を追加してください。

プラグインカテゴリ1の場合

<!--plugin-->
<!--plugin_first-->
<div class="foldtitle" id="fold<%plugin_first_no>name">
<%plugin_first_title>
</div>
 
<div class="fold" id="fold<%plugin_first_no>list">
<%plugin_first_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_first_no>','on',false);
</script>
<!--/plugin_first-->
<!--/plugin-->
プラグインカテゴリ2の場合 
<!--plugin-->
<!--plugin_second-->
<div class="foldtitle" id="fold<%plugin_second_no>name">
<%plugin_second_title>
</div>
 
<div class="fold" id="fold<%plugin_second_no>list">
<%plugin_second_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_second_no>','on',false);
</script>
<!--/plugin_second-->
<!--/plugin-->

プラグインカテゴリ3の場合

<!--plugin-->
<!--plugin_third-->
<div class="foldtitle" id="fold<%plugin_third_no>name">
<%plugin_third_title>
</div>
 
<div class="fold" id="fold<%plugin_third_no>list">
<%plugin_third_content>
</div>
 
<script type="text/javascript">
FoldNavigation('fold<%plugin_third_no>','on',false);
</script>
<!--/plugin_third-->
<!--/plugin-->

class 属性を設定するポイントは次の2つです。

  • <%plugin_first_title> を括っている (X)HTML 要素に、class="foldtitle" を設定する。
  • <%plugin_first_content> を括っている (X)HTML 要素に、class="fold" を設定する。

設定が終わったら「更新」をクリックします。

３．スタイルシートの修正

テンプレート編集画面（スタイルシート編集）の任意の場所に、下記の CSS を追加してください。

.foldtitle a {
    width: auto;
}
 
/* 通常 */
.foldtitle a:link,
.foldtitle a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999; /* 枠線 */
    color:#666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    text-decoration: none;
}
 
/* マウスポイント時 */
.foldtitle a:hover {
    padding: 2px;
    border: 1px solid #999; /* 枠線 */
    color: #fff; /* 文字色 */
    background-color: #999; /* 背景色 */
    text-decoration: none;
}

配色等のデザインは、CSS に記載しているコメントを参考に適宜変更してください。

設定が終わったら「更新」をクリックします。これでページを開いて、ブログパーツで折りたたみができれば完成です。

2009.05.19
スタイルシートのセレクタ名が誤っていたので修正しました。

Comments [10] | Trackbacks [0]
2007年6月 1日

サイドメニューの折りたたみ for FC2 ブログ

June 1,2007 2:05 AM
Tag：[, , ]
Permalink

FC2ブログでのサイドメニューの折りたたみカスタマイズを紹介致します。

いつもであれば、当サイト配布のテンプレートをサンプルに説明するのですが、「他のテンプレートで折りたたみカスタマイズは利用できないでしょうか？」というご質問を頂きましたので、ここでは共有テンプレートの「do_qp_dot_3c」を例に説明します。

このカスタマイズを行うことで下記のような折りたたみを行うことができます。

サイドメニューの折りたたみ for FC2 ブログ

なお、当サイトで配布している FC2 ブログテンプレートの折りたたみについては下記のサイトで公開されています。

注：ここではプラグインを例に説明してますが、プラグイン以外のものも、「タイトル（を括るタグ）」＋「メニューリスト（を括るタグ）」というHTMLマークアップになっていれば、何でも折りたためます。

１．折りたたみスクリプトのダウンロード

下記のリンクよりスクリプトのページにジャンプし、menufolder.js のリンクをクリックして、スクリプトファイルをダウンロードしてください。

download

２．折りたたみスクリプトのアップロード

[ツール]→[ファイルのアップロード]よりダウンロードしたファイルをアップロードします。

ファイルのアップロード

アップロード先のURLを次項で利用するので、アップロードした後、IEであれば「表示」のリンクを右クリックして「ショートカットのコピー」を選択します。

URLのコピー

これでクリップボードにURLがコピーされました。注：左クリックはしないでください。

３．script 要素追加

下記の script 要素を、HTMLテンプレートの </head> の直前に追加してください。

<script type="text/javascript" src="[menufolder.js の URL]" charset="utf-8"></script>

[menufolder.js の URL] には、先程コピーしたURLを貼り付けてください。

４．プラグイン表示用タグの修正

サイドメニューを表示するプラグインに対して修正を行ないます。下記のように青色部分（3ヶ所）を追加してください。

<!--plugin-->
<!--plugin_first-->
 
<div class="left_body">
 
<h3 style="text-align:<%plugin_first_talign>" id="plugin1name"><%plugin_first_title></h3>
 
<div class="menu_text" id="plugin1list">
 
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description></p>
 
<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2></p>
 
</div>
 
<script type="text/javascript">
FoldNavigation('plugin1','on',false);
</script>
</div>
<!--/plugin_first-->
<!--/plugin-->

ご利用になるテンプレートによってマークアップが若干異なるかもしれませんが、基本は

  • メニュータイトルを表示する要素（例では h3 要素）に id="pluginnname" を追加（x は数字）
  • メニューリスト全体を括る要素（例では div 要素）に id="pluginnlist" を追加（x は数字）
  • プラグインの最後の方に script 要素を追加

となっています。

n の意味ですが、2つめのプラグインに設定する場合は id="plugin2name" と id="plugin2list"、3番目のプラグインには id="plugin3name" と id="plugin3list" という風にしてください。

また、script 要素の中にある

FoldNavigation('plugin1','on',false);

も、2つめのプラグインは

FoldNavigation('plugin2','on',false);

となります。3つめの場合は 'plugin3' と設定してください。

５．スタイルシートの修正

下記 をスタイルシートに追加してください。

h3 a {
    width: auto;
}
h3 a:link,
h3 a:visited {
    display: block;
    text-decoration: none;
}
h3 a:hover {
    text-decoration: none;
}

この設定はメニュータイトルのリンクを文字以外の部分でも選択できるようにするためのものです。

他のテンプレートで、タイトル部分のタグが h3 ではなく、div であれば

div a {
    width: auto;
}
div a:link,
div a:visited {
    display: block;
    text-decoration: none;
}
div a:hover {
    text-decoration: none;
}

としてみてください（div では他の表示に影響があるかもしれませんので、クラス属性等の設定が必要かもしれません）。

Comments [20] | Trackbacks [0]
2007年4月19日

「追記文章の折りたたみ 2.0」でIE7の不具合を解消する

April 19,2007 1:33 AM
Tag：[, , ]
Permalink

「追記文章の折りたたみ 2.0」というカスタマイズで scriptaculous の Effect.BlindDown および Effect.BlindUp を利用していますが、「IE7.0では追記部分がずれて表示される」という情報を頂きました。また、折りたたみリンクにある実体参照していない文字「«」「»」の文字化けも同時に確認されていますので、このエントリーで解消方法を示します。

とりあえず IE7 をお持ちの方はサンプルの修正前後の折りたたみ動作をご確認ください。

追記文章の折りたたみ 2.0 サンプル（修正前）
追記文章の折りたたみ 2.0 サンプル（修正後）

ここでは Movable Type をサンプルにしていますが、FC2 ブログ版の「追記文章の折りたたみ 2.0 for FC2 ブログ」も同様の対処が必要と思われます。

１．表示がずれる不具合の解消

確認したところ、Effect する対象のオブジェクト（この場合は追記部分全体）を括る要素や親要素に margin が指定されている場合、IE7では margin 指定が無効になるケースがあるようです。

Movable Type のデフォルトテンプレートではこの事象が発生しなかったので、CSS の差分を確認したところ、公開テンプレートについては下記のように青色の width プロパティを設定することで回避できました（WindowsXP + IE7/Firefox2/Opera9 で確認しています）。XML宣言の有無は関係ありません。

/* エントリー */
.entry {
    width: auto;
    margin: 0 5px 15px;
    color: #36414d;
    background: #ffffff;
    font-size: 12px;
    line-height:150%;
    word-break: break-all;
}
.entry-content {
    width: 100%;
}

注：.entry の width プロパティに 100% を与えると他の不具合が生じます。

２．文字化けの解消

折りたたみリンクにある「«」や「»」は実体参照しないと IE7 では文字化けが発生します。それぞれ「&laquo;」および「&raquo;」に修正してください。

以上です。
なおすべてのケースを調査している訳ではないので、適用しているテンプレートの CSS によって事象や対処が異なるかもしれません。

Comments [2] | Trackbacks [0]
2007年3月15日

追記文章の折りたたみ 2.0 for FC2 ブログ

March 15,2007 12:50 AM
Tag：[, ]
Permalink

先日公開した「追記文章の折りたたみ 2.0」の FC2 ブログ版カスタマイズをご紹介します。

１．特徴

  • JavaScript エフェクトライブラリ script.aculo.us（スクリプタキュラス）を利用し、「続きを読む」リンクをクリックすると追記文章をスライドダウンで表示します。
  • JavaScript が無効の場合はエントリー・アーカイブにジャンプします。
  • 「続きを隠す」リンクは追記文章の前後に表示されますので、長い追記文章でも折りたたみやすくなっています。
  • ライブラリファイルを編集せずに折りたたみ速度の変更が可能です。

２．サンプル

追記文章の折りたたみ 2.0 サンプル（Movable Type のサンプルです）

３．script.aculo.us のインストール

script.aculo.us のページの「get it already!」の下にある「Downloads page」のリンクをクリック。

script.aculo.us のページ

次のページで「current version」の下にある「scriptaculous-js-1.7.0.zip（または拡張子が tar.gz / tar.bz2）」のリンクをクリック。バージョン 1.7.0 は2007年3月現在です。

script.aculo.us のページ

ダウンロードアーカイブを解凍して下記の4ファイルを、[ツール] - [ファイルアップロード] を利用してアップロードします。

/lib/prototype.js
/src/controls.js
/src/effects.js
/srcscriptaculous.js

４．テンプレートの修正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秒に設定されています。

５．テンプレートの修正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 で正常に動作しなくなります）。

６．CSS

「続きを読む」「続きを隠す」のリンクに class 属性 ajax-entry-more-link を与えています。必要に応じて設定してください。

.ajax-entry-more-link {
    /* 任意のプロパティを設定 */
}

７．その他

HTML ページの1行目に XML 宣言がある場合、IE6 では動作がややスムーズではありません（開く瞬間と閉じた瞬間にビクッとなります）。サンプルの公開テンプレートは XML 宣言を外しています。

2007.03.19 追記
追記を閉じた時に記事タイトルまたは折りたたみマーク位置に戻るリストを追加しました。

Comments [32] | Trackbacks [3]
Now loading...
Introduction
List of "折りたたみ"
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by：FeedBurner

loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.02