dearborn

アクセスカウンタ

zoom RSS カレンダーを横長1行タイプにする

<<   作成日時 : 2005/12/06 03:05   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

ウェブリブログのカレンダーは、サイドバーの中にテーブル形式で表示されます。これを他のblogツールでもあるような、横一列の形式で表示してみましょう。完成形は、サイトトップ http://dearborn.at.webry.info/ の上部に表示されていますので見てみてください。

その他の機能拡張記事については「独自にウェブリブログ機能強化中」を参照してください。

おすすめ欄をサイドバーの一番上に表示」で行ったように、新たにdivタグを生成して、insertBeforeで追加する方法でも可能だと思いますが、少し別の方法で実装しています。こちらの方が原始的で力技っぽいかもしれません。

前回と同様にフリースペース欄へJavascriptを記述します。もちろん外部ファイル化してもOKです。
<script type="text/javascript">
<!--
addHorizontalCalendar();

functionaddHorizontalCalendar(){
var obj;
var node;
var cap;
var data;
var delimiter = "";
var outputText = "";
ここに書いていきます。
}
//-->
</script>

カレンダーのデータはサイドバー部分のdiv id=calendarに存在します。そこから内容を取ってきて細工します。calendarのdivがないページの場合は以降の処理は行いません。
//要素取得
obj = document.getElementById('calendar');
if(obj==null) return;

captionに月表記が記述されていますので、それを取得します。
//月取得
node = obj.getElementsByTagName('caption');
cap = node[0].innerHTML;

tableのtbodyに日付データがあります。
//日取得
node = obj.getElementsByTagName('tbody');
data = node[0].innerHTML;
data = data.replace(/(<tr>|<\/tr>|<td>|<\/td>|\n)/ig,"");

最後の行でテーブル関連タグ(tr,td,改行)をすべて取り除いています。こうすることで1行のテキストとして編集されました。なお、theadにある曜日表示は今回は使用しないので無視しています。

月表示形式の微調整をします。ページによって微妙に異なる月表示を修正します。黄色部分は半角スペースが入ります。
//生成
if(cap.match(/月&nbsp; <\/a>/i)){
outputText = cap.replace(/月&nbsp; <\/a>/i, "月&nbsp;</a>"+":"+data);
}else{
outputText = cap.replace(/月 &nbsp;/i,"月&nbsp;:"+data );
}

ここで作成したHTMLを挿入する先のオブジェクトを取得します。bannerが挿入先に該当します。
//挿入先要素取得
obj = document.getElementById('banner');

作成したHTMLを<p id='h-calendar'>としてくくり、bannerのHTML末尾に追加します、
obj.innerHTML += "<p id='linedcalendar'>" + outputText + "</p>";

Javascriptは以上で終了です。この時点で表示させると横1列カレンダーが表示できると思います。しかしサイドバーにあるカレンダーも表示されたままです。それを消してみましょう。cssの設定で、下記のようにします。
#calendar{ display: none;}

これで完成です。あとは前回同様にh-calendar自体のデザインをCSS等で設定してください。


Javascriptソース全体。関数化しています。
<script type="text/javascript">
<!--
addHorizontalCalendar();

functionaddHorizontalCalendar(){
var obj;
var node;
var cap;
var data;
var delimiter = "";
var outputText = "";

//要素取得
obj = document.getElementById('calendar');
if(obj==null) return;

//月取得
node = obj.getElementsByTagName('caption');
cap = node[0].innerHTML;

//日取得
node = obj.getElementsByTagName('tbody');
data = node[0].innerHTML;
data = data.replace(/(<tr>|<\/tr>|<td>|<\/td>|\n)/ig,"");

//生成
if(cap.match(/月&nbsp; <\/a>/i)){
outputText = cap.replace(/月&nbsp; <\/a>/i, "月&nbsp;</a>"+":"+data);
}else{
outputText = cap.replace(/月 &nbsp;/i,"月&nbsp;:"+data);
}

//挿入先要素取得
obj = document.getElementById('banner');
obj.innerHTML += "<p id='linedcalendar'>" + outputText + "</p>";
}
//-->
</script>

その他の機能拡張記事については「独自にウェブリブログ機能強化中」を参照してください。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
URL(任意)
本 文
カレンダーを横長1行タイプにする dearborn/BIGLOBEウェブリブログ
文字サイズ:       閉じる