2005-06-07

カレンダーを横一列で表示する

このブログの上部に付いているような、Seesaaブログでカレンダーを横一列表示する方法です。

管理画面の
デザイン -> コンテンツ
を選択し、「新しいコンテンツの追加」というフィールド内で
種類カレンダー
追加先ページ全ページ
配置ヘッダー(付けたい位置にお好みで調整してください)
並び順30(これもお好みで調整してください)

を選択し、「コンテンツの追加」ボタンを押してコンテンツを追加します。
「カレンダーの設定」というページに切り替わったら、右上のほうにある「コンテンツHTML編集」をクリック。
「コンテンツHTML」というページに切り替わったら、そのページの入力フィールドの内容を全て削除し、以下の内容を全てコピペします。

<style><!--
#cal{text-align:center;white-space:nowrap;width:100%;font-size:10px;padding:10px 0px 10px 0px;}
#cal a{text-decoration:underline;}
--></style>

<% content.header -%>
<div id="cal">
<% date_format(now,content_calendar.datetime) %> 
<% loop:list_calendar -%><% loop:list_data_month -%><% loop:list_data_week -%><% if:data.day %><% if:article -%> <a href="<% article.page_url %>"><% article.createstamp | date_format("%e") %></a><% else -%> <% data.day %><% /if %><% else %><% content_calendar.spc_text %><% /if %><% /loop %><% /loop -%><% /loop -%></div>
<% content.footer -%>


あとは「保存」をクリックしてください。
スタイルシートがいじれる方なら、上の<style>部分は直接スタイルシートに記述してもいいと思います。



しかし、コンテンツHTMLからソースを見てみると、Seesaaの初期設定で横一列のタイプも取り入れようとした形跡があるんですよね。
なんかえらいなげやりな所でほったらかしになってるみたいですが。


posted by 8 at 00:55 | Comment(40) | TrackBack(13) | Seesaaブログ改造
この記事へのコメント
こんばんは! んっ!?です。
ありがとうございます!!
リクエストに答えてくださったんですね。
お陰様で横型カレンダー設置できました。

トラックバックもさせていただきました。
また、どうぞよろしくお願い致します。
Posted by んっ!? at 2005-06-10 01:30
こんばんは、無事設置できたようでなによりです。
ご紹介もありがとうございました。
今後もなにか小ネタがあれば紹介していく予定ですので、ぜひまた覗きに来てやって下さいね。
Posted by 8 at 2005-06-11 02:30
はじめまして。
seesaaでも横一列にできるんですね。
早速導入してみました。
役に立つ記事をありがとうございます。
Posted by サガシヤ at 2005-07-06 09:41
こんにちは!
操作の手順から何から非常に分かり易かったです!

私でも2分でカスタマイズできて嬉しく思っています.
ありがとうございます.


ところで質問なのですが,
このカレンダーの背景色を変えたい時や数字の色を変えたい時は
どのようにすればいいのか分かりません.


もし機会がありましたら取り上げて頂けると
幸いです.


HP応援しています!
また立ち寄らせて頂きます.
Posted by ケム at 2005-07-06 15:55
サガシヤさん、ケムさん、初めまして。
ご報告ありがとうございます。
レスが遅くなり申し訳ありません。
横型カレンダー、役立てていただけて嬉しいです。

ケムさんのご質問の件ですが、「コンテンツHTML」でコピペした内容の一番上あたりにある「〜padding:10px 0px 10px 0px;」と書かれたところのすぐ後ろに

background:orange;

という一文を追加すれば、背景色を変えることができると思います。
文字を変えたい場合は

color:blue;

でどうぞ。
色をいろいろ変えてみたい場合は、「orange」とか「blue」の部分を他の色指定に置き換えればOKです。
使える色の一覧はこちらを参照してください。
http://temp-css.seesaa.net/image/col.htm
Posted by 8 at 2005-07-12 04:15
こんばんは。
憧れのカレンダー横一列ができましたヾ(〃^∇^)ノ
ありがとうございます。

1つお聞きしたいのですが、
もう少しカレンダーの幅を狭くすることは出来ないのでしょうか?
Posted by まゆちこ at 2005-08-06 23:01
こんばんはまゆちこさん、初めまして。
他の記事にもコメントをいただいているのですが、こちらでまとめてレス失礼します。

> もう少しカレンダーの幅を狭くすることは出来ないのでしょうか?
「コンテンツHTML」でコピペした内容の一番上あたりにある「〜padding:10px 0px 10px 0px;」と書かれたところのすぐ後ろに

