ブログテンプレートならHKD

ブログタイトルを3時間悩んでやっと思いつきました。変にこだわるデザインです。すでに変にこだわって時間をロスしています。

更新休止のお知らせ

現在HKDは更新を休止しており、緊急を要する修正以外は手をつけれない状態です。ご利用していただいてる方々には申し訳ございませんが、よろしくお願いいたします。

2011⁄12⁄19(Mon)
20:00

CustomCategoryが公開されました！

このテンプレートの質問受付は終了しました

20120210追記
このプラグインはFC2ブログ管理画面の親子の設定を自動認識するので、親子の設定を施していないとツリー化しません。
親子の設定方法はFC2ブログ公式の次のURLをご覧下さい。
http://fc2blogmanual.blog60.fc2.com/blog-entry-53.html#a4

ぬるぬる動く開閉アニメーション搭載のカテゴリー表示プラグインです。
カテゴリーを表示するプラグインには、他の方たちが作ったものが数多くあります。そこで、既存のカテゴリー系プラグインと被らないように変にこだわって作りました。
主な見所は次の通りです。

約30種類の開閉アニメーションを選択可能。これであなただけの見せ方が可能！
cookie（クッキー）を使った開閉状態の保持。ページリロードすると閉じた部分は閉じたままで表示！
+や-等の記号を使わず画像を使用した装飾。画像は独自に用意する事も可能。サンプル画像もいっぱいあるよ！
ブログ管理画面の親子カテゴリーの設定を自動認識。よくある親と子の関連付けをプラグインの編集画面から入力とかいらないよ！
親と子で独立した記事数によるソート（並び替え）機能。カテゴリー内の記事数によって降順・昇順のソートができるよ！

jqueryプラグインファイルとして用意したのでFC2ブログ以外の方でも使用できます。

詳しくは続きをどうぞ。

カスタマイズ（各種変更）は次の11項目があります。

※7,8,9のリンク先は同じです

カスタマイズせず初期状態でも十分に使えます。
javascriptをOFFにしている人には、通常の状態で表示されユーザビリティを配慮。

プラグイン内のCreated by HKDの製作者へのリンクは消してしまっても構いません。
が、そのまま残してくれたり違う形でリンクを貼ってくれると、これからの製作の励みになります！

【FC2ブログ以外で使う方】
・jqueryプラグインファイル　utf-8 encoding
　本体　軽量化版
サンプルページはこちら

・使い方
まずはCSSの用意。

