未知のウイルスへの対応力が違います。「ESET ファミリー セキュリティ」 公式サイト
未知のウイルスへの対応力が違います。「ESET ファミリー セキュリティ」 公式サイト

スポンサーサイト

一定期間更新がないため広告を表示しています

   拍手する



  • 2014.03.26 Wednesday
  • -
  • -
  • -
  • -
  • -
  • by スポンサードリンク

カテゴリーリストをツリー化するスクリプト:JUGEM

JUGEMテーマ:JUGEM

カテゴリーリストをツリー化するスクリプト


カテゴリーをツリー化することによって、ブログの見映えがよくなるばかりでなく、
ブログ訪問者様にとっても、メニューがとても分かりやすくなると思います。

私は前のテンプレートのころから、今から紹介するスクリプトを
使用させていただいていたのですが、テンプレートを変えるたびに
設定の方法を忘れてしまい、ネット検索を繰り返す有り様でした。

なので、自分の忘備録を兼ねて、カテゴリーをツリー化する方法を
このブログにまとめさせていただくことにしました。

あなたの参考になればうれしいです。
 

1. ブログの管理画面から [書く] - [カテゴリーの編集] をクリックします。

[カテゴリーの編集] をクリックします。



2. サブカテゴリー表示にしたいカテゴリー名を、
"メインカテゴリー名(サブカテゴリー名)" という表示に変更します。

カッコは半角で入力します。

メインカテゴリー名(サブカテゴリー名) という表示に変更します。


この場合、"Windows 7""Windows XP" がメインカテゴリー、
"セットアップ""操作方法" など、カッコの中に記載している項目が
サブカテゴリーになります。



3. 次に、テンプレートを編集します。
[デザイン] - [HTML・CSS編集] をクリックします。

[デザイン] - [HTML・CSS編集] をクリックします。



4. HTML 編集フォームの中から、{category_list} を探し、以下のように編集します。
<div id="categorylist">{category_list}</div>



5. </body> の直前に以下のスクリプトを貼り付け、
[HTML を編集] ボタンをクリックします。

【注意】
このスクリプトは、stroll さん が公開してくださっているスクリプトです。
もうブログ自体は 3 年ぐらい更新していらっしゃらいませんが、
使用するときは感謝のコメントを一言していただければと思います。
(かくいう私もコメントしたのはついさっきですが...)
<script type="text/javascript" language="javascript">
<!--
//カテゴリーリストでサブカテゴリーがあるっぽく表示する
//ツリー化スクリプト ver 2 edit by stroll
function makeTreeElements (idName,objList) {
  if (!objList.innerHTML) return;
  var objLink = objList.getElementsByTagName('a')[0];
  var linkUrl = objLink.getAttribute('href');
  if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
    var tmpText = objList.innerHTML.split("⇒");
    tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
    this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join('');
    this.elem = objLink.innerHTML;
  } else if (idName.indexOf('entry') > -1) {
    var tmpText = objList.innerHTML;
    tmpText.match(/¥((¥d¥d¥/¥d¥d)¥)/);
    this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
    this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
  } else if (idName.indexOf('link') > -1) {
    var tmpText = objList.innerHTML;
    if ( tmpText.match(/¥[(.+)¥](.+)/) ) {
      this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
      this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
    }
  } else if (idName.indexOf('category') > -1) {
    var tmpText = objList.innerHTML;
    if ( tmpText.match(/>(.+)¥((.+)¥).+(¥s¥(.+¥))/) ) {
      this.base = Array(RegExp.$1).join('');
      this.elem = Array('<a href="',linkUrl,'"> ',RegExp.$2, '</a>', RegExp.$3).join('');
    } else {
      this.base = Array('<a href="',linkUrl,'">',tmpText,'</a>').join('');
      this.elem = 'null';
    }
  }
  return this;
}
function createTreeList(idName,option) {
  var objFocus = this.document.getElementById(idName);
  if (!objFocus) return;
  if (!objFocus.innerHTML) return;
  var objLists = objFocus.getElementsByTagName('li');
  var linkList = new Array();
  var outText = new Array();
  var linkListNum = new Array();
  var count = 0;
  var tempDispNum = '';
  if (objLists.length > 0) {
    for (i=0;i<objLists.length;i++) {
      var chckFlag = true;
      var elemText = new makeTreeElements(idName,objLists[i]);
      if (!elemText.base || !elemText.elem) return;
      for (j=0;j<linkList.length;j++) {
        if (linkList[j].base.indexOf(elemText.base) > -1) {
          chckFlag = false;
          linkList[j][linkList[j].length] = elemText.elem;
        }
      }
      if (chckFlag) {
        var tmpNum = linkList.length;
        linkList[tmpNum] = new Array();
        linkList[tmpNum][0] = elemText.elem;
        linkList[tmpNum].base = elemText.base;
      }
    }

    if (idName == 'categorylist' && linkList.length > 0) {
      for (i=0;i<linkList.length;i++) {
        linkListNum[i] = 0;
        for (j=0;j<linkList[i].length;j++) {
          if (linkList[i][j] != 'null' && linkList[i][j].match(/¥s¥((.+)¥)/)) {
            linkListNum[i] = linkListNum[i] + parseInt(RegExp.$1);
          }
        }
      }
    }

    if (linkList.length > 0) {
      outText[outText.length] = '<ul>¥n';
      for (i=0;i<linkList.length;i++) {
        tempDispNum = '';
        if (idName == 'categorylist' && linkListNum[i] > 0) {
          tempDispNum = ' ('+linkListNum[i]+')';
        }
        outText[outText.length] = Array('<li>',linkList[i].base,tempDispNum,option.top).join('');
        if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
        for (j=0;j<linkList[i].length;j++) {
          if (linkList[i][j] != 'null') {
            outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
            outText[outText.length] = Array(linkList[i][j],option.leef).join('');
          }
        }
        outText[outText.length] = Array(option.btm,'</li>').join('');
      }
      outText[outText.length] = '</ul>¥n';
      objFocus.innerHTML = outText.join('');
    }
  }
}
var gTreeOption = new Array;
gTreeOption['sort'] = false;      /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = ' ├ ';      /* ツリー用マーク(通常) */
gTreeOption['end']  = '└ ';      /* ツリー用マーク(末端) */
gTreeOption['leef'] = '<br />¥n'; /* 各枝の末尾 */
gTreeOption['top']  = '<br />¥n'; /* ツリー本体の最初 */
gTreeOption['btm']  = '';         /* ツリー本体の最後 */
gTreeOption['num']  = 0;          /* ()の中身の数の合計数(値を変更しないでください) */

createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption);    // エントリリストのツリー化
createTreeList('commentlist',gTreeOption);  // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption);       // 最新トラックバックリストのツリー化
createTreeList('linklist',gTreeOption);     // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
// -->
</script>

以上の作業で、カテゴリーリストをツリー化する作業は完了です。

この方法は JUGEM ブログでの方法なので、
他のブログをご利用の場合は、また別のやり方になると思います。

   拍手する




スポンサーサイト

   拍手する



  • 2014.03.26 Wednesday
  • -
  • -
  • -
  • -
  • -
  • by スポンサードリンク

コメント
コメントする








   
この記事のトラックバックURL
トラックバック

profile

search this site.

recommend

links

categories

archives

ブログパーツ

Creative Commons

この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
Creative Commons License

ケーキ・和菓子

RSS / Atom

mobile

qrcode

PR


流行ったダイエット