letter-spacing:0;font-size:8px;

という一文を追加すれば、調整できると思います。
Posted by 8 at 2005-08-11 04:29
はじめまして。
前から気になっていた横型カレンダー、ようやく導入できました。
ありがとうございました。
Posted by 真就 at 2005-08-11 16:10
できましたヾ(〃^∇^)ノ♪
どうもありがとうございます。
Posted by まゆちこ at 2005-08-12 10:00
カレンダーの横型、使わせていただきました!
すごく助かりました〜ありがとうございますm(__)m
幅とかこれから調整させていきたいと思います♪

リンクもさせたもらいました。
Posted by つあ at 2005-08-14 22:57
連続で申し訳ないです...
うちはバナー画像に自分で登録した画像を使っているんです。
ですがカレンダーがその画像の中に表示されてしまい、すごくみにくくなってしまいました。
色々いじってるんですけど直らなくて…
バナー画像のすぐ下に表示させたいんですけど、いい方法はないでしょうか?
教えていただけたら嬉しいです。
Posted by つあ at 2005-08-14 23:37
何回も何回も申し訳ないです…本当にすみません。
なんとか出来ました。本当に申し訳ないです...
どうもありがとうございました。
Posted by つあ at 2005-08-14 23:47
はじめまして。
横型カレンダー導入できました。
デフォルトのカレンダーのように
場所をとらないので、空いたスペースを
有効に使えますね。

ありがとうございました。
Posted by mogumogu at 2005-08-16 00:25
まゆちこさん>
無事できましたか、良かったです。

つあさん 真就さん mogumoguさん>
こんばんは、初めまして。
ご報告ありがとうございます。
役立てていただけて嬉しいです。
Posted by 8 at 2005-08-17 01:20
こんにちは。はじめまして。

横一列のカレンダー設定できました♪
しかし位置が中途半端になってしまうのです。
今はヘッダーに設置しています。
しかしヘッダーともメインとも言えない部分に
表示されてしまいます。

メインの一番上においてみたら右サイドバーが
メインの下に落ちてしまいました。

見た目が今のように見えてヘッダーが全て見えればいいのですが、どうすればよいでしょうか?
Posted by ジャっちゃん at 2005-08-21 22:29
続けてのコメントお許しください。

このままでもいけるんではないかと思えてきました^^

なのでもしお時間が開いた時があればで結構ですので
回答お待ちしております。


Posted by ジャっちゃん at 2005-08-21 22:54
こんばんはジャっちゃんさん、初めまして。
ご質問の件ですが、
> ヘッダーともメインとも言えない部分
というのがよく分からなかったのですが、たぶんお使いのテンプレートが、ヘッダ部分縦幅のサイズが固定されているタイプなので、カレンダーが下にはみ出してしまう、ということなのではないかと考えましたが…。
もしそうでしたら、テンプレートとの相性もありますので、この記事のコメントにあるまゆちこさんへのレスを参考にカレンダーを小さくするか、ヘッダのサイトタイトルを小さくするなどして調整していくしかないと思います。
Posted by 8 at 2005-08-25 03:43
こんにちは!
ありがとうございます。
タイトルの字の大きさなどいじってみました。
あと背景で境目を消してごまかしました^^;
スペースの節約になるのでとっても気に入ってます!
Posted by ジャっちゃん at 2005-08-25 15:27
ジャっちゃんさんこんばんは、上手くいったようで良かったです。
気に入っていただけて嬉しい限りです。
Posted by 8 at 2005-09-11 01:34
はじめまして。
横型カレンダーの設置方法を参考にさせていただきました。
分かりやすい説明で私にもすんなり出来ました。
ありがとぅございました。
Posted by 蒼い兎 at 2005-09-11 23:10
はじめまして。
横型カレンダー使わせていただきました。
ありがとうございました。
Posted by tama at 2005-09-16 15:01
蒼い兎さん tamaさん>
こんばんは、初めまして。
ご報告ありがとうございます。
役立てていただけて嬉しいです。
Posted by 8 at 2005-09-22 01:14
はじめまして^^ 横型のカレンダー参考にさせていただきました〜っ ど素人の私でも丁寧な解説で設置することができました〜
本当に有難うございます♪
これからも参考にさせてくださいね<(_ _)>
Posted by りおちん at 2005-10-04 19:37
初めまして。カレンダーを横一列に表示させる方法を参考にさせて頂きました。タグとかは分からない私にも理解できる説明で、とても参考になりました。ありがとうございます。
とても参考になったので、トラックバックさせて頂いたのですが、手違いで2つもトラックバックが表示されてしまっています。お手数とは思いますが「Weblog: 日々徒然」からのトラックバックで上の方を消して頂けないでしょうか。申し訳ございません。
Posted by balalaika at 2005-10-04 23:32
ステレオさん、 balalaikaさん、初めまして。
ご報告ありがとうございます。
活用していただけて嬉しいです。
トラックバックの件了解しました、上のほうだけ消しておきます。
Posted by 8 at 2005-10-06 01:40
大変参考になりました。
ありがとうございました┏(o:)) ペコリ
Posted by はに丸 at 2005-10-11 09:17
はに丸さんこんばんは、初めまして。
ご報告ありがとうございます。
その顔文字、かわいいですね。思わずクスッとしてしまいました。
Posted by 8 at 2005-10-13 01:26
初めまして、おてんばです。
横一列カレンダー試してみました!
わかりやすくて簡単にできました♪

