ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - プラグインを折りたたみたい!

プラグインを折りたたみたい!

プラグインの折りたたみとは、プラグインの横にボタンを配置してそのボタンを押すとプラグインが開いたり閉じたりする機能です。プラグインがわからない人はプラグインって何?を見て下さい。
testプラグインの折りたたみの見本見本

プラグインにはカテゴリー、最近の記事・コメント・トラックバック、リンク、フリーエリアと様々なものがありますが、一回設置してしまえば、それぞれ後から個別に折りたたみするかしないか、また最初に開いた状態か閉じた状態かを設定できます。

ここではプラグイン1を折りたたみをする例で説明を進めていきます。
プラグインを折りたたみたい!共通編

【参考記事】 「JUGEMカスタマイズ講座」様:ナビゲーションの折り畳み  
         「アジアンビートカンケリキッズ」様;プラグインの折りたたみ

最初に管理画面のテンプレートの設定からHTMLの編集を開きます。そして一番下までスクロールさせていって下さい。すると一番下ぐらいに</body>というのが見つかると思います。見つからなかったら「Ctrl」+「F」を使って検索してみて下さい。

このブログでは・・・
</div>
<!-- **********mabody_ED********** -->

</body>
</html>
この様になっていました。見つかったらこの</body>のすぐ上に下記のものをコピーして張りつけます。

<script type="text/javascript">
<!--
function InitFoldNavi() {
 FoldNavigation('plugin_entry','on',true); //最近の記事
 FoldNavigation('plugin_comment','on',false); //最近のコメント
 FoldNavigation('plugin_tb','on',false); //最近のトラックバック
 FoldNavigation('plugin_archive','off',true); //月別アーカイブ
 FoldNavigation('plugin_category','off',true); //カテゴリー
 FoldNavigation('plugin_link','on',true); //リンク
 FoldNavigation('plugin_search','off',false); //ブログ内検索
 FoldNavigation('plugin_calender','on',false); //カレンダー
 FoldNavigation('plugin_profile','off',false); //プロフィール
 FoldNavigation('plugin_mail','off',false); //メールフォーム
 FoldNavigation('plugin_rss','off',false); //RSSフィード
 FoldNavigation('plugin_ad1','off',false); //アフィリエイト広告1
 FoldNavigation('plugin_ad2','off',false); //アフィリエイト広告2
}
function FoldNavigation(idName,initMode,viewNum) {
  var openMark = '▽'; /* 閉じている場合に開くためのマーク */
  var closeMark = '△'; /* 開いている場合に閉じるためのマーク */
  var preMark = true; /* マークの挿入位置。タイトルの前なら true、タイトルの後ろなら false */
  var idTitle = Array(idName,'name').join('');
  var idList = Array(idName,'list').join('');
  var objTitle = this.document.getElementById(idTitle);
  var objLists = this.document.getElementById(idList);
  if (!objTitle || !objLists) return;
  var dispMode = objLists.style.display;
  if (!dispMode) {
    var tmpText = Array('FoldNavigation(',"'",idName,"','chng','');return(false);").join('');
    var insMark = new Array();
    var insText = new Array();
    insMark[insMark.length] = Array('<a class="foldmark" href="#" onclick="',tmpText,'" onkeypress="',tmpText,'">').join('');
    insMark[insMark.length] = (initMode == 'off') ? openMark : closeMark;
    insMark[insMark.length] = '</a>';
    if (preMark) insText[insText.length] = insMark.join('');
    insText[insText.length] = objTitle.innerHTML;
    if (viewNum) {
      var objItems = objLists.getElementsByTagName('li');
      insText[insText.length] = Array(' <span>(',objItems.length,')</span>').join('');
    }
    if (!preMark) insText[insText.length] = insMark.join('');
    objLists.style.display = (initMode == 'off') ? 'none' : 'block';
    objTitle.innerHTML = insText.join('');
  } else if (initMode == 'chng') {
    var objMarks = objTitle.getElementsByTagName('a');
    for (i=0;i<objMarks.length;i++) {
      if (objMarks[i].className == 'foldmark') {
        objMarks[i].firstChild.nodeValue = (dispMode == 'none') ? closeMark : openMark;
      }
    }
    objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
  }
}
InitFoldNavi(); // ナビゲーションの折り畳み
// -->
</script>

