top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_119

サイトマップ:よっしゃぁ!できた。欲しかったんだ! ・・・ 【サイトマップ】

 2008-07-16
大変失礼しました。IEで うまく getElementsByName が
とれなかぅたので、getElementsByTagName を基にした形に
作り変えました。

 ※いないと思うけど
  最初のソースを持っていった方がいたらごめんなさい。


  すみません。
 下記 一部おかしいところ見つかり
 ただ今調整中です。(あ~恥ずかしい)
 

 このブログも開設して早5ヶ月目。記事も随分溜まってきた。
 一応、個人的な「メモ」としても機能させたかったし
 ブログであろうとサイトには違いないのに・・・

 「サイトマップ」がなかった。
  記事一覧(アーカイブ)とは違い
  あくまでも カテゴリを基にした サイトマップ

 そして
 「FC2ブログのテンプレート工房」さんの頁を見つけた。
 すばらしい!

 しかし、ほんとになまけもののmetaboy は、
  ・カテゴリを指定する ことさえいやだった。

 で、「その他」を除くカテゴリを自動抽出して生成する「サイトマップ
を創ったぞー!

 ・・・あんまりいばれない。
インスパイアされた
FC2ブログのテンプレート工房」のおかげです。
ありがとうございました。

 ※getElementById の display のオンオフしてることぐらいが
  工夫ですがね

一応、ソース掲載しておきます。もし 使えるようでした、どうぞ
お使いください。(2008/07/17 修正済み)


<!--▼サイトマップ▼-->
<!--titlelist_area-->
<p class="sitemap-p"><%blog_name> サイトマップ( 全記事リスト )</p>
<div id="sitemaplist">
<div id="sitemap_cate">
<ul><!--category-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category--></ul>
</div>
<div id="sitemap_list">
<ul><!--titlelist-->
<span><%titlelist_category></span>
<li><a href="<%titlelist_url>"><%titlelist_title></a></li>
<!--/titlelist--></ul>
</div>
</div>
<script type="text/javascript"><!--
var s_cate=document.getElementById('sitemap_cate').getElementsByTagName('A');
var c_list=document.getElementById('sitemap_list').getElementsByTagName('span');
var s_list=document.getElementById('sitemap_list').getElementsByTagName('A');
var outstr = "";
for (var c=0;c<s_cate.length;c++) {
if(s_cate[c].innerHTML!='その他'){

outstr += "<li>【 ";
outstr += "<a href=\"" + s_cate[c].href + "\">";
outstr += s_cate[c].innerHTML;
outstr += "</a>";
outstr += " 】</li>";
outstr += "<ul>";
for (var l=0;l<s_list.length;l++) {
if(c_list[l].innerHTML==s_cate[c].innerHTML){
outstr += "<li>";
outstr += "<a href=\"" + s_list[l].href + "\">";
outstr += s_list[l].innerHTML;
outstr += "</a>";
outstr += "</li>";
}
}
outstr += "</ul>";
}
}
if(outstr!=''){
outstr = "<ul>" + outstr + "</ul>";
document.getElementById('sitemaplist').innerHTML=outstr;
document.getElementById('sitemaplist').style.display = "block";
}
--></script>
<!--/titlelist_area-->
<!--▲サイトマップ▲-->



以下は css です。

#sitemaplist {
display:none;
margin-top:5px;
}





FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ
commentsコメント
はじめまして。大変便利そうだったので
早速コピペして使わせていただきました♪ありがとうございます。
そこでちょっと質問があるのですが
カテゴリーのURLのリンクを外し、文字色と大きさを変えて
右の方に少し動かしたいのと、
記事タイトルの前の○を外したいのですがどういじれば良いでしょうか?

こうなっているのを
●カテゴリーA(リンクあり)
 ○記事a(リンクあり)
 ○記事b(リンクあり)
 ○記事c(リンクあり)

こういう感じにしたいのですが・・・
 ●カテゴリーA(リンク無し)←文字の大きさ・色を変える
 記事a(リンクあり)
 記事b(リンクあり)
 記事c(リンクあり)

よろしければ教えていただけたら嬉しいです、よろしくお願いします。
【2009/01/19 19:02】 | meg #- | [edit]
こんにちは。コメントありがとうございます。
お役に立ててうれしいです。
ご質問ですが・・・
 ・リンクはずすとかは簡単ですよ
outstr += s_cate
  の前後の行をとるだけ
 ・○と入っているのは、リスト扱いで<ul>使っている
  だけですから、リスト扱いやめて
  単純に<span>タグで囲むようにして
  その<span>にスタイルクラス用意して、
  そこで、文字の大きさを設定してあげれば
 よろしいのではないでしょうか?
単純なHTMLですので、いろいろ試されてはいかがですか?

【2009/01/19 21:50】 | metaboy #- | [edit]
お返事ありがとうございます。
リンクと○の方は教えていただいた通りでどうにか出来ました。
しかしspanのやり方がちょと分からないです;;
<span class="xxx"><!--category-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category--></span>
にして
下のほうも
outstr += "<span>";
for (var l=0;l<s_list.length;l++) {
~~
}
outstr += "</span>";
で、CSSで大きさや色を変化させるでは
何も変化がおきないので間違っているんでしょうか・・・。
【2009/01/20 01:37】 | meg #- | [edit]
返事遅れてすみません。
この仕組みを理解していただけるとわかって
いただけると思うのですが、
・最初に
<span class="xxx"><!--category-->
<li><a href="<%category_link>"><%category_name></a></li>
<!--/category--></span>
と設定されたものは、結局
・outstr で置き換えられてしまいます。
 したがって、classを設定するのは
outstr の方で、
・outstr += "<span>"; にきちんとクラス名入れるか
・ロープの中で、
 入れたい部分に<span class='classname'>入れて
 制御する形になると思います。

【2009/01/20 17:45】 | metaboy #- | [edit]
すいません、やっと少し理解できました。
ようするに
outstr += "<div class="asdf">【 ";

outstr += " 】</div>";
(●を入れたい場合は<li></li>も入れる)
でOKなのですよね?
ページのソースを見て初めてjavascriptは表示されたhtmlから置き換えられるものだと知りました・・・。
てっきりページを表示した時から置き換えられているものだと思ってました(汗
javascriptオフの時の表示がちょっと変みたいなので
そこらへんを頑張って修正しながら頑張りたいと思います。
アドバイス大変参考になりました。ありがとうございました。
【2009/01/20 21:37】 | meg #- | [edit]
よかったですね。
いろいろ苦労してうまく行くと
ほんと嬉しいものです。
どうぞ気張ってください。
ありがとうございました。
【2009/01/20 21:42】 | metaboy #- | [edit]
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/119-27ebe568
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。