FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

親子カテゴリ対応サイトマップ

以前に「ブログのサイトマップの作り方」を紹介したことがありますが、これはFC2が親子カテゴリ機能を追加する前のことでした。

hatena chipsさんが、親子カテゴリに対応したカテゴリ別記事一覧表示方法を紹介してくれています。小粋空間さんのスクリプトを用いて、カテゴリ別の折りたたみも可能にしています。

これにナビゲーション等を付加し、サイトマップとして当サイトのテンプレートに導入する方法を紹介します。

【参考記事】
サイドメニューの折りたたみ for FC2 ブログ　（小粋空間さん）
hatena chips: カテゴリ別全記事一覧を折りたたむ　（hatena chipsさん）


HTMLを編集します。
<!--▲トラックバック表示▲-->の下に、下記を挿入してください。

<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="plugin3_outline">
<div class="plugin3_title" id="mapnavi_title">サイトマップ</div>
<div class="plugin3_body">

<div id="sitemap">

<noscript><p>サイトマップを利用するためには JavaScript を有効にしてください。</p></noscript>

<!-- ▽ サイトマップ ナビゲーション ▽ -->
<b>■ カテゴリ一覧 ■</b><br />
<ul class="main_menu">
<!--category-->
<!--category_nosub-->
<li class="main_list">
<!--/category_nosub-->
<!--category_parent-->
<li class="main_list">
<!--/category_parent-->
<!--category_sub_begin-->
<ul class="sub_menu">
<!--/category_sub_begin-->
<!--category_sub_hasnext-->
<li class="sub_list">
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="sub_list_end">
<!--/category_sub_end-->
<a href="#c<%category_no>" title="<%category_name>"><%category_name>(<%category_count>)</a>
<!--category_nosub-->
</li>
<!--/category_nosub-->
<!--category_sub_hasnext-->
</li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
</li>
</ul>
</li>
<!--/category_sub_end-->
<!--/category-->
</ul>
<br />
<!-- △ サイトマップ ナビゲーション △ -->

<div class="display_no">
<ul>
<!--titlelist-->
<li name="<%titlelist_category_no>" id="<%titlelist_category_no>">
<a href="<%titlelist_url>" title="<%titlelist_title>"><%titlelist_title></a>
-　<%titlelist_year>.<%titlelist_month>.<%titlelist_day>
</li>
<!--/titlelist-->
</ul>
</div>

<!--category-->

<!--category_parent-->■<!--/category_parent-->
<!--category_nosub-->■<!--/category_nosub-->
<!--category_sub_hasnext-->　□<!--/category_sub_hasnext-->
<!--category_sub_end-->　□<!--/category_sub_end-->

<span id="subcategories<%category_no>name">
<a href="<%category_link>" title="<%category_name>" name="c<%category_no>" id="c<%category_no>"><b><%category_name></b> (<%category_count>)</a>
</span> <br />

<div id="subcategories<%category_no>list">

<script type="text/javascript">
<!--
var list = document.getElementsByName('<%category_no>');
var elm; var s;
if(list.length > 0) document.write('<ul class="sitemap_list">');
for (var i = 0; i < list.length; i++) {
elm = list.item(i);
s = elm.innerHTML;
if(i == list.length-1) {
document.write('<li class="branch_end">', s,'</li>');
} else {
document.write('<li class="branch">', s,'</li>');
}
}
if(list.length > 0) document.write('</ul>');
FoldNavigation('subcategories<%category_no>','on',false);
//--></script>

<div class="pgtop"><a href ="#mapnavi_title" title="カテゴリ一覧へ戻る">△ カテゴリ一覧へ戻る</a></div>

</div>

<!--/category-->

</div><!-- /maplist -->
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--/titlelist_area-->
<!--▲サイトマップ▲-->


※上記は lightframe シリーズを想定しています。standard シリーズの場合は赤い３カ所を変更してください。
plugin3_outline　→　menu_outline3
plugin3_title　→　menu_title3
plugin3_body　→　menu_cont3


次にスタイルシートの末尾に以下を加えてください。

/* ▼ サイトマップ ▼ */
#sitemap {
margin-top:5px; /* 上の余白 */
text-align:left;
}

