アフィリエイト
ランキング
サイトマップ
ホーム

初心者でもアフィリエイトで副業

PR
スポンサーサイト [スポンサー広告]  [--/-- --]
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

今回はカテゴリの折り畳みを説明しようかと思っております
javascriptを使う方法とスタイルシートを使う2つの方法を説明します


イメージを掴みにくい方はメニューテストの左メニューバーに4タイプのメニューがありますので、ドウゾ
Javascriptバージョン
Javascriptを使ったカテゴリのツリー化はワンダと巨像と土と空さんのこの記事
参考にすると、簡単にツリー化できると思います
詳細はワンダさんのブログをご覧ください。 分からないところがある方は当ブログに気軽にコメント下さいな
Javascriptバージョン2
このバージョンはFC2BLOG カスタマイズマニュアルにも載ってますね
プルダウンでカテゴリを表示します

a1.jpg
まず管理ページ左側のメニューの「テンプレートの設定」をクリック
編集したいテンプレーとの「修正」をクリック

編集ページに2つの編集枠が表示されます、Javascriptバージョンは
HTMLを編集するので上の編集枠、右の画像の赤枠で囲まれた部分です

プラグイン方式の場合は「プラグインの設定」→「カテゴリーのHTML編集」です

まず下記を<head>~</head>にコピーしてください
</head>の直ぐ上に貼り付けて問題ないと思います
<script type="text/javascript">
<!--
function jumpmenu(targ,selObj,restore) {
    eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
    if (restore) selObj.selectedIndex=0;
}
//-->
</script>


次はカテゴリ表示部分の変更です
<!--category-->
<ul>
<li><a href="<%category_link>" title="カテゴリ「<%category_name>」の記事一覧"><%category_name>:<%category_count></a></li>
</ul>
<!--/category-->

上記を下記に書き換えます

<form id="categories_archives" name="categories_archives"action="">
  <select name="menu" onchange="jumpmenu('parent',this,0)">
    <option value="<%url>" selected="selected">■カテゴリ別</option>
      <!--category-->
         <option value="<%category_link>">■<%category_name> : <%category_count></option>
      <!--/category-->
  </select>
</form>

これでオッケーです。
Javascriptバージョンの弱点は、Javascriptを有効にしていないと機能しない事ですね

スタイルシートバージョン
スタイルシートでのカテゴリ折り畳みですが、チョット強引なやり方をしています
カテゴリ表示ありきと言うか、現在表示されているカテゴリで表示するメニューを変えています
その為ただ折りたたむ場合には向いていないかも知れません

スタイルシートバージョンは、チョット手間が掛かります
Javascript使うのに抵抗の無い方はJavascriptをお勧めします

では説明に入ります、まずJavascriptバージョンと同じように「テンプレートの編集」ページを開いてください

今回はまずスタイルシートの編集枠へ追加します
.n {display:none}
.t11,.t12,.t13 {display:block}

上記に.t11,.t12とありますが、これはカテゴリー判断じに使う物です。 軽く説明しますと
.t12の2の部分はカテゴリNOで、カテゴリ表示時のURL「blog-category-2.html」の数字
.t12の1の部分は親カテゴリ分けに使います、折りたたむだけならばそのままでOKです
.t12のtの部分は分かりやすければ何でもOKです

カテゴリ4,5が増えた場合は下記のように追記して行けばOKです。
.n {display:none}
.t11,.t12,.t13,.t14,.t15 {display:block}


次はHTMLに追記です
Javascriptの時と同じようにカテゴリ表示部分を下記に書きえてください
今回はメニューにテーブルを使っていますが、<p>や<div>でも同じように使えます
<TABLE border="1" width="160">
<TBODY>
<!--ーーー見出しーーー-->
<TR>
<TD width="31" align="center">○</TD>
<TD width="119" align="center"><a href="http://****.****.fc2.com/blog-category-1.html">見出し1</a></TD></TR>
<!--ーーーカテゴリーーー-->
<!--category_area-->
<tr class="n t1<%cno>">
<TD width="31" align="center">・</TD>
<TD width="119" nowrap align="right"><a href="http://****.****.fc2.com/blog-category-1.html">・カテゴリ1</a></TD>
</TR>
<tr class="n t1<%cno>">
<TD width="31" align="center">・</TD>
<TD width="119" nowrap align="right"><a href="http://****.****.fc2.com/blog-category-2.html">・カテゴリ2</a></TD>
</TR>
<TR>
<TD width="31" align="center">・</TD>
<TD width="119" nowrap align="right"><a href="http://****.****.fc2.com/blog-category-3.html">・カテゴリ3</a></TD>
</TR>
<!--/category_area-->
</TBODY>
</TABLE>

