RSSはこちら

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

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

更新休止のお知らせ

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
category
スポンサー広告
  • 2009⁄09⁄28(Mon)
  • 10:01

FC2サイトマップをjQueryプラグイン化完成

やっとこさ完成。

[主な機能]
・レイアウトやスムーズスクロール等は既存のサイトマップと同じ
・通常表示とカテゴリー別表示を切り替え可能
・デフォルトで通常表示かカテゴリー別表示かを設定可能
・折りたたみボタンの画像を変更可能
・記事タイトル横のライン画像を変更可能

使い方・・・
まずはいつもどおりプラグインを読み込んで

HTMLを用意
<!-- FC2BlogCreateSiteMap -->
<div id="SM_siteMapArea">
<noscript id="SM_noScriptText">
正しく表示するにはJavaScriptをONにしてください。
</noscript>
<!--titlelist_area-->
<div id="SM_categoryArea">
<div id="SM_categoryHead">
<h2>All Category</h2>
</div>
<!--category-->
<!--category_parent-->
<div class="SM_parentCategoryTitle">
<h3><span class="SM_getCategoryStatus" title="parent,<%category_no>,<%category_name>"><a href="<%category_link>" title="カテゴリーページへ"><%category_name>(<%category_count>)</a></span></h3>
</div>
<ul class="SM_parentCategoryContents">
<!--/category_parent-->
<!--category_sub_hasnext-->
<li class="SM_entryHasNext">
<div class="SM_entry"><span class="SM_getCategoryStatus" title="sub_hasnext,<%category_no>,<%category_name>"><a href="<%category_link>" title="カテゴリーページへ"><%category_name>(<%category_count>)</a></span></div>
</li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="SM_entryEnd">
<div class="SM_entry"><span class="SM_getCategoryStatus" title="sub_end,<%category_no>,<%category_name>"><a href="<%category_link>" title="カテゴリーページへ"><%category_name>(<%category_count>)</a></span></div>
</li>
</ul>
<!--/category_sub_end-->
<!--category_nosub-->
<div class="SM_noSubCategoryTitle">
<h3><span class="SM_getCategoryStatus" title="nosub,<%category_no>,<%category_name>"><a href="<%category_link>" title="カテゴリーページへ"><%category_name>(<%category_count>)</a></span></h3>
</div>
<!--/category_nosub-->
<!--/category-->
</div>
<div id="SM_articlesArea">
<div id="SM_articlesHead">
<h2>All Articles</h2>
</div>
<div id="SM_switchArea"><a id="SM_sortArchivesSwitch"></a></div>
<ul id="SM_defaultList">
<!--titlelist-->
<li class="SM_CNO<%titlelist_category_no>"><a href="<%titlelist_url>" title="<%titlelist_body>・・・続きを読む"><%titlelist_title></a>
<div class="SM_entryDate"><%titlelist_year>.<%titlelist_month>.<%titlelist_day></div>
</li>
<!--/titlelist-->
</ul>
</div>
<!--/titlelist_area-->
</div>
<!-- FC2BlogCreateSiteMap -->
HTMLソース1


そしてjavascriptを記述
$('#SM_siteMapArea').FC2BlogCreateSiteMap({
//tateLineImageURL: "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/SM_tateLine02.gif"
//,yokoLineImageURL: "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/SM_yokoLine02.gif"
//,openToggleImageURL: "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/SM_IconOpen02.gif"
//,closeToggleImageURL: "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/SM_IconClose02.gif"
});
HTMLソース2
引数によっていろいろ設定を変更できます。引数の説明はまた別のエントリーで・・・。

これでHTMLソース1で記述した#SM_siteMapAreaの部分が、javascriptで綺麗にカテゴリー別に表示されるようになります。
javascriptを動作させない環境でも通常の記事一覧が表示される仕組みです。