もしこの折りたたみをやる前にツリー化をしていたなら</body>の上ではなく、ツリー化の時に挿入したものの上に入れて下さい。
ツリー化の時に入れたものの最初が・・・
<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
この様になっているはずだからこの上に入れます。

挿入できたらそのままHTMLの編集の画面で<!--plugin_first-->を探します。「Ctrl」+「F」を使って検索してみて下さい。

このブログの場合はこの様になっていました。
<!--plugin_first-->
<h2 id="<%plugin_first_tag>" style="text-align: <%plugin_first_talign>;"><%plugin_first_title></h2>
<div class="plugin_margin">
<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>
<!--/plugin_first-->
そしてこの<!--plugin_first--><!--/plugin_first-->で囲まれている中に<%plugin_first_description>があるか見てみます。
あれば、これとこれを囲っているタグを削除します。

<!--plugin_first-->
<h2 id="<%plugin_first_tag>" style="text-align: <%plugin_first_talign>;"><%plugin_first_title></h2>
<div class="plugin_margin">
<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>
<!--/plugin_first-->
探してみると、ありました。赤で書かれたタグが本体で、青で書かれたタグが囲っているタグです。僕の場合は<p>~~~</p>で囲われていましたが、他にも<div>~~~</div>で囲われている人もいると思います。
見つかった人はばっさり削除して下さい。また、見つからなかった人は何もしなくていいので次に進みます。

次は<%plugin_first_title>を探します。見つけたらこのタグを囲っているタグにid="<%plugin_first_description>name"を付け加えます。
<!--plugin_first-->
<h2 id="<%plugin_first_tag>" style="text-align: <%plugin_first_talign>;"id="<%plugin_first_description>name"><%plugin_first_title></h2>
<div class="plugin_margin">

<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
</div>
<!--/plugin_first-->
赤で書かれたタグが本体で、青で書かれたタグが追加したタグ。なぜここに追加するのかというと、オレンジで書かれたh2のタグで囲われているからです。

できたら次は<%plugin_first_content>を探します。見つけたらこのタグを囲っているタグにid="<%plugin_first_description>list"を付け加えます。
<!--plugin_first-->
<h2 id="<%plugin_first_tag>" style="text-align: <%plugin_first_talign>;"id="<%plugin_first_description>name"><%plugin_first_title></h2>
<div class="plugin_margin"id="<%plugin_first_description>list">

<%plugin_first_content>
<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description2>
</p>
</div>
<!--/plugin_first-->
赤で書かれたタグが本体で、青で書かれたタグが追加したタグ。なぜここに追加するのかというと、オレンジで書かれたdivのタグで囲われているからです。
どうしても囲っているタグがない人は、<div id="<%plugin_first_description>list">と</div>で<%plugin_first_content>を囲ってください。

ここまでできましたら、更新を押して保存をして下さい。これをやっておけば、後は個別に折りたたみにしたい物を選んで少し手を加えるだけで折りたたみができるようになります。

プラグインを折りたたみたい!個別編

では、個別に折りたたみをする為に管理画面から[プラグインの設定]の画面に移動します。

プラグインの設定
するとこの様な画面になります。そして今回はプラグイン1の折りたたみを設定したのだから、プラグイン1にあるものを選びます。ここでは最近のコメントを例に進めていきます。

image313.jpg
設定の変更を選ぶと、この画面になるので上部に記載するプラグインの説明文の所にplugin_commentと記入します。
これで完成です。実際にブログを確認してみると、最近の記事だけ折りたたみになります。

他のプラグインはこの様に記入します。

  1. カテゴリー        :plugin_category

  2. 最近の記事      ;plugin_entry

  3. 最近のコメント     ;plugin_comment

  4. 最近のトラックバック ;plugin_tb

  5. 月別アーカイブ    ;plugin_archive

  6. リンク          ;plugin_link

  7. カレンダー       ;plugin_calender

  8. ブログ内検索     ;plugin_search

  9. プロフィール      ;plugin_profile

  10. メールフォーム    ;plugin_mail

  11. rssフィード       ;plugin_rss

これ以外の物を折りたたみにしたいは、plugin_好きな文字(英数字)をプラグインの上部に記載するプラグインの説明文の所に記入します。
そしてHTMLの編集で、最初に挿入した長いタグの最初の部分のfunction InitFoldNavi() {~~~}の中にFoldNavigation('plugin_好きな文字','on',false); を追加して下さい。

