03

16

テンプレート2、3 - サイトマップをカテゴリ別に表示

はてなブックマークに追加 Yahoo!ブックマークに登録 このエントリをlivedoorクリップに登録  2008-03-16
 テンプレート2と3のヘッダーナビに表示されているsitemapですが、そのままだと記事が新しい順に並んでいるだけです。これでは見にくいと思われる方もいるのではないでしょうか?そこでカテゴリ別に並べ替えることもできます。
 じゃあ最初からカテゴリ別にしないのかと思われるかもしれませんが、カテゴリ名を各自入力しないといけないのでできませんでした。で、実際設置したものはこちらをご覧ください。  これならすっきりしていて見やすいかと思います。変更するにはテンプレートの<!--▼サイトマップ▼-->以下を下記のように変更する必要があります。
<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="menu_outline3">
<div class="sitemap_teitle">カテゴリ別サイトマップ</div>
<div class="menu_cont3">
<div id="maplist">
<ul><!--titlelist--><li>
<span><%titlelist_category></span>
<a href="<%titlelist_url>"><%titlelist_title></a></li>
<!--/titlelist--></ul>
</div><!--/maplist-->
</div><!--/menu_cont3-->
</div><!--/menu_outline3-->
<script type="text/javascript"><!--
var A=document.getElementById('maplist').getElementsByTagName('A');
var S=document.getElementById('maplist').getElementsByTagName('span');
var C=new Array(); var I=""; var Flg=false;

/*--- カテゴリ名を記述 ---*/
C[0]="カテゴリ名1";
C[1]="カテゴリ名2";
C[2]="カテゴリ名3";
C[3]="カテゴリ名4";
C[4]="カテゴリ名5";
C[5]="カテゴリ名6";

/*------------------------*/

for (i=0;i<C.length;i++) {
Flg=false;
I=I+'<p><b>【 '+C[i]+' 】</b></p><ul>';
for (j=0;j<S.length;j++) {
if (C[i]==S[j].innerHTML) {
if (Flg==true) {
I+='<li><a href="'+A[k].href+'">'+A[k].innerHTML+'</a></li>';}
k=j;Flg=true;}}
I+='<li class="end"><a href="'+A[k].href+'">'+A[k].innerHTML+'</a></li>';
I+='</ul><br />';}
document.getElementById('maplist').innerHTML=I;
--></script>
<!--/titlelist_area-->
<!--▲サイトマップ▲-->
 カテゴリ名は実際ブログにあるものを入力し、カテゴリ数は自由に追加できます。このままでは記事名だけしか表示されませんので、記事の表示方法を解説します。ポイントは赤で表示している部分です。
<a href="<%titlelist_url>"><%titlelist_title>(<%titlelist_month>/<%titlelist_day>)</a>
例えば上記のように変更すると下記のように投稿日付が表示されます。
記事タイトル(3/16)
表示方法は下記のタグを組み合わせると自由に変更できます。
<%titlelist_year> - 年
<%titlelist_month> - 月
<%titlelist_day> - 日
<%titlelist_hour> - 時
<%titlelist_minute> - 分
<%titlelist_second> - 秒
<%titlelist_youbi> - 曜日
<%titlelist_wayoubi> - 和曜日
にほんブログ村 IT技術ブログ Webサイト構築へ 人気ブログランキングへ fc2ブログランキングへ
関連エントリー
コメント
すいません、記事に画像を貼った時、画像が大きいせいか、ブログを見たとき
異常にカーソルを、下に回さなきゃ記事が見れなくなるんです。

他のブログは、画像が小さくなっていて、クリックしたら
新規ウィンドウで、大きいのが開かれるんですが・・・・。


アナタのスゴイ事に比べてみれば、めっちゃレベルの低い事かも
しれませんが、お願いです、教えて下さい
【2008/03/17 20:34】 | 蛇火鬼 #- | [edit]
はじめまして。
テンプレートお使いいただきありがとうございます。

では、実物を見ていないので見当違いかも
しれませんがお答えさせていただきます。

 「他のブログは、画像が小さくなっていて、クリックしたら  
  新規ウィンドウで、大きいのが開かれるんですが・・・・。 」

ということですが、たぶん元の画像でなくサムネイルを
作って表示しているのだと思います。

画像をアップする際にサムネイルも作成しておいて
(「同時に作成する」というチェックボタンがあります)
「サムネイルで記事を書く 」というボタンで画像を指定すると
仰るような表示方法になります。

ということで今後もよろしくお願いします〜
【2008/03/17 20:52】 | 管理人 #6urEx/7U | [edit]
おーー、本当だっ!
サムネイルにしたら、本当に画像が小さくなって、
願ってたどうりになりました!

こんな事に、親切に教えて下さってありがとうございます。m(_ _)m
これからも、参考にしていきまっすm(___)m
【2008/03/18 18:47】 | 蛇火鬼 #- | [edit]
解決できてよかったです〜♪

これからもよろしくお願いします。
【2008/03/19 00:31】 | 管理人 #6urEx/7U | [edit]
すばらしいテンプレートの公開、本当にすごいと思います。
ここで質問させていただきます。

http://blog78.fc2.com/m/meguri0721/file/karamuoti.jpg
このように右カラムが左カラムの下へと落ちてしまいます。
ちなみにテンプレートには手を加えておりません。
なにかしらの条件で落ちてしまうということは考えられないのでしょうか?
もしよろしければご助言をいただけると幸いです
【2008/03/19 01:58】 | meguri #- | [edit]
はじめましてmeguri さん。
テンプレートに興味いただきありがとうございます。

画像だけなのでひょっとすると違うかもしれませんが
おそらく右プラグインの中身がテンプレートの幅を超えてしまっているので
右に回りこまずに下にいってしまっているのだと思います。

そういった場合#rightの長さを広くすると表示されるかと思います。
そのとき#container、#box2 も同じだけ広くする必要があります。

テンプレートの仕組みはこちらをご参考に。
http://weboook.blog22.fc2.com/blog-entry-75.html

見当違いならごめんなさい。
【2008/03/20 20:47】 | 管理人 #6urEx/7U | [edit]
お答えいただきありがとうございます。
自分の技量のなさにはほんとにあきれてしまいます。

参考のテンプレートの仕組みを見たおかげで大体の構造がつかめたみたいです。
またいたらないところがあったら、図々しいようですがまたお願いいたします。
【2008/03/21 01:08】 | meguri #- | [edit]
このコメントは管理人のみ閲覧できます
【2008/03/31 11:13】 | # | [edit]












管理者にだけ表示を許可する
トラックバック
トラックバックURL:
http://weboook.blog22.fc2.com/tb.php/82-54993566
≪ トップページへこのページの先頭へ  ≫
sponsored

カテゴリー
タグランキング

最近のコメント
最近のトラックバック
月別アーカイブ
ブログパーツ色々
フィードメーター - レッツFC2ブログ! track feed

過去ログ +