ただ、ヘッダーに設定しているのですが
できればトップ画像の一番下に表示させるには
どうしたらいいでしょうか?

あと、日付の色等を別の色に変えようと、
白は設定できたのですが、現在の色で
青や赤の部分はどのように変更すれば
いいですか?

お忙しい所すみませんが
教えてくださいm(__)m
Posted by おてんば娘 at 2005-11-23 13:15
おてんば娘さんこんばんは、初めまして。
ご報告ありがとうございます。

トップ画像の一番下に表示させるには、スタイルシートなどで位置調整ということになると思いますが、個別のご指導などはしておりませんので、すみませんがこちらではサポート外ということでご了承ください。
苦肉の策ですが、「配置」での指定位置を「メイン」にして、「並び順」に0などを指定すれば記事の真上に表示されると思います。
色の変え方に関しては、たぶんリンク色の事だと思うのですが、

#cal a{text-decoration:underline;}

という部分を

#cal a{text-decoration:underline;color:pink}
#cal a:visited{color:silver;}

などに置き換えてみてください。
良かったら、ここのコメント欄にあるケムさんへの返信記事もご参照ください。
Posted by 8 at 2005-12-06 02:54
こんにちは。いつもお世話になっています。
横型カレンダーにしてみました。
とてもすっきりして気に入りました。
ありがとうございます。
Posted by SONA at 2005-12-06 12:19
SONAさんこんばんは、ご報告ありがとうございます。
役立てていただけて嬉しいです。
Posted by 8 at 2005-12-17 02:14
こんにちは。
こちらのサイトを参考にさせていただき、横型カレンダーを導入しました。これからも素敵な改造をおしえてください。

ありがとうございました。
Posted by 夜狼寺 大 at 2006-02-08 15:47
夜狼寺 大さんこんばんは、初めまして。
ご報告ありがとうございます。
役立てていただけて嬉しいです。
Posted by 8 at 2006-02-21 03:14
はじめまして。

以前より、たまに他のblogで
横型カレンダーを見かけていて
設置できればすっきりするなーって
思っていて、
こちらに、辿り着き、
大変解りやすく、
見事に設置完了させていただきました。

ただ、『今日』を強調したいのですが
例えば、色を変えるとか、囲むとか・・

あと、上記の関係で
記事投稿日の
無変換もしたいのですが

可能なんでしょうか?

お忙しいでしょうが
よろしければ
教えていただけないでしょうか?
Posted by Violet at 2006-03-16 16:48
変更できました。
ありがとうございました。
お忙しいとは思いますが、これからも期待しています!
Posted by ケン at 2006-03-26 21:15
こんにちは。
いつもお世話になっています。
こちらの記事を参考にさせて頂きました。
ありがとうございました。
Posted by HARUHI at 2006-03-29 18:53
初めまして☆

横一列カレンダーをVioletさんのおかげで、
簡単に設置することができました。

感謝です〜。
Posted by lifan at 2006-04-05 22:35
 はじめまして。
ブログのカスタマイズをしたく、カレンダーを横一列に出来る方法を探してきました。
 おかげさまで、カレンダー設定を変えられました。
 今後もお世話になるかもしれませんが、よろしくお願い致します♪。 
