<< カレンダー | Main | プルダウンメニュー >>
Top ＞ FC2ブログ ＞ カスタマイズ ＞ ツリー化 [全て開く]
2011年4月 8日

FC2ブログでサブカテゴリリストをツリー化する

April 8,2011 12:55 AM
Tag：[, ]
Permalink

FC2ブログでサブカテゴリリストをツリー化するカスタマイズを紹介します。

変更後

１．概要

FC2ブログのカテゴリにはサブカテゴリがサポートされており、カテゴリを親子関係で管理できます（2階層まで）。これに伴い、サイドバーのサブカテゴリリストも次のように階層表示やツリー化による表示が可能です。

変更前
変更前

変更後（階層表示）
階層表示

変更後（ツリー化）
変更後

本エントリーでは、階層表示するカスタマイズとツリー化するカスタマイズを紹介します。

２．サブカテゴリの作り方

まず、FC2ブログでサブカテゴリを作る方法です。

ブログ管理画面の「環境設定」にある「カテゴリの編集」をクリック。

カテゴリの編集

カテゴリ一覧が表示されるので、サブカテゴリにしたいカテゴリの「子」列にチェックを入れます。

カテゴリ一覧

上の画面の例では、「テンプレート」「カスタマイズ」が「ブログ」カテゴリのサブカテゴリ、「趣味」「食事」が「日記」カテゴリのサブカテゴリになります。

サブカテゴリリストには管理画面に表示されている順番がそのまま再現されます。順番を入れ替えたい場合は、「位置」列や「移動」列を利用してください。

３．サブカテゴリリストを階層表示する

サブカテゴリリストを階層表示にするには、「HTML」にあるサブカテゴリリストを表示するテンプレートを次の内容に入れ替えます。ツリー化する場合も本手順を実施してください。

<div class="sidetitle">
Categories
</div>
 
<div class="side">
<ul>
<!--category-->
<!--category_parent-->
<li><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a> <ul class="tree">
<!--/category_parent-->
<!--category_sub_hasnext-->
<li><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a></li>
<!--/category_sub_hasnext--> 
<!--category_sub_end-->
<li class="end"><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a></li></ul></li>
<!--/category_sub_end-->
<!--/category-->
</ul>
</div>

カテゴリリストで利用可能なテンプレートタグは次の通りです。

タグ意味
<!--category-->
　　　　　　：
<!--/category-->		カテゴリリストを表示させるブロック
<!--category_parent-->
　　　　　　　　　：
<!--/category_parent-->		親カテゴリを表示させるブロック
<!--category_nosub-->
　　　　　　　　　：
<!--/category_nosub-->		サブカテゴリを持たないカテゴリで表示するブロック
<!--category_sub_begin-->
　　　　　　　　　　：
<!--/category_sub_begin-->		先頭のサブカテゴリで表示するブロック
<!--category_sub_hasnext-->
　　　　　　　　　　　：
<!--/category_sub_hasnext-->		最後のサブカテゴリ以外で表示するブロック
<!--category_sub_end-->
　　　　　　　　　：
<!--/category_sub_end-->		最後のサブカテゴリのみで表示するブロック
<%category_no>カテゴリ番号を表示
<%category_link>カテゴリページのURLを表示
<%category_name>カテゴリ名を表示
<%category_count>カテゴリに属する記事数を表示

４．サブカテゴリリストをツリー化する

続いてツリー化のためのカスタマイズを行います。

４．１ ツリー画像のアップロード

まず、ツリー用画像を以下からダウンロードしてください。ファイル名は４．２項のCSSで利用するので、それぞれ「tree_lst.gif」「tree_end.gif」にリネームしておいてください。

ダウンロードしたツリー用画像を、ブログ管理画面の「ツール」にある「ファイルアップロード」を利用してアップロードします。

ファイルアップロード

アップロードしたファイルのURLは４．２項のCSSで利用します。URLはアップロードしたファイルの一覧に表示されている画像をクリックしてアドレスバーからコピーするか、右クリックで取得してください。

ファイルの一覧

４．２ CSSの設定

CSSに次の内容を設定します。赤色の部分は、４．１項でアップロードした画像のURLを設定してください。

