解決済

横一列カレンダーはできないでしょうか?

他のブログサイトのテンプレートでよく見かける

本文上あたりにある横一列のカレンダーを

ライブドアのブログで作るのは

無理でしょうか?(ノ∀;`)

いい方法ありましたらご回答お願いしますm(_ _)m

ちなみにCSSの方はとりあえず作ってあるので

あとはHTMLタグの方が問題なのですが・・・・・

2006-11-30 09:34の質問
ブログ  ライブドア  カレンダー  カスタマイズ  
ライブドアブログ
ライブドアブログ のホームページはこちらです
blog.livedoor.com/
この質問と回答を読んで役に立った場合は「役に立つ質問」に投票してください。投票が多い質問は、役に立つ質問一覧に掲載され、より多くの人に見てもらうことができます。
Ads By Google

回答(4)

4.

2006-11-30 17:18:37ベスト
やや難しいです。もしかして、すでに誰かが作っていて公開している可能性もありますが、私はその辺のことはよく知らないので、試作してみます。

ただ一列にするだけなら、trをinlineにすれば一列になりますが、サイドバーの中にあることが大きな問題です。なので、サイドバーから取り出して、本文の上あたりにコピーして、そこにスタイルを設定する方針でいきます。手順は以下の通りです。

1.HTML中にコピー先の入れ物を記述する
カスタマイズ/管理→デザインの設定→カスタマイズ→トップページと辿ってトップのHTMLテンプレートを出しましょう。
<div id="blogcontainer">
の手前に、
<div id="newcalendar"></div>
を記述して下さい。また、一番下の方の</body>の前あたりに、次のJSを入れて下さい。
<script type="text/javascript" src="ttp://mar.lar.jp/knowledge/calendarconverter.js"></script>
(ナレッジの仕様により、ttp→httpと置き換えて使用してください。)
[この内容で保存する]を押して保存しましょう。

2.CSSを編集する
今度は、スタイルシート(CSS)を編集します。テンプレートだけ示しますので、ご自身の好みに合わせて調整して下さい。
#newcalendar{
}
#newcalendar span.monthyear{ /* 月・年 */
font-size:10px;
}
#newcalendar a.prepost{ /* 前の月と次の月へのリンク */
font-size:10px;
text-decoration: none;
}
#newcalendar table{ /* カレンダー本体 */
display:inline;
width:80%;
background-color:#99ffff;
}
#newcalendar tr.odd{ /* 必須 */
display:inline;
}
#newcalendar tr.even{ /* 必須 */
display:inline;
}
#newcalendar td{
}
#newcalendar span.calendar{ /* カレンダーの中の数字 */
width:15px;
font-size:10px;
}
[この内容で保存する]を押して保存しましょう。

3.再構築
編集したトップページとデザイン(CSS)を再構築しましょう。

ここまでやったら、あとは確認しながらCSSを納得のいくように調整して下さい。満足したら、個別ページ、アーカイブページなども1と同じ変更をして、保存、再構築しましょう。
回答レベル : 回答

長々とどうもです(ノ∀;`)

試行錯誤やってみますm(_ _)m

1.

2006-11-30 10:42:28ベター
出来ません。あきらめてください。
自作する?
回答レベル : 回答

やっぱ無理っぽいすね(ノ∀;`)

2.

2006-11-30 11:14:56ベター
 月間カレンダーの横一列表示や文字の色などを変更できるフリーソフト「WtCal」というのがあるようです。

http://www.forest.impress.co.jp/article/2002/10/23...

ダウンロードするサイトは

Wt Series(「WtCal」ダウンロードページ)
http://www.ylw.mmtr.or.jp/~shiraki/wtseries.html

どうぞお試し下さい。
回答レベル : 回答

参考にしてみますm(_ _)m

3.

2006-11-30 12:53:20ベター
他のブログサイトのソース見てタグをパク・・じゃなくて参考にすればいいんじゃないでしょうか。
ライブドアのブログはHTMLのカスタマイズもできますし。

パク・・じゃなくて参考に試行錯誤してみますm(_ _)m

Ads By Google

コメント(10)

#1.  g7zs
2006-11-30 16:06:30

カレンダーの表示は多少CGI(?,PHP?)部分も関わってきたりするから難しいかなー、と思うんですが、実際どうなんでしょう? < 詳しい人or中の人

2006-11-30 17:19:06

>>#4
ちなみに、もとのカレンダーはサイドバーの下の方にでも追いやればいいと思いますが、消すなら、1のJSの記述の前に、
<script type="text/javascript">
cc_delete_original=true;
</script>
と入れると、結構見えなくなります。決して、サイドバーから削除はしないようにして下さい。適当に作ったので、CSSを結構調整しないとアレかもしれません。コメント頂ければ幸いです。

2006-12-01 20:27:19

★オニキス☆さんのやり方は

つまり元々のカレンダーを横に表示してしまおう

ってことかしら?

やってみていろいろ修正してみたんですが

どうも表示が崩れますね(ノ∀`;)

2006-12-01 20:59:02

>>#3
CSSを書いていらっしゃるとのことなので、急いでいたこともあって、細かいCSSは省略させて頂きました。元々のカレンダーのテーブルだけ取り出して、処理する方針です。もう少し扱いやすいように改良した方がいいでしょうか・・・。

いえ、回答1~3の上位回答者の方々が微妙だったので、勢いで回答したのですけど、責任をとって改良することにします。

2006-12-01 21:48:19

>>#4
うちもその後、修正して見たんですが
ちょっと難しいですね(ノ∀`;)

日にちのリンクがうまくいかないので
日にちを省略して極端的ではありますが
月ごとのカレンダーを作ってみました(≧Д≦)ゞ

最悪これで行こうと思っていますので
あまりお気になさらずにm(_ _)m

ちなみにttp://mar.lar.jp/knowledge/calendarconverter.jsは何のJSだったのでしょうか?

2006-12-01 22:09:30

>>#5
そのJSでページ内にあるカレンダーを特定して、テーブルを<div id="newcalendar">~</div>の中に吐き出しています。カレンダーにIDを振ってくれていないので、ちょっと処理が面倒なのです。。。

#7.  コジー
2006-12-02 01:41:36

あ、出来るんだ。
すごいことですね。
頑張ってください。

2006-12-02 03:06:40

かなり改善しました。テーブルごと撤去して表示するようにしました。

回答1の手順1のHTMLタグを以下のようにして下さい。
<script type="text/javascript">
cc_delete_original=false;
</script>
<script type="text/javascript" src="ttp://mar.lar.jp/knowledge/calendarconverter2.js"></script>
ttp→httpとして下さい。

CSSの方は、以下の通りです。

#newcalendar{
 margin:0px;
 padding:0px;
 border:0px;
}
#newcalendar span.monthyear{
 font-size:11px;
}
#newcalendar a.prepost{
 font-size:11px;
 text-decoration: none;
}
#newcalendar span.calendar{
 margin-left:1px;
 background-Color:#ff99ff;
 width:20px;
 font-size:11px;
}

かなりすっきり表示されると思います。しばらく↓にサンプル設置してます。
http://blog.livedoor.jp/pear0307/

2006-12-02 07:30:29

★オニキス☆さんありがとう御座いましたm(_ _)m

だいぶ兆しが見えてきたので

これを元にアレンジしてみます(≧Д≦)ゞ

ところでこのJSはオリジナルで作ったのですか?

2006-12-02 17:18:05

>>#9
オリジナルです。DLしていじって頂いてもいいですよー^^ライブドアブログでしか使えないでしょうけどw

トラックバック

トラックバックURL: