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


関連カテゴリー
スポンサー広告 Trackback(-) | Comments(-) | [編集] | 投稿者 kyaro ri
サイトマップ(親子カテゴリ)を作る方法
サイトマップを作る方法を紹介します♪

サイトマップとは、全記事が表示されているページのことで、
このブログで言うとこちらのページのことです→サイトマップ

FC2ブログのサイトマップは最初から公式プラグインを追加するとFC2ブログの指定の形のサイトマップを表示することが出来ます。

公式プラグインの追加
  ↓
全記事表示リンク


でもこれだと見た目が悪いので、同じデザインにする方法を紹介します。


親子サイトマップの作り方


HTMLを編集します。
挿入する場所はどこでもいいんですが、私はトラックバックの下に挿入しています。
私が使っているテンプレートの場合・・・

<!--/trackback-->
<!--/trackback_area-->
<!-- △トラックバック部分ここまで△ -->
ここに挿入


<!--△トラックバック部分ここまで△-->の下に、下記を挿入しています。

<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="entry_box">
<div class="entry_title" id="mapnavi_title">サイトマップ</div>
<div class="entry_text">

<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-->
<!--▲サイトマップ▲-->



entry_box
entry_title
entry_text

この部分はテンプレートによって違います。
自分が使用しているテンプレートと見比べて、それぞれ変えてください。

<div class="entry_box">

これは記事全体の枠のことです。テンプレートのhtmlを見て、<!--topentry--> のすぐ下にあると思います。
テンプレート内で、「Ctrlキー」+「Fキー」を押すと、検索窓が出てくるので、<!--topentry-->と入れて探してみてください。


<div class="entry_title" style="text-align: center;" >題名を入れる</div>

これは、これは記事のタイトルのことです。から少し下にあります。
多分<div class="entry_box">のすぐ下にあると思います。


<div class="entry_text">

これは記事の書式のことです。
<div class="entry_title">の下にあると思います。





3箇所を変えたら、次にスタイルシートの一番下に以下を加えてください。

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

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

.display_no {
display:none;
}

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


これで公式プラグインを使用して、同じデザインのサイトマップが出来ます。


参考記事→FC2ブログのテンプレート工房
関連記事


関連カテゴリー
FC2ブログカスタマイズ Trackback:(0) | Comments:(7) | [編集] | 投稿者 kyaro ri
コメント
このコメントは管理人のみ閲覧できます
2010-04-19 月  14:17:28 |  URL |  # [編集]
おぉぉ~コレもイイですねぇ♪
ライター記事が多いので まぁいいか…と放置してましたが やっぱりマップがあれば 滞在時間も長くなりますもんね!
今度 挑戦してみまーす♪
2010-04-19 月  16:56:24 |  URL | ちゃんぱか #- [編集]
サイトマップがあればメニューが簡素でもまぁ許されるかなぁ・・・と思っていますw
2010-04-19 月  17:36:21 |  URL | きゃろり #8Eq7AU5U [編集]
このコメントは管理人のみ閲覧できます
2010-04-19 月  21:19:01 |  URL |  # [編集]
このコメントは管理人のみ閲覧できます
2010-04-20 火  02:09:30 |  URL |  # [編集]
こんばんは^^
遅くに失礼します。サイトマップできました!
ありがとうございます♪

今度は折りたたみに挑戦してみま~す。
2011-06-24 金  01:46:14 |  URL | テカひめ #- [編集]
ひゃ~私にもできましたよ♪ありがとうございます。ストーカーのように毎日何回もおじゃましてスミマセン…また来ますね♡
2013-03-14 木  18:21:41 |  URL | るあぼんちゃん #- [編集]
コメントの投稿


管理者にだけ表示を許可する

トラックバック

この記事にトラックバックする(FC2ブログユーザー)



Copyright © 子育てしながらお小遣い稼ぎ ネットで内職 All Rights Reserved. Powered By FC2. 
skin:*cuteblog*    美容用品 /妊娠.出産
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。