続いて、最初に開いた状態と閉じた状態は('plugin_好きな文字','on',false)の赤字で書いた部分で決める事ができます。onと記入すると開いた状態、offと記入すると閉じた状態が最初の状態になります。
青字で書かれた所は、中身の数を表示するかしないかを決める事ができます。中身の数とは最近の記事なら表示する件数の事です。trueと記入すると数を表示して、falseと記入すると表示しません。
例えば、最近の記事は最初FoldNavigation('plugin_entry','on',true); //最近の記事と設定されているので、最初の状態は折りたたみが開いていて、数を表示するとなっています。それを最初は閉じた状態にしたければ、onのところをoffに書き直せば閉じた状態になります。

▽と△のマークを変えたければ・・・

var openMark = '▽'; /* 閉じている場合に開くためのマーク */
var closeMark = '△'; /* 開いている場合に閉じるためのマーク */
var preMark = true; /* マークの挿入位置。タイトルの前なら true、タイトルの後ろなら false */

ここの部分のマークを自分の好きなマークや文字にして下さい。
マークの位置も説明に書かれている通りにタイトルの前なら true、タイトルの後ろなら falseとして下さい。

もっと細かい設定などは「JUGEMカスタマイズ講座」さんのナビゲーションの折り畳みの記事を見ると書いてあります。

プラグイン2と3も折りたたみにするには、プラグイン1<!--plugin_first-->でやった事と同じ事をプラグイン2と3でもやればできます。その際にfirstの部分がプラグイン2ならsecond、プラグイン3ならthirdとすべて読み変えてやってください。もちろん削除や記入する時のfirstの部分もすべてsecond、thirdで削除、記入して下さい。

もしこの通りやっても折りたたみができない人は、<!--plugin_first-->の所を色々いじってるとできるようになるかも知れません。
僕もこのままやってもできなかったので、
<!--plugin_first-->
<h2 id="<%plugin_first_tag>" style="text-align
最初の部分の太字の所を削除したらできるようになりました!

できたので「アジアンビートカンケリキッズ」のbiscoさんにお礼を言に行く。

またどうしてもできない人は上記のお礼先にもっと簡単にできる方法(その1の部分)が掲載されていますので、そちらをチャレンジしてみて下さい。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
質問です・・
はじめまして。いつも参考にさせてもらってます!
この記事を参考に、プラグインの折り畳みをしてみました。
折り畳みは出来たのですが、プラグインの説明文に入力する、「plugin_好きな文字」が、ブログにも表示されてしまうんです。
(私のブログですと、トラックバックピープルや、リンクなどの所です)
表示されない方法などはあるのでしょうか?
アドバイスいただけると嬉しいですm(._.;)m
回答です。
はじめまして!
HTMLの編集の画面で<!--plugin_first-->の中にある<%plugin_first_description>を削除していないと「plugin_好きな文字」が表示されてしまうと思います。

<p style="text-align:<%plugin_first_ialign>">
<%plugin_first_description>・・・・・・(この部分)
</p>

一度確認してみて下さい。
ありがとうございます!
解決しました!
回答どうもありがとうございました!
どういたしまして!
無事にできた様で良かったですネ!
はじめまして^^
こんばんわ!
ずーっと面倒に思ってた、折りたたみですが、こちらのエントリーを見て、
がんばってみました♪

が、ちょっとわからないことが…

1.この方法だと、cookieで制御したりは出来ないんでしょうか?
  毎回開閉するのも面倒なような…

2.Firefoxでみると、開閉できるんですが、IEで見ると、リンクが貼られてないようで、
  まったく開閉できないようです…
  どこか間違ってるんでしょうか^^;

お忙しいとは思いますが、どうかお知恵をお貸しください;;
お手隙のときでかまいませんので、よろしくお願いします。
にゃんこさんへ
こんばんは。にゃんこさんのブログを見させてもらいました。

1.この方法はcookieで制御はできないです。cookieで記憶してくれると便利ですよね。

2.たぶんですが、IEだとHTMLの上部にある
<script language="JavaScript" type="text/javascript" src="http://blog58.fc2.com/u/utapyon/file/iepngfix.js"></script>
この部分のスクリプトと干渉してしまって上手くいかないのではないかな?と思いました。この部分のスクリプトは表示に使われているみたいなのではずすことができなさそうです。
なのでここで紹介している折りたたみ』は使えないですね。

