RSSはこちら

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

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

更新休止のお知らせ

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

スポンサーサイト

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

サイトマップ(カテゴリー別全記事一覧)のカスタマイズ

サイトマップ(カテゴリー別全記事一覧)機能のカスタマイズ方法です。

主に次のカスタマイズが可能です。
(1)ページを開いた時、カテゴリー別か更新日順かどちらで表示するかの設定
(2)記事を降順か昇順かどちらでソートするか
(3)カテゴリー別、更新日順表示の切り替えスイッチのテキストの変更
(4)記事をリスト表示した時のライン画像の変更
(5)カテゴリー別で表示した時の開閉スイッチ画像の変更

それぞれのカスタマイズ方法は続きをどうぞ!
ちなみにサイトマップのページは【ブログURL/archives.html】のページのことを指します。
まずテンプレートの<head>タグの中に次の青字の記述があります。
<script type="text/javascript">
<!--
 $(document).ready(function(){
$("#upperPageNaviArea").css("display","block");
$("#mainArea .pageNaviArea").FC2BlogPageNavigation({pageNumMax: "<%total_pages>"});
  $("form.jqtransform").jqTransform({imgPath:"http://blog-imgs-29.fc2.com/h/k/d/hkdesign/"});
//$("#mainArea").FC2BlogMailForm({});
$("#SM_siteMapArea").FC2BlogCreateSiteMap({});
  $("a[href*='#']").easingScroll({easing: "easeInOutCirc", duration: 600});
  $("#headerLogo01").pngfix("#headerLogo01");
 });
function RelationEntry(_tagStr, _categoryNo){
$("#relationEntry").FC2BlogRelationEntry({tagStr: _tagStr, categoryNo: _categoryNo});
}
-->
</script>
HTMLソース1
この青字の部分で各種設定を行っていきます。


(1)ページを開いた時、カテゴリー別か更新日順かどちらで表示するかの設定

このサイトマップはカテゴリー別に記事を一覧表示するのと、カテゴリーに関係なく通常の更新日順で表示するのと二通りの方法で記事を表示できます。
それぞれ切り替えスイッチのリンクをクリックすると切り替える事ができるのですが、ページを開いた時にそのどちらを表示するかの設定を行います。
なお、通常はカテゴリー別に記事を表示しています。
    $("#SM_siteMapArea").FC2BlogCreateSiteMap({defaultDisplay: "nomal"});
HTMLソース2
こうしたあとにサイトマップは覗くと次のように初めから通常の更新順で表示されます。



(2)記事を降順か昇順かどちらでソートするか

次は記事を降順もしくは昇順のどちらで表示するかの設定です。
降順とは下に行くほど記事が古くなり、昇順とは下に行くほど記事が新しくなります。
通常は降順で表示されます。

では昇順で記事を表示してみましょう。
    $("#SM_siteMapArea").FC2BlogCreateSiteMap({defaultSort: "up"});
HTMLソース3
こうすると次のように記事が下に行くほど新しく表示されるようになります。



もちろん次のようにコンマを使って(1)のdefaultDisplayと同時に設定も可能です。
    $("#SM_siteMapArea").FC2BlogCreateSiteMap({defaultDisplay: "nomal", defaultSort: "up"});
HTMLソース4


(3)カテゴリー別、更新日順表示の切り替えスイッチのテキストの変更

次は切り替えスイッチのテキストの変更です。
    $("#SM_siteMapArea").FC2BlogCreateSiteMap({nomalSwitchText: "通常表示にする", sortSwitchText: "カテゴリー別表示にする"});
HTMLソース4
nomalSwitchTextで通常表示にする時のテキストを、sortSwitchTextでカテゴリー別ソートにする時のテキストを変更できます。
こうすると次のようになります。





(4)記事をリスト表示した時のライン画像の変更

お次はライン画像の変更です。
    $("#SM_siteMapArea").FC2BlogCreateSiteMap({tateLineImageURL: "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/SM_tateLine_solid_black01.gif", yokoLineImageURL: "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/SM_yokoLine_solid_black01.gif"});
HTMLソース5
tateLineImageURLで縦のラインの画像を、yokoLineImageURLで横のラインの画像をしていします。
通常はドットラインでしたがこうすると次のようにソリッドラインに変更できます。



ただ、8x8の大きさの画像で線幅は1pxの画像を前提にHTMLやCSSを組んでいるので、お好きな画像を使ってカスタマイズするというのは少々難しく、画像を作る段階で大きさの微調整が必要になってくると思います。
なので後日カスタマイズ用の画像を製作し報告したいと思います。


(5)カテゴリー別で表示した時の開閉スイッチ画像の変更

通常は+と-の画像で表示している部分を変更する事ができます。
こちらもライン画像のカスタマイズと同じく11x11の大きさの画像を前提に作っているので、後ほどカスタマイズ用の画像を作って報告したいと思います。
それでは+と-の画像から↑と↓の矢印の画像に変更してみましょう。
    $("#SM_siteMapArea").FC2BlogCreateSiteMap({openToggleImageURL: "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/SM_IconOpen_arrow01.gif", closeToggleImageURL: "http://blog-imgs-29.fc2.com/h/k/d/hkdesign/SM_IconClose_arrow01.gif"});
HTMLソース6
openToggleImageURLで開いた状態での画像を、closeToggleImageURLで閉じた状態での画像を指定します。

こうすると次のように画像が変更されます。




以上でサイトマップのカスタマイズを終わります。
javascriptで簡単にカスタマイズできるように作ったつもりですが、javascriptやプログラム等に触ったことのない人にはすこし敷居が高くなると思います。
一応、上のソースをそのままテンプレートにコピペするだけでも動作するのを確認したので正常に動くと思います。
それでもうまくいかない場合は、英数字やコンマやスペースが全角になっている事や、""の中に改行が混じっている等が考えられます。
うまくいかない場合は、ブログのURLやソースを記載してコメントしていただけると助かります。
関連記事
スポンサーサイト
category
カスタマイズ > その他カスタム
tag
カスタマイズ
genre
ブログ
theme
FC2ブログ共有テンプレート

TrackBack Url

http://hkdesign.blog91.fc2.com/tb.php/62-90cca8c2

検索フォーム

プロフィール

HKD TEMPLATE


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

Henni
Kodawaru
Design
略してHKD

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

カテゴリ

アクセスランキング

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

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

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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。