初心者でもできる簡単FC2ブログの作り方

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

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

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

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

このブログでは・・・
この様になっていました。見つかったらこの</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>の上ではなく、ツリー化の時に挿入したものの上に入れて下さい。
ツリー化の時に入れたものの最初が・・・
この様になっているはずだからこの上に入れます。

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

このブログの場合はこの様になっていました。
そしてこの<!--plugin_first-->と<!--/plugin_first-->で囲まれている中に<%plugin_first_description>があるか見てみます。
あれば、これとこれを囲っているタグを削除します。

探してみると、ありました。赤で書かれたタグが本体で、青で書かれたタグが囲っているタグです。僕の場合は<p>〜〜〜</p>で囲われていましたが、他にも<div>〜〜〜</div>で囲われている人もいると思います。
見つかった人はばっさり削除して下さい。また、見つからなかった人は何もしなくていいので次に進みます。

次は<%plugin_first_title>を探します。見つけたらこのタグを囲っているタグにid="<%plugin_first_description>name"を付け加えます。
赤で書かれたタグが本体で、青で書かれたタグが追加したタグ。なぜここに追加するのかというと、オレンジで書かれたh2のタグで囲われているからです。

できたら次は<%plugin_first_content>を探します。見つけたらこのタグを囲っているタグにid="<%plugin_first_description>list"を付け加えます。
赤で書かれたタグが本体で、青で書かれたタグが追加したタグ。なぜここに追加するのかというと、オレンジで書かれたdivのタグで囲われているからです。
どうしても囲っているタグがない人は、<div id="<%plugin_first_description>list">と</div>で<%plugin_first_content>を囲ってください。

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


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

設定の変更を選ぶと、この画面になるので上部に記載するプラグインの説明文の所に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ブログ ユーザーフォーラムへ。