CSSはこちら
/* siteMapArea */
#SM_siteMapArea #SM_noScriptText {
color: #FF0000;
text-align: center;
}
#SM_siteMapArea #SM_categoryHead {
font-family: "Times New Roman", Times, serif;
font-size: 20px;
margin-bottom: 15px;
font-weight: bold;
color: #1F1C4C;
}
#SM_siteMapArea #SM_articlesHead {
font-family: "Times New Roman", Times, serif;
font-size: 20px;
font-weight: bold;
color: #1F1C4C;
}
#SM_siteMapArea #SM_switchArea {
text-align: right;
padding-bottom: 15px;
}
#SM_siteMapArea #SM_categoryArea {
margin-left: 25px;
line-height: 120%;
letter-spacing: 0.1em;
margin-right: 15px;
margin-bottom: 30px;
padding-left: 5px;
margin-top: 10px;
}
#SM_siteMapArea #SM_categoryArea .SM_parentCategoryTitle {
padding-left: 2px;
}
#SM_siteMapArea #SM_categoryArea .SM_noSubCategoryTitle {
padding-left: 2px;
padding-bottom: 5px;
}
#SM_siteMapArea #SM_categoryArea li.SM_entryHasNext {
background-repeat: repeat-y;
background-position: left top;
}
#SM_siteMapArea #SM_categoryArea li.SM_entryEnd {
background-repeat: no-repeat;
background-position: left top;
}
#SM_siteMapArea #SM_articlesArea {
margin-left: 25px;
letter-spacing: 0.1em;
margin-right: 15px;
margin-bottom: 30px;
padding-left: 5px;
margin-top: 10px;
line-height: 120%;
}
#SM_siteMapArea #SM_defaultList li {
padding-right: 5px;
padding-left: 5px;
}
#SM_siteMapArea .SM_categoryContainer {
margin-left: 25px;
line-height: 120%;
letter-spacing: 0.1em;
margin-right: 15px;
padding-left: 15px;
}
#SM_siteMapArea .SM_noSubCategoryTitle {
}
#SM_siteMapArea .SM_noSubCategoryContents {
padding-left: 7px;
}
#SM_siteMapArea .SM_noSubCategoryContents li.SM_entryHasNext {
background-image: url(http://blog-imgs-29.fc2.com/h/k/d/hkdesign/green01_SM_listLine01.gif);
background-repeat: repeat-y;
background-position: left top;
}
#SM_siteMapArea .SM_noSubCategoryContents li.SM_entryEnd {
background-image: url(http://blog-imgs-29.fc2.com/h/k/d/hkdesign/green01_SM_listLine01.gif);
background-repeat: no-repeat;
background-position: left top;
}
#SM_siteMapArea .SM_parentCategoryTitle {
}
#SM_siteMapArea .SM_parentCategoryContents {
padding-left: 7px;
padding-bottom: 10px;
}
#SM_siteMapArea .SM_parentCategoryContents li.SM_entryHasNext {
background-repeat: repeat-y;
background-position: left top;
}
#SM_siteMapArea .SM_parentCategoryContents li.SM_entryEnd {
background-repeat: repeat-y;
background-position: left top;
}
#SM_siteMapArea .SM_parentCategoryContents li.SM_subCategoryAreaHasNext {
background-repeat: repeat-y;
background-position: left top;
}
#SM_siteMapArea .SM_parentCategoryContents li.SM_subCategoryAreaEnd {
background-repeat: no-repeat;
background-position: left top;
}
#SM_siteMapArea .SM_subCategoryTitleHasNext {
}
#SM_siteMapArea .SM_subCategoryContentsHasNext {
padding-left: 15px;
padding-bottom: 10px;
}
#SM_siteMapArea .SM_subCategoryContentsHasNext li.SM_entryHasNext {
background-repeat: repeat-y;
background-position: left top;
}
#SM_siteMapArea .SM_subCategoryContentsHasNext li.SM_entryEnd {
background-repeat: no-repeat;
background-position: left top;
}
#SM_siteMapArea .SM_subCategoryTitleEnd {
}
#SM_siteMapArea .SM_subCategoryContentsEnd {
padding-left: 15px;
padding-bottom: 10px;
}
#SM_siteMapArea .SM_subCategoryContentsEnd li.SM_entryHasNext {
background-image: url(http://blog-imgs-29.fc2.com/h/k/d/hkdesign/green01_SM_listLine01.gif);
background-repeat: repeat-y;
background-position: left top;
}
#SM_siteMapArea .SM_subCategoryContentsEnd li.SM_entryEnd {
background-image: url(http://blog-imgs-29.fc2.com/h/k/d/hkdesign/green01_SM_listLine01.gif);
background-repeat: no-repeat;
background-position: left top;
}
#SM_siteMapArea li.SM_entryDate {
text-align: right;
}
#SM_siteMapArea .SM_topAnchor {
text-align: right;
padding-top: 10px;
}
#SM_siteMapArea .SM_toggleIcon {
margin-right: 1px;
padding: 2px;
vertical-align: middle;
}
#SM_siteMapArea .SM_parentCategoryContents .SM_toggleIcon {
background-repeat: no-repeat;
background-position: left top;
padding-left: 10px;
}
#SM_siteMapArea .SM_entry {
background-repeat: no-repeat;
background-position: left top;
padding-left: 13px;
}
#SM_siteMapArea .SM_entryDate {
text-align: right;
}
CSSソース1
サブカテゴリをulタグのネストで表現しているので少し複雑かも。