#sitemap ul.sitemap_list {
margin-left:30px; /* 各記事リストの左余白 */
}

.display_no {
display:none;
}

/* カテゴリ一覧へ戻る */
.pgtop {
text-align:right; /* 右寄せ */
}
/* ▲ サイトマップ ▲ */


これで記事をカテゴリ別に一覧表示することができます。

さらにカテゴリ別に折りたたみたい、ツリー表示したい方は、以下を参考にしてください。

【カテゴリ別に折りたたみたい】

小粋空間さんのスクリプトページから menufolder.js をダウンロードし、これをFC2管理画面の「ファイルアップロード」よりアップロードしてください。

そして HTML の<haad> ～ </head>の間に下記を加えてください。

<script type="text/javascript" src="http://～/menufolder.js" charset="utf-8"></script>


http://～の部分は menufolder.js をアップロードしたURLに置き換えてください。

これでカテゴリ別に折りたたみができます。
折りたたみマークを変えたければ、menufolder.js を編集する必要があります。
詳細は小粋空間さんのマニュアルを参考にしてください。

折りたたみが必要ないならば、HTMLの
FoldNavigation('subcategories<%category_no>','on',false);
を削除してください。

【ツリー表示にしたい】

スタイルシートの末尾に以下を加えてください。

/* ▼ サイトマップ（ツリー表示） ▼ */
#sitemap ul.sitemap_list li {
background-image: url("http://blog-imgs-19.fc2.com/1/0/p/10plate/branch.gif");
background-repeat: no-repeat;
list-style-type:none;
list-style-image: none;
padding:0 0 0 20px;
margin:0;
}

#sitemap ul.sitemap_list li.branch_end {
background-image: url("http://blog-imgs-19.fc2.com/1/0/p/10plate/branch_end.gif");
}
/* ▲ サイトマップ（ツリー表示） ▲ */



【記事表示順序を逆(古い順)にしたい】

表示される記事の順序はトップページと同じく新しい記事ほど上に表示されます。この順序は環境設定で逆にすることができますが、サイトマップの表示順も同じく逆になります。

トップページでは新しい記事を上にしたいが、サイトマップでは古い記事を上にする、つまり通常の逆の順序で表示させたい場合、次の箇所を置き換えてください。

置き換え箇所