<style type="text/css">
<!--
CustomCategoryArea:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
CustomCategoryArea {
    min-height: 1px;
}
.CC_parentC {
	position:relative;
}
.CC_parentGroup {
	padding-left: 7px;
}
.CC_subC_hasnext {
	background-image: url(http://blog-imgs-47.fc2.com/h/k/d/hkdesign/image_tateLine_dot01.gif);
	background-repeat: repeat-y;
	background-position: left top;
}
.CC_subC_end {
	background-image: url(http://blog-imgs-47.fc2.com/h/k/d/hkdesign/image_tateLine_dot01.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
.CC_subC {
	background-image: url(http://blog-imgs-47.fc2.com/h/k/d/hkdesign/image_yokoLine_dot01.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-left: 15px;
}
.CC_toggleIcon {
	vertical-align: middle;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	cursor: pointer;
	margin-top: 0px;
	margin-right: 4px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 2px;
	float:left;
	display:block;
}
.CC_titleBox {
	padding-left:19px;
}
.CC_tateLineBox {
	background-image: url(http://blog-imgs-47.fc2.com/h/k/d/hkdesign/image_tateLine_dot01.gif);
	background-repeat: repeat-y;
	background-position: left bottom;
	width:10px;
	position:absolute;
	left: 7px;
	bottom: 0px;
}
#CC_link_HKD {
	font-size: x-small;
	font-style: italic;
	text-align: right;
}
-->
</style>

そして次のような元データとなるHTMLを用意

<div id="CustomCategoryArea">
  <div class="CC_parentC" id="CC_P0"><a href="http://hkdesign.blog91.fc2.com/blog-category-0.html" title="テンプレート">テンプレート (<span class="CC_entNum">21</span>)</a></div>
  <div class="CC_parentGroup">
    <div class="CC_subC_hasnext">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-2.html" title="moon">moon (<span class="CC_entNum">4</span>)</a></div>
    </div>
    <div class="CC_subC_hasnext">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-3.html" title="green">green (<span class="CC_entNum">1</span>)</a></div>
    </div>
    <div class="CC_subC_hasnext">
      <div>
        <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-6.html" title="curve">curve (<span class="CC_entNum">4</span>)</a></div>
      </div>
    </div>
    <div class="CC_subC_hasnext">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-11.html" title="fantastic">fantastic (<span class="CC_entNum">3</span>)</a></div>
    </div>
    <div class="CC_subC_hasnext">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-13.html" title="abstract">abstract (<span class="CC_entNum">2</span>)</a></div>
    </div>
    <div class="CC_subC_hasnext">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-14.html" title="monotone">monotone (<span class="CC_entNum">2</span>)</a></div>
    </div>
    <div class="CC_subC_end">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-17.html" title="antique">antique (<span class="CC_entNum">3</span>)</a></div>
    </div>
  </div>
  <div class="CC_noSubC"><a href="http://hkdesign.blog91.fc2.com/blog-category-15.html" title="プラグイン">プラグイン (<span class="CC_entNum">3</span>)</a></div>
  <div class="CC_parentC" id="CC_P5"><a href="http://hkdesign.blog91.fc2.com/blog-category-5.html" title="カスタマイズ">カスタマイズ (<span class="CC_entNum">32</span>)</a></div>
  <div class="CC_parentGroup">
    <div class="CC_subC_hasnext">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-19.html" title="ImageClock">ImageClock (<span class="CC_entNum">2</span>)</a></div>
    </div>
    <div class="CC_subC_hasnext">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-18.html" title="CustomRssReader">CustomRssReader (<span class="CC_entNum">15</span>)</a></div>
    </div>
    <div class="CC_subC_end">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-20.html" title="その他カスタム">その他カスタム (<span class="CC_entNum">15</span>)</a></div>
    </div>
  </div>
  <div class="CC_parentC" id="CC_P7"><a href="http://hkdesign.blog91.fc2.com/blog-category-7.html" title="WEB技術">WEB技術 (<span class="CC_entNum">8</span>)</a></div>
  <div class="CC_parentGroup">
    <div class="CC_subC_hasnext">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-10.html" title="CSS">CSS (<span class="CC_entNum">1</span>)</a></div>
    </div>
    <div class="CC_subC_hasnext">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-8.html" title="JavaScript">JavaScript (<span class="CC_entNum">5</span>)</a></div>
    </div>
    <div class="CC_subC_hasnext">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-21.html" title="HTML">HTML (<span class="CC_entNum">1</span>)</a></div>
    </div>
    <div class="CC_subC_end">
      <div class="CC_subC"><a href="http://hkdesign.blog91.fc2.com/blog-category-22.html" title="その他技術系">その他技術系 (<span class="CC_entNum">1</span>)</a></div>
    </div>
  </div>
  <div class="CC_noSubC"><a href="http://hkdesign.blog91.fc2.com/blog-category-1.html" title="お知らせ">お知らせ (<span class="CC_entNum">14</span>)</a></div>
  <div class="CC_noSubC"><a href="http://hkdesign.blog91.fc2.com/blog-category-4.html" title="雑記">雑記 (<span class="CC_entNum">31</span>)</a></div>
  <div class="CC_noSubC"><a href="http://hkdesign.blog91.fc2.com/blog-category-16.html" title="hk_tweet">hk_tweet (<span class="CC_entNum">3</span>)</a></div>
</div>

そして次にjavascriptを記述。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script type="text/javascript" src="http://blog-imgs-47.fc2.com/h/k/d/hkdesign/CustomCategory_Ver0101-min.js" charset="utf-8"></script>
<script type="text/javascript">
<!--
(function (){var sort_oya='',sort_ko='',tateLineImageURL='',yokoLineImageURL='',openIconImageURL='',closeIconImageURL='',animation={}, easing='',duration,closeCategory='',cookieMode='';


/********** javascriptのカスタマイズはここから ***********/

//【親カテゴリーのソート】
//　koariTop_down, koariTop_up, konashiTop_down, konashiTop_up, 
//  down, up, default　の7つから選択可能
sort_oya = 'koariTop_down';

//【子カテゴリーのソート】
//　down, up, default　の3つから選択可能
sort_ko = 'down';

//【縦ラインの画像URL】
tateLineImageURL = 'http://blog-imgs-47.fc2.com/h/k/d/hkdesign/image_tateLine_dot01.gif';

//【横ラインの画像URL】
yokoLineImageURL = 'http://blog-imgs-47.fc2.com/h/k/d/hkdesign/image_yokoLine_dot01.gif';

//【開くボタンの画像URL】
openIconImageURL = 'http://blog-imgs-47.fc2.com/h/k/d/hkdesign/image_toggleOpen_arrow01.gif';

//【閉じるボタンの画像URL】
closeIconImageURL = 'http://blog-imgs-47.fc2.com/h/k/d/hkdesign/image_toggleClose_arrow01.gif';

//【アニメーションの設定】
//　scrollは上下の開閉アニメ、popupは文字の透過アニメ
//　それぞれ"on" と "off" から選択可能
animation = {'scroll':'on', 'popup':'on'};

//【イージングの設定】
//　アニメーションのモーション（動き）の設定
easing = 'easeInOutCirc';

//【イージングのスピードの設定】
//　アニメーションの速さの設定
//　単位は秒
duration = 0.7;

//【初期の開閉状態の設定】
//　クッキーに関係せず初めから閉じている親カテゴリーの設定
//　closeCategory = 'CC_P1,CC_P5,CC_P12';　のように設定する
closeCategory = '';

//【クッキーの利用設定】
//　"on"でクッキーを利用し、"off"で利用しない
//　利用しない場合は開閉状態を保持できない
cookieMode = 'on';
			
			
/********** javascriptのカスタマイズはここまで ***********/


 $('#CustomCategoryArea').CustomCategory({"sort_oya":sort_oya,"sort_ko":sort_ko,"tateLineImageURL":tateLineImageURL,"yokoLineImageURL":yokoLineImageURL,"openIconImageURL":openIconImageURL,"closeIconImageURL":closeIconImageURL,"animation":animation,"easing":easing,"duration":duration,"closeCategory":closeCategory,"cookieMode":cookieMode});
})();
-->
</script>

・仕組み
#CustomCategoryAreaというdivに元データとなるHTMLを記述します。この元データの記述の仕方は上を参照してください。
この元データの構成やid名、class名を間違えると、javascriptがうまく認識してくれません。
この元データだけを表示すると次の画像のようになります。

javascriptがoffの環境ではこの画像のように表示されます。

次にjqueryのCustomCategoryプラグインを利用してカテゴリーを構成していきます。
このプラグインのオブションで各種カスタマイズが可能となります。カスタマイズの方法は上記（ページ内アンカー）の一覧をご覧下さい。

【更新履歴】
20111129:ver0100製作
20111201:ver0101更新
20111209:共有プラグイン申請

【最後に】
ご質問・ご要望・ご感想などお待ちしています。
CustomCategoryをどうぞよろしくおねがいいたします。

関連記事

CustomCategoryが公開されました！ (2011/12/19)
javascriptだけでできるCustomRssReader（jqueryプラグインRSSリーダー）完成！ (2011/05/29)
ImageClockをカスタマイズして使ってくれている方たちを紹介！ (2011/02/06)
UNIQLOCK（ユニクロック）のような時計＆画像ビューアープラグイン公開！ (2011/01/20)

スポンサーサイト

category: プラグイン
tag: 新公開カテゴリープラグイン jQuery javascript アニメーション
genre: ブログ
theme: FC2ブログ共有プラグイン

ページの先頭へ戻る

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2011⁄12⁄26(Mon)
07:15

Re: タイトルなし

匿名コメントさんへ

プラグインのご利用ありがとうございます。
子の設定については次のURLをご覧下さい。
http://fc2blogmanual.blog60.fc2.com/blog-entry-53.html#a4

2011⁄12⁄28(Wed)
18:16
[edit]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2012⁄01⁄11(Wed)
14:41

行間

カテゴリ使用させていただいています。

質問なのですが、行間を狭くするにはどこを変えれば良いのでしょうか？もう少し狭くしたいのですが…
HTML編集はほぼ初心者なので、色々探してはみたのですが、カスタムのプラグインのHTML編集がよく分かりません。

すみませんが、よろしくお願いします。

2012⁄01⁄29(Sun)
03:38

Re: 行間

ぶっちさんへ

プラグインのご利用ありがとうございます。
ブログを拝見したところ、使用されているテンプレートのCSSの影響を受けて上下に余白ができているようです。
この影響を受けないようCSSを変更しましたので、次のように修正していただければなと思います。

まず、ブログ管理画面のプラグインの設定から、CustomCategoryの詳細をクリックし、HTMLの編集フォームから次の記述を探してください。
<style type="text/css">

</style>
このstyleの部分がデザイン（CSS）を調整している部分となります。
ここを次のURLからテキストをコピーして上書きペーストしてください。
http://blog-imgs-37.fc2.com/h/k/d/hkdesign/20120130_01_style.txt

テキストをペーストすると次のようになると思います。
青字で反転しているのがペーストしたテキスト部分です。
http://blog-imgs-37.fc2.com/h/k/d/hkdesign/20120130_01_style.gif

うまくいくと次の画像のようになります。
http://blog-imgs-37.fc2.com/h/k/d/hkdesign/20120130_01_sample.gif
他のプラグインと同じ行間（上下の余白）になっていると思います。
これでいかがでしょうか？よろしくお願いいたします。

2012⁄01⁄30(Mon)
18:54
[edit]

ありがとうございました

無事行間が狭くなり、スッキリしました～
ブログを始めたばかりですが、本当に機械系は弱いので…

本当にご丁寧にありがとうございました!!

2012⁄01⁄31(Tue)
00:25

Re: ありがとうございました

ぶっちさんへ

うまくいけたようでなによりです。
またなにかありましたら、お待ちしております。

2012⁄01⁄31(Tue)
00:51
[edit]

初めまして、ありがたくこちらのプラグインをダウンロードさせて頂きました。
しかし、どこから手をつけていいのかが分かりません。
（初期状態だとツリー化しないので……）
そこで記事のHTMLを拝見したのですが、どうやってツリー化すればいいのかが理解できず、とても悩んでいます。
（<%category_count>などの変数を使わないのは仕様なのでしょうか？）

初歩的な所からで申し訳ないのですが、お教え頂けると幸いです。
よろしくお願い致します。

2012⁄02⁄04(Sat)
00:12

Re: タイトルなし

名なしさんへ

はじめまして。
プラグインのご利用ありがとうございます。
初期状態だとツリー化しないという事なので、FC2ブログの管理画面からカテゴリーの子の設定はお済でしょうか？
管理画面で設定された親子の状態を自動で認識しているので、子の設定を施していないとツリー化していないカテゴリーが表示されるだけになります。
この記事のHTMLはFC2ブログ以外で使う方用のHTMLなので、無視していただいて結構です。
テンプレート変数はプラグインの中に組み込んでいるので、ご確認いただければなと思います。
子の設定方法はFC2公式の次のURLをご利用下さい。
http://fc2blogmanual.blog60.fc2.com/blog-entry-53.html#a4

もし子の設定がお済の状態でもうまくいかないのでしたら、ブログのURLかHTMLを教えていただけませんか？メールでも結構です。
こちらので方で確認したいと思います。
よろしくお願いいたします

2012⁄02⁄05(Sun)
19:22
[edit]

解決いたしました。

お返事遅れて申し訳ありません。
ご丁寧な回答ありがとうございます。
子の設定をせず使用しており、ご迷惑をおかけしました……。
回答を頂いて、とても助かりました。
素敵なプラグインを本当にありがとうございます。
それでは。

2012⁄02⁄08(Wed)
02:34

Re: 解決いたしました。

コメントありがとうございます。
またなにかありましたらご連絡くださいね。

2012⁄02⁄10(Fri)
18:23
[edit]

承認待ちコメント

このコメントは管理者の承認待ちです

2012⁄04⁄01(Sun)
15:22

承認待ちコメント

このコメントは管理者の承認待ちです

2012⁄05⁄04(Fri)
19:04

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2012⁄06⁄09(Sat)
20:53

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2012⁄09⁄19(Wed)
14:38

ページの先頭へ戻る

Title:
Name:
Mail:
Url:
Comment:
Pass:
Secret:

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/160-1fbf7996

ページの先頭へ戻る

検索フォーム

プロフィール

HKD TEMPLATE

Author:
　Hellow
mail:
　hkdesign.mail☆gmail.com
　☆を半角＠に変えてください。

Henni
Kodawaru
Design
略してHKD

ブログテンプレートならHKDにようこそ！
このサイトではFC2で使える共有テンプレートを配布しています。
サイトについての説明はこちらをどうぞ。