ページナビの時と同じく、HKD以外のテンプレートに組み込むのはできないこともないけどある程度スキルが必要かもしれません。
HKDのテンプレートには組み込んでいこうと思います。

javascriptソースはこちら
http://blog-imgs-29.fc2.com/h/k/d/hkdesign/jqueryfc2blogcreatesitemap-min.js
関連記事
スポンサーサイト
category
WEB技術 > JavaScript
tag
jQuerySiteMap
genre
ブログ
theme
FC2ブログ共有テンプレート

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/31-77a36b4d

検索フォーム

プロフィール

HKD TEMPLATE


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

Henni
Kodawaru
Design
略してHKD

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

カテゴリ

アクセスランキング

[ジャンルランキング]
ブログ
2408位
アクセスランキングを見る>>

[サブジャンルランキング]
共有テンプレート
19位
アクセスランキングを見る>>

FC2カウンター

メールフォーム

名前:
メール:
件名:
本文:

アプリ紹介

google chrome拡張機能「high! like!」を作りました。
機能1:はてなハイクをサイト上に投稿できる
機能2:はてなハイク投稿時に同時にtwitterにも投稿する
詳しくは次のURLへお越しください
hk-factory
Googleウェブストア

プラグインギャラリー

ブログ管理画面の共有プラググイン追加から、作者:hkdesignと検索してダウンロードしてください。

CastomCategory
CustomRssReader
ImageClock

テンプレートギャラリー

ブログ管理画面の共有テンプレート追加から、作者:hkdesignと検索してダウンロードしてください。

動作環境について

テンプレートは以下の環境・方法で動作確認を行ってからFC2に申請しています。もし、記載の環境でも表示が崩れて見えない場合は連絡してくれるとありがたいです。

【Win】FireFox 3 / IE8 / IE7(*) / IE6(*) / Google Chrome
【Mac】FireFox 3.0(*) / Safari 3.0(*)
*マークがあるブラウザは手元に環境がないので、Adobe BrowserLabを使ってチェックしています。

Adobe BrowserLab
https://browserlab.adobe.com/

ライセンスについて

ライセンス形態はGPLライセンスをとります。
簡単に言うと次の4つです。
  • カスタマイズ・再配布など連絡なしに使用OK。
  • ただし、著作権表示は消したらダメです。
  • なんらかの損害が出た場合は自己責任です。
  • 再配布する場合、GPLライセンスが適用されます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。