for (var i = 0; i < list.length; i++) {


置き換え後

for (var i = list.length - 1; i >= 0; i--) {



お好みに合わせてカスタマイズしてください。

【2009/07/22 追記】このカスタマイズは 2009年07月22日以降にダウンロードされたテンプレート(standardならver.09、lightframeならver.04)では実装されています。バージョンはHTMLかCSSの一番下を見ると確認できます。

【2009/09/02 追記】不必要なタグや文法違反等があったため、上記HTMLを新たに修正しました。
以下は以前掲載していたHTMLです。

<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="plugin3_outline">
<div class="plugin3_title"><a name="mapnavi_title">サイトマップ</a></div>
<div class="plugin3_body">

<div id="sitemap">

<noscript><p>サイトマップを利用するためには JavaScript を有効にしてください。</p></noscript>

<!-- ▽ サイトマップ ナビゲーション ▽ -->
<b>■ カテゴリ一覧 ■</b><br />
<ul class="main_menu">
<!--category-->
<!--category_nosub-->
<li class="main_list" &align>
<!--/category_nosub-->
<!--category_parent-->
<li class="main_list" &align>
<!--/category_parent-->
<!--category_sub_begin-->
<ul class="sub_menu">
<!--/category_sub_begin-->
<!--category_sub_hasnext-->
<li class="sub_list" &align>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="sub_list_end" &align>
<!--/category_sub_end-->
<a href="#c<%category_no>" title="<%category_name>"><%category_name>(<%category_count>)</a>
<!--category_nosub-->
</li>
<!--/category_nosub-->
<!--category_sub_hasnext-->
</li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
</li>
</ul>
</li>
<!--/category_sub_end-->
<!--/category-->
</ul>
<br />
<!-- △ サイトマップ ナビゲーション △ -->

<div class="display_no">
<ul>
<!--titlelist-->
<li Name="<%titlelist_category_no>" ID="<%titlelist_category_no>">
<a href="<%titlelist_url>" title="<%titlelist_body>"><%titlelist_title></a>
-　<%titlelist_year>.<%titlelist_month>.<%titlelist_day>
</li>
<!--/titlelist-->
</ul>
</div>

<!--category-->

<!--category_parent-->■<!--/category_parent-->
<!--category_nosub-->■<!--/category_nosub-->
<!--category_sub_hasnext-->　□<!--/category_sub_hasnext-->
<!--category_sub_end-->　□<!--/category_sub_end-->

<span id="subcategories<%category_no>name">
<a href="<%category_link>" title="<%category_name>" name="c<%category_no>"><b><%category_name></b> (<%category_count>)</a>
</span> <br>

<div id="subcategories<%category_no>list">

<script type="text/javascript">
<!--
var list = document.getElementsByName('<%category_no>');
var elm; var s;
if(list.length > 0) document.write('<ul class="sitemap_list">');
for (var i = 0; i < list.length; i++) {
elm = list.item(i);
s = elm.innerHTML;
if(i == list.length-1) {
document.write('<li class="branch_end">', s,'</li>');
} else {
document.write('<li class="branch">', s,'</li>');
}
}
if(list.length > 0) document.write('</ul>');
FoldNavigation('subcategories<%category_no>','on',false);
//--></script>

<div class="pgtop"><a href ="#mapnavi_title" title="カテゴリ一覧へ戻る">△ カテゴリ一覧へ戻る</a></div>

</div>

<!--/category-->

</div><!-- /maplist -->
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--/titlelist_area-->
<!--▲サイトマップ▲-->


【2009/09/05 追記】IEが対応していないJavaScript (document.getElementsByClassName) を使用したため、IEではサイトマップが正常に表示されない問題がありました。誠に申しわけありませんm(__)m
この問題に対応し上記HTMLを修正しました。以前のHTMLは以下になります。

<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="plugin3_outline">
<div class="plugin3_title" id="mapnavi_title">サイトマップ</div>
<div class="plugin3_body">

<div id="sitemap">

<noscript><p>サイトマップを利用するためには JavaScript を有効にしてください。</p></noscript>

<!-- ▽ サイトマップ ナビゲーション ▽ -->
<b>■ カテゴリ一覧 ■</b><br />
<ul class="main_menu">
<!--category-->
<!--category_nosub-->
<li class="main_list">
<!--/category_nosub-->
<!--category_parent-->
<li class="main_list">
<!--/category_parent-->
<!--category_sub_begin-->
<ul class="sub_menu">
<!--/category_sub_begin-->
<!--category_sub_hasnext-->
<li class="sub_list">
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<li class="sub_list_end">
<!--/category_sub_end-->
<a href="#c<%category_no>" title="<%category_name>"><%category_name>(<%category_count>)</a>
<!--category_nosub-->
</li>
<!--/category_nosub-->
<!--category_sub_hasnext-->
</li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
</li>
</ul>
</li>
<!--/category_sub_end-->
<!--/category-->
</ul>
<br />
<!-- △ サイトマップ ナビゲーション △ -->

<div class="display_no">
<ul>
<!--titlelist-->
<li class="<%titlelist_category_no>">
<a href="<%titlelist_url>" title="<%titlelist_title>"><%titlelist_title></a>
-　<%titlelist_year>.<%titlelist_month>.<%titlelist_day>
</li>
<!--/titlelist-->
</ul>
</div>

<!--category-->

<!--category_parent-->■<!--/category_parent-->
<!--category_nosub-->■<!--/category_nosub-->
<!--category_sub_hasnext-->　□<!--/category_sub_hasnext-->
<!--category_sub_end-->　□<!--/category_sub_end-->

<span id="subcategories<%category_no>name">
<a href="<%category_link>" title="<%category_name>" name="c<%category_no>" id="c<%category_no>"><b><%category_name></b> (<%category_count>)</a>
</span> <br />

<div id="subcategories<%category_no>list">

<script type="text/javascript">
<!--
var list = document.getElementsByClassName('<%category_no>');
var elm; var s;
if(list.length > 0) document.write('<ul class="sitemap_list">');
for (var i = 0; i < list.length; i++) {
elm = list.item(i);
s = elm.innerHTML;
if(i == list.length-1) {
document.write('<li class="branch_end">', s,'</li>');
} else {
document.write('<li class="branch">', s,'</li>');
}
}
if(list.length > 0) document.write('</ul>');
FoldNavigation('subcategories<%category_no>','on',false);
//--></script>

<div class="pgtop"><a href ="#mapnavi_title" title="カテゴリ一覧へ戻る">△ カテゴリ一覧へ戻る</a></div>

</div>

<!--/category-->

</div><!-- /maplist -->
</div><!--/plugin3_body-->
</div><!--/plugin3_outline-->
<!--/titlelist_area-->
<!--▲サイトマップ▲-->


【2009/09/06 追記】この記事の修正はlightframeシリーズのver.05以降、standardシリーズのver.10以降には実装済みです。各バージョン情報はHTMLかCSSの最下部に記されています。


【2009/10/31 追記】サイトマップの各記事へのリンクを別窓で開きたい場合は、以下のように赤い部分を加えてください。

～
<!-- △ サイトマップ ナビゲーション △ -->

<div class="display_no">
<ul>
<!--titlelist-->
<li name="<%titlelist_category_no>" id="<%titlelist_category_no>">
<a href="<%titlelist_url>" title="<%titlelist_title>" target="_blank"><%titlelist_title></a>
-　<%titlelist_year>.<%titlelist_month>.<%titlelist_day>
</li>
<!--/titlelist-->
</ul>
</div>

～





【関連記事】


関連記事
[ 2009/06/07 03:15 ] 修正報告 実装済みカスタマイズ | TB(3) | CM(52)

≪ アイコン付きサイトマップ（親子カテゴリ非対応） | HOME | アイコン付きツリー化リンクをグループで折りたたむ ≫

[ 4603 ]
早速導入させて頂きました。
折りたたみスクリプトも入れたのですが、最初から折りたたみでは無いので、

FoldNavigation('subcategories<%category_no>','off',false);
としました。が、hatenacipsさんに記載されている中に、

＞id の名前が重複していると最初に見つかったブロックのみスクリプトが有効なためです。id にユニークな名前を付ければ解決できるはずですので


id名を変更………(ﾟＡﾟ)？？？？？
ここで相当テンパりました(泣)


その後、小粋空間様のマニュアル通り、jsファイル側でidに指定している<%category_no>をどうにか…と思いつつ頭が回らなくなったので暫く放置になりそうです；

現在クッキーに記憶された分の折りたたみ保持(初期)状態です。
おまけに記事数が多くなってきたのもありページが重いのが難点なので、何とか対策を取らねばですね(^^;)
[ 2009/06/07 11:55 ] [ 編集 ]
[ 4610 ] > ちゃんさん
なるほど、記事数があまりにも多くなる場合、初期状態を折りたたんだ状態にしておくのもいいですね。

たしかに同じID名が複数あると正常に動作しませんが、この記事のスクリプトはID名が重ならないように工夫されているので問題ありませんよ。ちゃんさんのサイトマップも正常に動作しています。


FoldNavigation('subcategories<%category_no>','off',false);
は
<div id="subcategories<%category_no>name">～</div>
の横に折りたたみスイッチを表示し、

<div id="subcategories<%category_no>list">～</div>
を折りたたみます。

FC2の変数 <%category_no>（カテゴリ番号）をID名に利用することにより、ID名が他と重ならないユニークなものにしているのです。
[ 2009/06/08 02:31 ] [ 編集 ]
[ 4618 ]
またまた更新してますねー。
ちゃんさんも、凄い詳しいですね。
うーん、お二人凄いな。
[ 2009/06/09 02:06 ] [ 編集 ]
[ 4619 ] > あなろぐさん
いえいえ、まだまだ更新がリクエストに追いつきません＾＾；
[ 2009/06/09 20:02 ] [ 編集 ]
[ 4623 ]
おお、これは！
ありがとうございます。
さっそく導入してみようと思います。
[ 2009/06/10 00:14 ] [ 編集 ]
[ 4624 ]
早速導入しました！
まだカテゴリごとで折りたたむがうまくできませんがかなりいい感じですね！

一つお聞かせいただきたいのですが、この親子カテゴリサイトマップの記事を古い順に並べるにはどうしたらいいでしょうか？

またお時間あるときに教えていただけるとありがたいです。
[ 2009/06/10 00:29 ] [ 編集 ]
[ 4626 ] > たまさん
for (var i = 0; i < list.length; i++) {

とあるところを

for (var i = list.length - 1; i >= 0; i--) {

と置き換えてください。

この記事にもあらたに追記しました。
[ 2009/06/11 02:35 ] [ 編集 ]
[ 4801 ] 作ってみました
サイトマップを作ってみました
作りながら考えたんですけど
サブカテゴリーが少ないので
プルダウンはどうしようかと
悩んでます＾＾；
[ 2009/07/04 17:25 ] [ 編集 ]
[ 4805 ] > ＡＳＰさん
メニューが少ないときは無理にドロップダウンさせる必要はありませんよ＾＾
[ 2009/07/04 18:55 ] [ 編集 ]
[ 4992 ] 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
[ 2009/07/18 17:28 ] [ 編集 ]
[ 5003 ] のる
お世話になります。
親子カテゴリ対応サイトマップを作ってみたのですが、今上に親子カテゴリがでて、その下にツリー型の全記事がでるのですが、上の親子カテゴリだけを表示するようにできますでしょうか？
[ 2009/07/19 10:37 ] [ 編集 ]
[ 5015 ] > のるさん
<div class="plugin3_body">の下から
</div><!--/plugin3_body-->の上までを書き換えます。

公式プラグインのカテゴリのHTMLを貼付けてください。
[ 2009/07/20 00:01 ] [ 編集 ]
[ 5027 ]
ありがとうございます。私はHTMLの知識がないのでこのサイトとテンプレートは大変助かります。

教えていただいた方法をやってみたのですが、なぜかFC2の全記事表示の画面に飛んでしまいます。

カテゴリ一覧を見れるページを作りたいのですが、別の方法もないか探してみます。

もしサイトマップ以外の方法でもカテゴリ一覧を見れるページの作り方があれば教えてもらえると助かります。
[ 2009/07/20 11:16 ] [ 編集 ]
[ 5029 ] > のるさん
書き換えたカテゴリのHTMLの下に、更に以下を追加してみてください。

<div class="display_no">
<!--titlelist-->
<!--/titlelist-->
</div>
[ 2009/07/20 14:22 ] [ 編集 ]
[ 5041 ] できました！！
助かりました！本当にできて感動です！
ありがとうございます。
[ 2009/07/21 19:14 ] [ 編集 ]
[ 5045 ] > のるさん
解決して良かったです＾＾
[ 2009/07/22 01:15 ] [ 編集 ]
[ 5083 ] はじめまして。
いたおさん、はじめましてこんにちは。
FC2で共有テンプレを公開しているChakoと申します。

以前より色々な記事を度々参考にさせていただいていました。ありがとうございます。
今回当方テンプレのユーザーさんから、カテゴリ別全記事一覧にする方法を教えてくださいというご質問があり、こちらのソースをお借りし、やってみました。

登録テンプレートには使用していませんが、ウチのテンプレ用にアレンジし、カスタマイズ方法としてブログの記事で紹介させていただきたいと思いお邪魔いたしました。

http://beigeheart.blog9.fc2.com/blog-entry-522.html
いたおさんにご覧いただけるように、許可をいただく前に「公開」にしています。

お忙しいときに、突然のお願いで申し訳ありません。
もし不都合がありましたら削除いたしますので、お返事いただけると助かります。
では、用件のみで失礼いたします。
[ 2009/07/25 11:52 ] [ 編集 ]
[ 5085 ] > Chakoさん
紹介してくれてありがとうございます＾＾
当ブログの記事でよければ好きなだけ参考にしてください。

トラックバックも貰えると嬉しいです＾＾
[ 2009/07/25 12:37 ] [ 編集 ]
[ 5086 ] ありがとうございました。
こんなに早くお返事がいただけて嬉しいです。
どうもありがとうございました。
早速トラックバックも送信いたしました。
これからもお世話になると思います。よろしくお願いいたします。
[ 2009/07/25 12:50 ] [ 編集 ]
[ 5087 ] > Chakoさん
トラックバックありがとうございました＾＾

私もChakoさんの記事にお世話になることがあると思います。こちらこそよろしくお願いしたします。
[ 2009/07/25 13:24 ] [ 編集 ]
[ 5227 ]
いつも質問ばかりで申し訳ないのですが、
この間親子カテゴリ対応サイトマップで、
カテゴリ一覧を表示できるようになったの
ですが、カテゴリーがセンター表示に
なっているのを左づめにしたいのですが、
どこをいじればよいか全然わかりません。
教えてもらえませんか？
[ 2009/08/01 20:13 ] [ 編集 ]
[ 5231 ] > のるさん
のるさんの場合、スタイルシートの末尾にこれを追加してみてください。

.main_menu {
text-align:left;
}
[ 2009/08/02 00:25 ] [ 編集 ]
[ 5237 ] できました！
こんなに簡単にできるとは・・・。
ありがとうございます！助かりました！
[ 2009/08/02 09:53 ] [ 編集 ]
[ 5250 ] > のるさん
解決しましたね。良かったです＾＾
[ 2009/08/02 23:46 ] [ 編集 ]
[ 5476 ] はじめまして！
いつも参考にさせていただいております。
このテンプレートはカスタマイズしやすくて嬉しいです。ありがとうございます。

私はstandardのver.08を使わせていただいているのですが、
<!--▲トラックバック表示▲-->
の下に、お知らせいただいた記述を挿入すると
カテゴリごとの一覧の下に全記事一覧が再度でてきてしまいます。

以前の記事にあったように
<!--▼全記事一覧▼-->
～
<!--▲全記事一覧▲-->
を削除して使ってみているのですが、
この方法で問題ないのでしょうか？
教えていただけるとうれしいです。

※今回のこのサイトマップ表示へのリンクは
「最新記事」のプラグインの下部に[記事一覧]として
入れてみました。とっても使いやすいです。
カテゴリが多く、見にくいのと
レイアウトが崩れてしまっているので
どう直そうかと考え中です。
[ 2009/08/16 15:08 ] [ 編集 ]
[ 5478 ] > imoさん
カスタマイズ自体はそれで正しいのですが、古いバージョンのテンプレートに不具合があったために、IE7,8で少し崩れていますね。

まずver.09.1である新たな「white_eagle」をダウンロードし、その

<!--▼サイトマップ▼-->から
<!--▲サイトマップ▲-->まで

を、imoさんのテンプレートに貼付けてください。
そして次のスタイルシートの一行を削除してください。

/* メニューコンテンツ */
.menu_cont3 {
～
width: 100%;
}

これで崩れは無くなると思います。念のため今のテンプレートのバックアップをとっておいてから試してください。
[ 2009/08/16 16:13 ] [ 編集 ]
[ 5485 ]
ありがとうございました！
新しいバージョンで作り直したところキレイに表示されるようになりました。
他にもいくつかカスタマイズをしていたので、一瞬気が遠くなりましたが、
全体を見直すよいきっかけとなりました。

それと、
ツリー表示にする際のイメージ（http://blog-imgs-19.fc2.com/1/0/p/10plate/branch.gif）など
こちらのページの画像にリンクしているものは
このままでも問題ないのでしょうか。
ダウンロードをさせていただくなどして、自分のページに一度アップしたほうがよいのでしょうか。
勝手にダウンロードなども気が引けますので、ご相談させていただきました。
[ 2009/08/16 19:59 ] [ 編集 ]
[ 5486 ] > imoさん
新しいバージョンのテンプレートで１からカスタマイズをやり直したのですか！？よくこの短時間で完成させましたね凄いです＾＾；

記事でそれを説明するのが面倒で端折ってしまいましたが、ツリー化の画像は直リンクよりもダウンロードしてお持ち帰りしてくれたほうが有り難いです＾＾
[ 2009/08/16 20:10 ] [ 編集 ]
[ 5487 ]
再度、ありがとうございました！
画像もお借りします！

またよろしくお願いします！
[ 2009/08/16 20:57 ] [ 編集 ]
[ 5488 ] > imoさん
また何かあれば何でも聞いてください＾＾
[ 2009/08/16 21:10 ] [ 編集 ]
[ 5908 ] はじめまして。
いつも参考にさせていただいております。
このテンプレートはカスタマイズしやすくて感謝しています。

素人な質問で申し訳ないのですが
カテゴリのサイトマップの画面でカテゴリの上を画像に
変えるにはどのようにしたらよろしいのでしょうか？

よろしくお願いします！
[ 2009/09/07 13:16 ] [ 編集 ]
[ 5913 ] > ひろりんパパさん
カテゴリページの便利ナビのことを言ってるのでしょうか。
もしそうならスタイルシートの末尾にこれを加えてください。

various_title {
background-image: url("画像URL");
}
[ 2009/09/07 19:50 ] [ 編集 ]
[ 5923 ] ありがとうございます。
質問の仕方が悪かったようです。

カテゴリの親の部分をクリックするとカテゴリ－名と子の
一覧が出てきます。

そのカテゴリの色を画像に変えたいのですが・・・
どのようにしたらよろしいでしょうか。

上記も試したところ、カテゴリの背景色は水色のままでした。
[ 2009/09/08 00:08 ] [ 編集 ]
[ 5924 ] > ひろりんパパさん
申しわけありません。大事なドット「.」を忘れていました。ドットをその行の先頭に加えてください。

.various_title {
background-image: url("画像URL");
}
[ 2009/09/08 00:16 ] [ 編集 ]
[ 5926 ] ありがとうございました。
画像になりました。

ありがとうございます！助かりました！
これからも色々カスタマイズしたいのでまた宜しくお願いします！
[ 2009/09/08 00:48 ] [ 編集 ]
[ 5941 ] たびたびすみません。
今日になって気が付いたのですが

トップページの記事の背景の１部分だけ透過されています。
便利ナビと記事単体では正しく表示されるのですが・・・

記事を増やしてみたりしたのですが、同じ記事だけ背景が透過されます。

どのようにしたらよろしいのでしょうか？宜しくお願いします。
[ 2009/09/09 01:12 ] [ 編集 ]
[ 5942 ] > ひろりんパパさん
IEだけその現象が見られるようですね。
記事の中のタグが正しくない可能性があります。一度その記事の内容をメモ帳等にとっておき、その一部を少しずつ記事に貼付けて表示してみてください。その現象が起きたときに問題となる部分を見つけられると思います。
[ 2009/09/09 06:07 ] [ 編集 ]
[ 5944 ] ありがとうございました。
記事の中のタグが正しくなかったです。

ありがとうございました。
[ 2009/09/09 11:37 ] [ 編集 ]
[ 5948 ] > ひろりんパパさん
解決して良かったです＾＾
[ 2009/09/09 18:49 ] [ 編集 ]
[ 6721 ] はじめまして★
サイトマップ作成お借り致しました^^
うまく表示できて満足しているのですが
親子カテゴリー対応のサイトマップから、個別記事を別窓で開くには
どうしたら宜しいでしょうか？

親子カテゴリー非対応のhtml書き換え部分が、対応の物の中に見当たらなくて、、、
お忙しいところ恐縮ですが、宜しくお願い致します。
[ 2009/10/30 07:41 ] [ 編集 ]
[ 6729 ] > 乃亜さん
記事に追記したのでこちらを参考にしてください。

【2009/10/31 追記】
http://10plate.blog44.fc2.com/blog-entry-220.html#a20091031
[ 2009/10/31 00:15 ] [ 編集 ]
[ 6785 ] 別窓で開けるようになりました！！
追記までして頂いてありがとうございました！！
無事別窓で開けるようになりました。
大満足です(*^_^*)
今後とも宜しくお願い致します。
[ 2009/11/04 09:16 ] [ 編集 ]
[ 6793 ] > 乃亜さん
お役に立てて良かったです＾＾
[ 2009/11/04 23:44 ] [ 編集 ]
[ 7097 ] 先日はありがとうございました！
先日はお世話になりました＾＾
親子カテゴリ対応があったんですね・・・(^_^;)
早速こちらを使わせていただきました。
勝手ですが記事に使おうかな・・・って思います。トラックバックもさせていただきます。
今後も参考にさせてください！
[ 2009/11/22 03:34 ] [ 編集 ]
[ 7112 ] > ゆぅたろさん
私の記事で良ければどうぞ参考にしてください。
トラックバックありがとうございました＾＾
[ 2009/11/23 13:10 ] [ 編集 ]
[ 8224 ] ボロボロ
このサイトマップ使ってますが、記事数が多くなって、途中に表紙の表示は出るし、展開すると島まで行ってしまうのですが、どうなったのでしょうか？
[ 2010/02/04 22:16 ] [ 編集 ]
[ 8228 ] > sakuraiさん
> sakuraiさん
カスタマイズしていないテンプレートならばサイトマップの折り畳みを使っても正常に表示されるのを確認しました。

おそらくsakuraiさんが他に施しているカスタマイズのjavascriptと、サイトマップの折り畳みスクリプトの相性が悪く競合しているのではないかと思います。

サイトマップの折り畳み機能
FoldNavigation('subcategories<%category_no>','on',false);
を削除して正常に表示されるか確認してみてください。
[ 2010/02/05 00:29 ] [ 編集 ]
[ 8231 ] はい　やってみます
FoldNavigation('subcategories<%category_no>','on',false);
を削除してもダメでした。
それから、最近入れた、タグクラウドとタグメニューもダメでしたので、初期設定で閉じる状態にして、チョコチョコとやっていきます。
[ 2010/02/05 07:48 ] [ 編集 ]
[ 8233 ] 一応
javascript絡みは全然わからないので、何でもスクロールに逃げました(^_^;)
[ 2010/02/05 13:08 ] [ 編集 ]
[ 8243 ] > sakuraiさん
sakuraiさんの記事に「"新"メニューの考察」等、ダブルクォーテーション「"」を使ったものをいくつか見つけました。これはHTMLやjavascriptに影響を与えてしまうので違う記事タイトルに書き換えたら上手くいくかもしれません。

縦に長過ぎるサイトマップにスクロールを使うのは、それはそれでとても良い方法だと思います＾＾
[ 2010/02/06 01:51 ] [ 編集 ]
[ 8250 ] すいませでした
「"」ダメだったのですね。一応はずしました。
検証する時間がないので、
結果として「なんでもスクロールも」ありかなと思いますので、そのままにしておきます。
でも、夜遅くまでありがとうございます。
[ 2010/02/06 11:46 ] [ 編集 ]
[ 8258 ] > sakuraiさん
「なんでもスクロール」は便利ですね＾＾
[ 2010/02/07 02:17 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

全記事一覧をカテゴリ別に表示する
全記事一覧をカテゴリ別に表示するには、どうすればいいですか？というご質問がありました。 現在FC2に用意されている通常の変数だけではこの...
[2009/07/25 12:45] BeigeHeart_べーじゅのこころ
カテゴリ別サイトマップの追加
ブログを始めて６カ月以上が経ち、記事数も２００近くになっています。 全記事一覧は表示出来るようになっていますが、「これを何とかカテゴ...
[2009/11/22 20:30] ☆初心者さんのヤフオク講座＆ネタ切れ防止日記☆
カスタマイズあれこれ
１）ファビコン 私の場合はFc2Blogを利用しているので お馬さんのマークが出るのが普通ですが、 ちょっとテンプレート（HTML）をいじると ←の...
[2010/01/13 18:40] Ce qui sera, sera

≪ アイコン付きサイトマップ（親子カテゴリ非対応） | HOME | アイコン付きツリー化リンクをグループで折りたたむ ≫

ブログ内検索1



サイトマップ

カテゴリ別全記事一覧表示

カテゴリ
お薦め カスタマイズ

【共通】


【lightframe】
【standard】
【スマホ用】

プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
iPhoneアプリも作ってます
ありがとうございます

先生達

RSSフィード
カレンダー
02 | 2023/03 | 04
日 月 火 水 木 金 土
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

02 | 2023/03 | 04
日 月 火 水 木 金 土
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
サイト外タグ検索
ユーザータグ

メニューバー よくある質問 



△ ページトップへ戻る