ul.tree {
    margin: 0 0 0 3px;
}
ul.tree li {
    padding: 0 0 0 13px;
    background-image: url(http://.../tree_lst.gif);
    background-position: 0 0;
    background-repeat: no-repeat;
}
ul.tree li.end {
    background-image: url(http://.../tree_end.gif);
}

これでサブカテゴリリストがツリー化表示されれば完成です。

Comments [2] | Trackbacks [1]
2011年1月23日

FC2ブログ・プラグイン「最新の記事＋コメント」の使い方

January 23,2011 1:23 AM
Tag：[, , ]
Permalink

FC2ブログで人気の共有プラグイン「最新の記事＋コメント」は、最近の記事表示と最近のコメントを同時に表示するものです。コメントは記事毎にまとめて表示し、折りたたみも可能です。

最新の記事＋コメント

コメントを折りたたんだ状態
最新の記事＋コメント

本エントリーでは「最新の記事＋コメント」の設定・カスタマイズと、当ブログで公開している「追記文章の折りたたみ 2.0 for FC2 ブログ」を併用したときに発生する不具合の解消方法を説明します。

１．「最新の記事＋コメント」の設定

FC2ブログ管理画面の「環境設定」の「プラグインの設定」をクリック。

FC2ブログ管理画面

「プラグインの設定」の「共有プラグイン追加」をクリック。

プラグインの設定画面

「最近の記事＋コメント」で検索。

共有プラグイン追加画面

これでプラグインが表示されるので、「名前」のリンクまたは画像リンクをクリック。

プラグイン検索結果

ダウンロード設定を行って、ダウンロードをクリックすれば完了です。

プラグイン詳細

２．「最新の記事＋コメント」のツリーをきれいに表示する

冒頭のサンプルのようにツリーをきれいに表示するには、「FC2ブログの「最近の記事＋コメント」プラグインをきれいなツリーにする」のカスタマイズを行ってください。

カスタマイズ前
最新の記事＋コメント（カスタマイズ前）

カスタマイズ後
最新の記事＋コメント（カスタマイズ後）

３．追記文章の折りたたみとの併用

また、当サイトで公開している「追記文章の折りたたみ 2.0 for FC2 ブログ」は、追記文章の折りたたみをスクロール表示するものです。

追記文章の折りたたみ

この「追記文章の折りたたみ」を利用した場合、「最新の記事＋コメント」の部分に「原因不明のエラーが発生しました。作者に連絡すれば、もしかすると対応できるかもしれません。」というメッセージが表示され、元のリストが正常に表示されなくなる不具合があります。

「最新の記事＋コメント」のエラー

「最新の記事＋コメント」が正常に表示されない原因は、「追記文章の折りたたみ 2.0 for FC2 ブログ」で使っているprototype.js と「最新の記事＋コメント」のJavaScriptのコードが干渉しているためです。

これを解消するためには、以下の手順で「最新の記事＋コメント」のソースコードを修正してください。

プラグイン設定画面の「プラグインの管理」をクリック。

プラグイン設定画面

「最新の記事＋コメント」の「詳細」をクリック。

プラグイン管理画面

「HTMLの編集」をクリック。

プラグイン詳細設定画面

これでプラグインのソースコードがテキストエリアに表示されます。次に示すソースコードの編集後、「設定」をクリックしてください。

HTML編集画面

修正部分は以下です。青色のコード（計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);
        　　…後略…

実際の追加イメージを以下に示します。

追加イメージ1

追加イメージ2

これで元通り表示されるようになります。

最新の記事＋コメント（修正後）

Comments [2] | Trackbacks [0]
2006年3月22日

サイドメニューのツリー化スクリプト for FC2 ブログ

March 22,2006 1:10 AM
Tag：[, , ]
Permalink

サイドメニューのツリー化スクリプトMovable Type 用に公開しているサイドメニューのツリー化スクリプト（改）を FC2 ブログで適用する方法です。このカスタマイズを行うことで、スクリーンショットのようにツリー化の表示が可能になります。ツリー化が可能なリストは「最近のエントリー」「カテゴリーリスト」「アーカイブリスト」「リンク」です。

なお当サイトで公開している Movable Type ツリー化スクリプトを FC2 ブログに適用するとツリーがきれいに表示されません。その点に関しましては８項を参照ください。

１．maketree.js ダウンロード

下記のリンクをクリックしてスクリプトのページへジャンプしてください。そこで maketree.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合（Shift_JIS/EUC-JP等）は保存後、文字コードを適宜変更して再保存するか、script 要素の charset 属性にスクリプトの文字コードを指定してください（scriptタグの設定方法につきましてては３項に記します）。

２．maketree.js アップロード

ダウンロードした maketree.js を管理メニューの「ファイルアップロード」を利用してアップロードしてください。

３．リスト表示用タグ修正およびJavaScript起動用スクリプト設定

管理メニューの「テンプレートの設定」からテンプレートの編集欄の「修正」のリンクをクリックして、テンプレートの編集画面を表示します。そしてサイドバーのメニューリストのブロック変数の一部を修正します。ここでは公開テンプレートを例に、各サイドメニューの設定例を示します。黒字部分が公開テンプレートで設定しているブロック変数で、青色部分が新たに追加する部分です。赤色は任意の名称を設定します（タグの id 属性とスクリプト部分の名称が一致するように設定してください）。
他のテンプレートでも適用可能ですが、ツリー化を行う場合、ul と li を用いたリスト形式になっていることが前提となります。

Recent Entries

<!-- エントリーリスト開始 -->
<div class="sidetitle">
Recent Entries
</div>
 
<div class="side" id="entrylist">
<ul>
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>
<!--/recent-->
</ul>
</div>
<!-- エントリーリスト終了 -->
 
<script type="text/javascript">
<!--
generateNormalTree("entrylist");
//-->
</script>

Categories

<!-- カテゴリーリスト開始 -->
<div class="sidetitle">
Categories
</div>
 
<div class="side" id="categorylist">
<ul>
<!--category-->
<li><a href="<%category_link>" title="<%category_name>のページへ"><%category_name> [<%category_count>]</a></li>
<!--/category-->
</ul>
</div>
<!-- カテゴリーリスト終了 -->
 
<script type="text/javascript">
<!--
generateNormalTree("categorylist");
//-->
</script>

Archives

<!-- 月別アーカイブリスト開始 -->
<div class="sidetitle">
Monthly Archives
</div>
 
<div class="side" id="archivelist">
<ul>
<!--archive-->
<li><a href="<%archive_link>"><%archive_year>年<%archive_month>月</a> [<%archive_count>]</li>
<!--/archive-->
</ul>
</div>
<!-- 月別アーカイブリスト終了 -->
 
<script type="text/javascript">
<!--
generateNormalTree("archivelist");
//-->
</script>

Links

<!-- リンク開始 -->
<div class="sidetitle">
Links
</div>
 
<div class="side" id="linklist">
<ul>
<!--link-->
<li><a href="<%link_url>" target="_blank"><%link_name></a></li>
<!--/link-->
</ul>
</div>
<!-- リンク終了 -->
 
<script type="text/javascript">
<!--
generateNormalTree("linklist");
//-->
</script>

４．maketree.js インクルード文挿入

HTMLテンプレートの <head>～</head> の間に下記のタグを追加してください。FC2ブログの文字コードはEUCですので、スクリプトの文字コード（utf-8）を示す青色の charset 属性は必須です。 

<script type="text/javascript" src="<%url>file/maketree.js" charset="utf-8"></script>

５．画像のダウンロード

下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。

実線：tree_lst_solid.gif / tree_end_solid.gif
点線：tree_lst_dotted.gif / tree_end_dotted.gif

保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。なお実線につきましては以前我楽さんより提供いただいたものをそのまま使っています。点線バージョンはたいしたものではありませんので腕に自信のある方は作り直されることをお勧めします。

６．画像の配置

ダウンロードした画像を、管理メニューの「ファイルアップロード」を利用してアップロードしてください。

７．スタイルシート追加

スタイルシート（style.css）の.sideの下辺りに下記のクラス指定を追加します。

ul.tree {
    margin: 0 0 0 3px!important;
    padding: 0!important;
    font-size: 9px;
    list-style: none!important;
}
ul.tree ul {
    margin: 0!important;
    padding: 0!important;
}
ul.tree li {
    margin: 0!important;
    padding: 0 0 0 13px!important;
    background-image: url(http://domain/file/tree_lst.gif);
    background-position: 0 0;
    background-repeat: no-repeat!important;
    list-style: none!important;
}
ul.tree li.end {
    background-image: url(http://domain/file/tree_end.gif);
    list-style: none;
}

赤字部分については、アップロードしたファイルのURLを指定します（"http://ご自身のドメイン/file/画像ファイル"になると思います）。画像ファイル名はアップロードした画像ファイル名と合わせてください。

８．不具合の修正

Movable Type 用のツリー化スクリプトのエントリーをご覧になってカスタマイズされた場合、冒頭に記した通りツリーがきれいに表示されません。
これを修正するにはスタイルシートに

ul.tree li {
　　　：
    background-position: 0 0;
　　　：
}

を追加してください。きれいに表示されるようになります（７項のCSSには設定済です）。

2006.04.04 追記
リストから language 属性を削除しました（HTML4.01/XHTMLで非推奨あるいは廃止されているため）。

Comments [22] | Trackbacks [4]
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
loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.12