アニメ・マンガ・ゲームの感想やTCG、日々の出来事など。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Posted by 和
 
[スポンサー広告
FC2ブログの親子カテゴリのたたみ方
私のブログを見てもらえば分かるとおり、カテゴリの折りたたみをする方法をメモしておきます。

まず、FC2の管理画面から、
「環境設定」→「プラグインの設定」→PC用「公式プラグイン追加」→「カテゴリ」を追加してください。(カスタマイズ向けでなくてもOK。)


先に親カテゴリと子カテゴリを作っておきましょう。管理画面から、
「環境設定」→「カテゴリの編集」で、カテゴリ一覧の表に「子」というチェックボックスがあるかと思います。

この「子」チェックボックスにチェックを入れると、そのカテゴリが一つ上のカテゴリの「子」として認識されます。

例えば、このブログで言うと、「ゲーム」のカテゴリが親「パワポケ」「東方」などのカテゴリが子になっています。
なので、「パワポケ」「東方」などの子にしたいカテゴリを全て「ゲーム」の下に持ってきます。
(並べ替えのやり方は一覧表の上に書いてあります。)

後は、子にしたいカテゴリの「子」チェックボックスにチェックを入れ、表の下にある「修正」ボタンを押せばOKです。
(この時点でちゃんとツリー化できているか確認しておきましょう。)

詳しい導入方法はこちらに載ってます↓
http://staff.blog1.fc2.com/blog-entry-349.html


以上の操作でツリー化できたら次に進みます。
※この時点では折りたたみはできていません。


次に、カテゴリを折りたたむやり方ですが、こちらのページを見ながらやっていきます↓
http://10plate.blog44.fc2.com/blog-entry-217.html

「環境設定」→「プラグインの設定」→「カテゴリ」→「詳細」→「プラグインの改造」→「HTMLの編集」をクリックしてください。
すると、下にテキストボックスが開かれると思います。

中に書いてあるものを全部消して、代わりに先ほどのページの「HTMLの~ の間に~」という記述の下のグレーのボックスに書かれているコードをコピペして貼り付けて下さい。

ここで、<script type="text/javascript">~</script>の部分を<head>~</head>で囲ってください。
(例)
<head>
<script type="text/javascript">

</script>
</head>

次に、先ほどのページの「次に公式プラグインの~」という記述の下のグレーボックスの中のコードをコピペして貼り付けます。
(例)
<head>
<script type="text/javascript">

</script>
</head>
<div class="main_menu_fold">

</div>


上の例のように貼り付けられたら、テキストボックスの下の「設定」ボタンを押せばOKです。


最後に、
「環境設定」→「テンプレートの設定」→「現在自分が使っているテンプレート(旗のマークがついているもの)」→「編集」
をクリックし、下にあるスタイルシートのテキストボックスの中のコードの一番下に、先ほどのページの「これは「子カテゴリ」の初期状態を~」の下にあるグレーボックスの中のコードをコピペします。

貼り付けられたら、スタイルシートのテキストボックスの下にある「更新」ボタンを押してください。



これでカテゴリがツリー化され、折りたたまれていると思います。
上手くできないという方はコメントか拍手でお知らせ下さい。


↓はアレンジを加える方法が書いてあります。
アレンジのやり方というか、コードの見方です。
「ここはこういうことが書いてある」というのが分かれば、後は自由にカスタマイズできますしね。

先ほどのページの2つ目のグレーボックスを見てください。
<!--category_nosub-->

<!--/category_nosub-->
という部分がありますが、この部分は「子を持たないカテゴリ」の設定が書いてあります。

その中の、</a>の前の部分に
<%category_name>(<%category_count>)
とありますが、これは「カテゴリ名」「(カテゴリの記事数)」を表しています。

つまり、カテゴリを表示するとき、「カテゴリ名(記事数)」と表示してくださいと書いてあるわけです。
この部分を変えてやれば、当然カテゴリの表示のされ方も変わって来ます。

例えば、「子を持たないカテゴリ」の表示を「□ カテゴリ名」としたい場合は、
<!--category_nosub-->~<!--/category_nosub-->の中の
<%category_name>(<%category_count>)の部分を、
「□ <%category_name>」と書き換えてやればいいのです。


他のカテゴリについても同じで、
<!--category_parent-->

<!--/category_parent-->は「子を持つ親カテゴリ」の設定、
<!--category_sub_hasnext-->

<!--/category_sub_hasnext-->は「子カテゴリ」の設定、
<!--category_sub_end-->

<!--/category_sub_end-->は「最後尾の子カテゴリ」の設定が書かれています。

表示の仕方を変えたい時は、それぞれの中にある、<%category_name>(<%category_count>)の部分を変えてやればいいのです。




次に、先ほどのページの3つ目のグレーボックスを見てください。

これはもはや説明の必要が無いくらい丁寧に書かれているので、特に言うことはないのですが、もし、ツリーの表示に文字などを使いたい場合は、「background-image: url(~);」の部分を消してください。

私の場合はツリー表示に「┣」などを使っているので、上記の部分を消し、「子カテゴリ」の部分の
「<%category_name>(<%category_count>)」を
「┣ <%category_name>(<%category_count>)」と書き換えています。



以上でアレンジの方法の説明は終わりです。
色々変更してみて、自分で確かめてみると分かりやすいです。
※ただし、変更する際などはコピーを取ってからやる事をオススメします!
スポンサーサイト
Posted by 和
comment:0   trackback:0
[その他メモ]  thema:日記 - genre:ブログ
comment
comment posting














 

trackback URL
http://turezure22.blog86.fc2.com/tb.php/388-221ebb0e
trackback
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。