これでOKです。
スタイルシートバージョン2
もう一つの使い方を説明します、こっちの方がスタイルシートバージョン向きかも
イメージ的には下記のような感じです
洋楽
   アルバム名A
   アルバム名B
邦楽
   アルバム名C
   アルバム名D

追記方法は全く同じです。上記の洋楽邦楽のイメージで作ってみます
.n {display:none}
.ta1,.ta2,.tb3,.tb4 {display:block}

.ta1と.ta2が洋楽、.tb3と.tb4が邦楽
.ta1がアルバム名A
.ta2がアルバム名B
.tb3がアルバム名C
.tb4がアルバム名D
って感じです

ではHTMLに記述します
<TABLE border="1" width="160">
<TBODY> <!--ーーー洋楽ーーー-->
<TR>
<TD width="31" align="center">○</TD>
<TD width="119"><a href="http://****.****.fc2.com/blog-category-1.html">洋楽</a></TD>
</TR>
<!--category_area-->
<tr class="n ta<%cno>">
<TD width="31" align="center">・</TD>
<TD width="119" nowrap align="right"><a href="http://****.****.fc2.com/blog-category-1.html">アルバム名A</a></TD>
</TR>
<tr class="n ta<%cno>">
<TD width="31" align="center">・</TD>
<TD width="119" nowrap align="right"><a href="http://****.****.fc2.com/blog-category-2.html">・アルバム名B</a></TD>
</TR>
<!--/category_area-->
<!--ーーー邦楽ーーー-->
<TR>
<TD width="31" align="center">○</TD>
<TD width="119"><a href="http://****.****.fc2.com/blog-category-3.html">邦楽</a></TD>
</TR>
<!--category_area-->
<tr class="n tb<%cno>">
<TD width="31" align="center">・</TD>
<TD width="119" nowrap align="right"><a href="http://****.****.fc2.com/blog-category-3.html">アルバム名C</a></TD>
</TR>
<tr class="n tb<%cno>">
<TD width="31" align="center">・</TD>
<TD width="119" nowrap align="right"><a href="http://****.****.fc2.com/blog-category-4.html">アルバム名D</a></TD>
</TR>
<!--/category_area-->
</TBODY>
</TABLE>

と言う感じです。
なんかえらく長くなってしまい、分かり難いと思いますが
コメント欄にて質問受け付けますのでご容赦を。

いよいよアクセスアップ方法の説明ですまず基本的なことを説明します
10 アクセスアップ1へ⇒





スポンサード リンク




2005.08.26
バロン [#-]
なるほど~
もしかしてツリー化って一つずつこうやって記述していかないと
駄目なんですか???

気が遠くなってきた(^_^;)でも参考にさせてもらいます。
できるかな???
-EDIT
2005.08.26
exe [#/b5XDoic]
いま気付いたんですがJavascriptバージョンは折り畳みですね(汗
今danielさんの所でツリー化の説明読んでみたんですが、これでいけると思います
http://pcafe.blog3.fc2.com/blog-entry-49.html
もう一つワンダと巨像と土と空さんの所でも開設してますね
http://blog3.fc2.com/wandatokyozo/blog-entry-48.html
ワンダさんの方は私も試して見ますすので、疑問などあったらコメントくださいませ^^

-----追記------
ワンダさんの方のツリー化問題なく完了しました
ワンダさんの方が簡単かもしれないですね
-EDIT
 
現在コメント投稿後URL欄に記入したURLが表示されませんが
管理人には見えていますのでご安心を

Trackback URL

http://ifs.blog5.fc2.com/tb.php/229-927378fe


PR
PR
サイト内検索
カスタム検索
category
recent Entry
RssFeed

Subscribe in NewsGator Online Add 'ブログで副業アフィリエイト入門 - 雑 記 -' to Newsburst from CNET News.com Subscribe in Bloglines
other

Skin:Babyish-アフィリエイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。