Posted by 花音 at 2006-08-22 19:09
初めまして。シンプルで素敵な素材ありがとうございました。TBさせていただきました。本当に感謝です。
Posted by ケイ at 2006-08-28 01:53
いつも参考にさせていただいてます。
私も横型カレンダーを設置させていただきまして、かっこよくて喜んでおりました。
最近ブログに少し慣れて色々いじくってたのですが、Another HTML-lint gatewayというサービスでチェックしますと、下記のようなエラーが出てます。特に1つ目は9点マイナスのエラーなもので、ちょっと気に掛けてます。もし原因等わかりましたら教えていただけませんか?
・ 内にコメントを書くと、本当にコメントとして扱われます。
長々と申し訳ありませんでした。
Posted by turbo at 2007-02-21 11:07
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL


横型カレンダーにしました♪
Excerpt: 念願の横型カレンダーにしました。 もう、自分でどうにかするのは諦めていたんです。 ぜんぜん まったくわからない。 だからスッゲー初心者なんだってば! でもですね、こちらStyle book様 『カレ..
Weblog: ::ナニコレ::
Tracked: 2005-06-10 01:26

カレンダー
Excerpt: カレンダーの最新情報をチェック!ad1();         カレン...
Weblog: [TW] HOTWORDS
Tracked: 2005-06-27 17:59

カレンダーを横一列で表示する
Excerpt: Style bookの888さんが、これについて記事になさっています。 それを参考に導入してみました。ただのラインを引くよりアクセントになると思います。
Weblog: ネットで本当にもうかるの?
Tracked: 2005-07-06 09:39

カレンダー
Excerpt: ちょっとカレンダーの位置を変更してみました。別に理由はないんだけど「新着記事がなるべく上に表示されたらいいかな」と思って、カレンダーの位置の変更を決めた。
Weblog: 日々徒然
Tracked: 2005-10-04 23:15

カレンダーを横一列タイプに
Excerpt: NARLに場所を取られたカレンダーを上の方に横一列に移動しました。 Style bookさんの記事を参考に、意外と簡単に出来ました。 どうやったら、こんなの気づくんですかね。頭が下がります。
Weblog: よっちのXG&ダイエットライフ
Tracked: 2005-10-22 01:08

改装マニア
Excerpt: テーマは言うまでもなくコンチェです。 ブルーで統一したら落ち着きのある感じになりました。わーい。 気に入ったので春までコレでいこう。 web拍手お礼絵も更新したので、気が向いたらクリックしてみて下さい..
Weblog: 774sec(´ー`)
Tracked: 2005-12-16 10:12

blogカスタマイズ大作戦!
Excerpt: 今回は小説公開用ということで、今までの所謂日記風のブログデザインから大きくカスタマイズいたしました。 とりあえず箇条書きで軽く一覧。 ・カレンダーを横型に ・TOPページにジャンル別新着記事リスト..
Weblog: Novel's blog.
Tracked: 2006-02-14 04:16

ナビゲーションバー
Excerpt: もうひとつ、今のブログにはつけないかも知れないけれど 覚えておきたいカスタムを発見したのでメモを兼ね
Weblog: みぃちゃんネット
Tracked: 2006-02-21 00:19

カレンダーを横一列に表示する
Excerpt: 8さんのページで方法を発見。 seesaaブログ利用者は必見と思われる。
Weblog: ムダな備忘録
Tracked: 2006-03-26 21:05

気分転換
Excerpt: ブログを小変更しました。 タグクラウド導入。(タグはフィルム名のみ) 参考→大ちゃん様の大ちゃんの、ブログで稼げるかのコンテンツ-タグクラウドで遊ぶ?? Firefox対応 参考→深田様のInqsi..
Weblog: 青色インク
Tracked: 2006-08-28 01:39

横長カレンダーの試行
Excerpt: 横長カレンダーについて、参考にさせていただきました、ありがとうございました。
Weblog: ネコのこだわり
Tracked: 2006-11-29 19:20

Seesaaカスタマイズ:カレンダーを横一列で上に
Excerpt: ・カレンダーを横一列で表示する(Style book) ・横長カレンダーの設置(大ちゃんの、ブログで稼げるか) ・横長カレンダーの試行(ネコのこだわり) 上記ブログ様を参考に右下にあったカレンダーを..
Weblog: AUとか馬ブログ
Tracked: 2007-03-17 14:33

音楽とは関係無いのですが
Excerpt: 音楽とは関係無いのですが、プラウザを“Internet Explorer 7”に換えてみました&amp;#63903; ですが、導入して自分のブログを開いてみてビックリ! 「レイアウトが崩れてる~&a..
Weblog: ☆勝手に音楽のススメ☆
Tracked: 2007-07-27 05:54
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。