変わりに「FC2ブログのテンプレート工房」さんの折りたたみ
http://10plate.blog44.fc2.com/blog-entry-154.htm
を使ってみてはどうでしょうか?
ありがとうございます。
こんばんわ。
詳しく教えてくださってありがとうございます。

ご指摘いただいたスクリプトは、テンプレートに組み込まれているものだったので、
他のテンプレートだと大丈夫なんでしょうねぇ;;
(共有テンプレのnight-town_b)

教えていただいた、「FC2ブログのテンプレート工房」さまのリンクが
切れてしまっていたので、他の方の為に一応書いておきますね^^
http://10plate.blog44.fc2.com/blog-entry-154.html

わざわざ他の方法をご紹介いただいてありがとうございました!
また、他にも色々カスタマイズしたいので、参考にさせていただきます^^



にゃんこさんへ
こんばんは。そうですね。大体のテンプレートは大丈夫なんですけど、たまに上手くいかないテンプレートもあるんですよね。
リンクの最後のLが切れてしまっていてすいません。(^^;;
わざわざ正確なリンクを張っていただいてありがとうございました!
もしかしたら・・・・
こんばんわ。
私もプラグインの折りたたみのテストをしてみました。

記事の通りにやって、なかなかできなくて

>僕もこのままやってもできなかったので、
><!--plugin_first-->
><h2 id="<%plugin_first_tag>" style="text-align
>最初の部分の太字の所を削除したらできるようになりました!

という記事を参考にやってみました。

その結果。

<!--plugin_first-->
<h2 style="text-align: <%plugin_first_talign>;"id="<%plugin_first_description>name"><%plugin_first_title></h2>
<div class="plugin_margin"style="text-align:<%plugin_first_align>" id="<%plugin_first_description>list">

この記述でなんとか折りたたみができました。

<h2 後の id="<%plugin_first_tag>"を消した場合は、もしかしたら
<div class="plugin_margin"の後に style="text-align:<%plugin_first_align>"が必要なのかな~と疑問に思い投稿しました。

HTMLがあんまりよく分からないので違っていたら申し訳ありません。
慧神 奈緒さんへ
テンプレを変更されたんですね。そしてこのブログと同じDW99さんのテンプレで全く同じものです。だから削除する所も全く同じなんですね。
style="text-align:<%plugin_first_align>"はプラグインの中身の位置を決めるタグですけど、もともとこのテンプレにはついてなかったと思います。だからこの部分がなくてもこのカスタマイズには関係なく折りたたみできるようになりませんでしたか?
おー!!
こんばんわ。
今その部分を消してみたら、出来ました・・・・。
お騒がせしました・・・・。

うーん。最初にやったときは出来なくて、
JUGEM様の所のものをコピーして、再びチャレンジしたらできのです。

何が違っていたのか出来なかったテンプレートと並べてみたら、その部分くらいしか違いが見当たらなかったもので・・・・勘違いのはやとちりでした。
どこか他に原因があったんですね;;

お手数おかけしました。
それとテンプレートが一緒なんですね!!
面影が感じられないくらいのカスタマイズ!!

わたしも見習いたいかぎりです。
慧神 奈緒さんへ
できなかった原因はid="<%plugin_first_tag>"ですね。
あとから付け足したid="~"によって折りたたみができるようになるんですけど、このテンプレに最初からついているid="<%plugin_first_tag>"によって邪魔されてしまって上手く折りたたみにならなかったんですよ。

テンプレートは色々いじってここまできました。でも実はトップページが納得いってないんです。移り変わりの大まかな変遷を自己紹介などに紹介してあるので良かったどうぞ!
いつもお世話になっています♪
お久しぶりです<(_ _*)>
ブログを続けていると 「月間アーカイブ」が伸びてきて(?)
非表示にするのも淋しいしなぁ。何か解決できないかと 探していました。
とっても参考になり、折り畳みにも成功しました♪
今後とも お世話になると思いますが。よろしくお願いします♪
えあさんへ
お久しぶりです!
確かにブログを続けると 「月間アーカイブ」は伸びてしまって、なんかかっこ悪く感じてしまいますよね。折りたたみの記事がお役に立ててよかったです。
こちらこそよろしくお願いしますね♪
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/172-e8716752   

Template Designed by DW99