FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

ブログタイトル下に横カレンダーを入れる

ブログタイトルの下に横カレンダーを設置するカスタマイズを紹介します。

HTMLを編集します。
テンプレートにより編集箇所が違います。

【standardの場合】

<tr><td id="main_body">


<div class="line_calendar">
<a href="<%prev_month_link>"><%prev_year> <%prev_month></a>
≪

<span class="line_cal_day"><%days></span>

≫
<a href="<%next_month_link>"><%next_year> <%next_month></a>
</div>


<table style="margin: 1em" border="0" cellspacing="0">

<tr>

【lightframeの場合】

<div class="line_calendar">
<a href="<%prev_month_link>"><%prev_year> <%prev_month></a>
≪

<span class="line_cal_day"><%days></span>

≫
<a href="<%next_month_link>"><%next_year> <%next_month></a>
</div>


<div id="center-left">

<div id="center">

次にスタイルシートを編集します。
standard,lightframe共に何処でもいいので下記記述を加えます。

/* 横カレンダー */
.line_calendar {
font-size:10pt; /* 文字の大きさ */
color:#cccccc; /* 文字の色 */
margin-bottom:10px; /* カレンダー下の間隔 */
text-align:center;
}
.line_cal_day {
margin-left:3px; /* 日付の間隔(左) */
margin-right:3px; /* 日付の間隔(右) */
}

文字の色や大きさ、文字間の間隔はお好みに設定してください。

記事編集 [ 2006/12/19 23:26 ] カスタマイズ　共通 | TB(1) | CM(33)

≪続きを読むを個別記事ページに遷移させる | HOME | ページ下部(フッター上部)にフリースペースを設ける≫

お世話になりました☆

早速、回答していただいて、
ありがとうございました(*^_^*)
ちょっとアレンジしてやってみました♪
良かったら、時間があるときにでも
覗きにきてやってください！！

[ 2006/12/20 00:36 ] [ 編集 ]

役立ちました！

横カレンダーにしたいと思っていましたので役立ちました！
とても丁寧な説明有り難うございますm(_ _)m

[ 2006/12/20 14:53 ] [ 編集 ]

> ゆめさん

こんばんは、ゆめさん。
カレンダーをヘッダー内にいれましたか。ナイズアレンジです。なんかこちらのほうが落ち着きますね＾＾

[ 2006/12/21 22:25 ] [ 編集 ]

> アオイケイトさん

こんばんは、アオイケイトさん。
やはりヘッダー内にカレンダーを置いてますね。こちらのほうが人気があるのかな＾＾；他にご要望があればなんでも聞いてくださいね。

[ 2006/12/21 22:39 ] [ 編集 ]

カスタマイズさせていただきました

すっきりシンプルさにひかれてテンプレートを使用させていただいてます。
こちらのカレンダーアレンジも面白そうだったので早速試してみました。他のカスタマイズ方法も解りやすく説明されててこれからまたゆっくりいろいろやってみたいと思いマス。

[ 2007/01/11 15:13 ] [ 編集 ]

> 和（ﾅｷﾞ）さん

こんばんは、和（ﾅｷﾞ）さん。
シンプルで洗練された素晴らしいカスタマイズですね＾＾
是非他のカスタマイズにも挑戦してみてください。きっとカスタマイズが楽しくなりますよ＾＾
解からないことがあればなんでも聞いてくださいね。

[ 2007/01/12 03:52 ] [ 編集 ]

こんにちは、初めまして
早速質問なんですが横カレンダーだけリンクの色を変える方法はないでしょうか？

[ 2007/01/28 19:10 ] [ 編集 ]

＞zanさん

横カレンダーのリンク色を変える場合は
スタイルシートに以下を加えると変わると思いますよ。

.line_calendar a:link { color:好きな色; }　/* 通常 */
.line_calendar a:active { color:好きな色; }　/* 実行中 */
.line_calendar a:visited { color:好きな色; }　/* 訪問済み */
.line_calendar a:hover { color:好きな色; }　/* オンマウス時 */

[ 2007/01/28 20:20 ] [ 編集 ]

> zanさん、かどりんさん

有難うございます。かどりんさん＾＾
また助けられてしまいました。スタイルシートの知識もバッチリですね。

zanさん、かどりんさんが答えてくれたとおりです。
カスタマイズ頑張ってくださいね。

[ 2007/01/28 22:36 ] [ 編集 ]

質問ばかりですみませんが
上記の方法を試してみましたが
なぜか「訪問済」だけ適用されなかったんですが
なにか解決策はないでしょうか？

[ 2007/01/29 18:02 ] [ 編集 ]

> zanさん

こんばんは、zanさん。
現状を確認したいのでブログURLを教えて頂けないでしょうか。
宜しくお願い致します。

[ 2007/01/29 21:53 ] [ 編集 ]

http://zannzou.blog74.fc2.com/です
ただいまブログ改良中でパスワードを掛けてありますので
パスワードは「zannzou」です
よろしくお願いします

[ 2007/01/30 15:12 ] [ 編集 ]

> zannzouさん

こんばんは、zannzouさん。
クラス名の前にドット(小さな点)が無いようです。
これを加えれば正常に機能しますよ。

[ 2007/01/30 22:23 ] [ 編集 ]

直りました
こんな初歩的なミスなんか聞いてしまってどうもすいません
ありがとうございます

[ 2007/01/31 17:48 ] [ 編集 ]

> zannzouさん

こんばんは、zannzouさん。
解決されましたね＾＾
また困ったことがあったら聞いてくださいね。

[ 2007/02/01 00:24 ] [ 編集 ]

質問です

カレンダー表示をさせることができたのですが、
カレンダーの背景だけを黒色にかえることはできませんか？

[ 2007/03/23 17:17 ] [ 編集 ]

> ポリポリさん

横カレンダーの背景を変えたいのですね。
それでは記事に掲載しますのでもうしばらくお待ちくださいね。

[ 2007/03/25 20:21 ] [ 編集 ]

こんにちは

横カレンダー導入させて頂きました。
スクロールがさらに少なくなっていい感じです♪
ちょっと手を加えたので、次のコメントでスタイルシートを送らせて頂きますね^^(簡単ですみません)

[ 2007/04/12 13:30 ] [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/04/12 13:39 ] [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2007/04/12 14:34 ] [ 編集 ]

> ちゃんさん

横スクロール拝見しました。素晴らしい横カレンダーですよ＾＾
スタイルシートも完璧に使いこないしていますね。各間隔の取り方やバランスが絶妙です。お見事＾＾

[ 2007/04/12 22:58 ] [ 編集 ]

はじめましてｗ

はじめましてｗ
横カレンダーを付けたくて探していたところ、こちらのブログへ辿り着きました。
さっそくヘッダー部分へ、横カレンダーを組み込んでみました。
まだリンクの色などは変更していないので、これから楽しくカスタマイズさせていただきたいと思っています。
どぅもありがとぅございました！！！
他のカスタマイズでも、後日お世話になるかもしれません。
その時はどぅぞよろしくお願いいたしますｍ（_ _*）ｍ

[ 2007/04/25 18:08 ] [ 編集 ]

> マチュさん

綺麗に横カレンダーを入れましたね＾＾
どうぞ好きなだけ参考にしてくださいね。

[ 2007/04/30 00:16 ] [ 編集 ]

ありがとうございました

はじめまして。

カテゴリーをどうにかしたいな～と思いつつページ進めさせて頂いていたところ横カレンダーのエントリー。

以前横カレンダーも表示できたらな～と思っていて、すっかり忘れていました。
が、このエントリーまさにヘーッダ付近の横カレンダー実現の仕方そのもの。

勢いでエントリー起こしてしまいました。
ヘッダー下に横カレンダーを表示（ＦＣ２ブログ）
http://julajp.blog53.fc2.com/blog-entry-238.html

お蔭様で早速表示する事ができました。
また、他にも色々参考にさせて頂きたいと思います。
どうもありがとうございました。

ただ、自分のブログあれこれ詰め込みすぎでレスポンス最悪なのが難点なのですが・・・。さてどうしたものか。

[ 2007/05/19 13:05 ] [ 編集 ]

さっそく付けました

こちらの記事を参考に横カレンダーを設置しました。ありがとうございます。全然理解してやっていないので、カスタマイズ勉強にお邪魔させてもらいます。

[ 2007/05/21 20:15 ] [ 編集 ]

> julajpさん、ビフィズスさん

> julajpさん
記事に取り上げてくれて有り難うございます＾＾
確かに過度のブログパーツとstandardシリーズのようなテーブル構造は遅くなりがちなのですが、いろいろ取り付けてる割にはjulajpさんのブログ表示は早いほうだと思いますよ。

> ビフィズスさん
今理解できなくてもカスタマイズを繰り返すうちに、こういうことかと理解できるときがきますよ。私の記事でよければ参考にしてください。

[ 2007/05/22 00:13 ] [ 編集 ]

こんばんは♪

イロイロ調べモノをしていて、ココにたどり着きました。
参考にさせていただきます。今から横カレンダーに挑戦します。リンクをいただいたので、コメントを残させてもらいました。(^^♪ありがとうございます。

[ 2007/10/06 23:50 ] [ 編集 ]

質問です。

カレンダーの更新日のリンク色をカレンダーのみ変更する事は可能でしょうか?
もしできるならその数字を太字にする方法はありますでしょうか?
http://10plate.blog44.fc2.com/blog-entry-58.html
こことかいろいろ見たんですけど、↑のやり方じゃできなくて･･･。

サイトURLはhttp://specialtools.blog42.fc2.com/です。

[ 2008/01/18 22:03 ] [ 編集 ]

>>zeroさん

このコメント欄の上から8番目で、かどりんさんが答えてくれていますよ

.line_calendar {
font-weight: bolder; /* 文字(太字) */
}

これも追加すれば太字になります。

[ 2008/01/19 03:06 ] [ 編集 ]

>>ちゃんさん

すいません。説明のしかたが下手でした・・・。

カレンダーの更新日のリンク色と更新日の数字の文字の太さだけ変更したいんです・・・。
できるのでしょうか?
説明が下手ですいません。

[ 2008/01/19 13:51 ] [ 編集 ]

お借りしました

はじめまして。きゅりあと申します。
横カレンダーがつけたくて、探していたところ
こちらにたどりつきました。
早速試したところ、出来ました。
ありがとうございます。
お薦めカスタマイズがとっても気になるので、
技や知識をお借りするべくちょこちょこ伺うと思いますが、
どうぞよろしくお願いします。
本当にありがとうございました。

[ 2008/06/01 01:00 ] [ 編集 ]

> きゅりあさん

私のテンプレートを前提として書いてあるカスタマイズの記事も多々あるのでなにかと不都合なことがあるかも知れませんが、利用できそうなことはなんでも利用してくださいね。

[ 2008/06/01 22:53 ] [ 編集 ]

あこがれの～

はじめまして。
ブログの性質上見た目にこだわりたかったのですが
中途半端なカスタマイズ知識しか持っておらず
正直、頭抱えておりました。

そんな時にこちらの記事を見つけて早速やってみたところ、
すぐに憧れの「横カレンダー」！！見事取り付けることができました。

他にもいくつか試したい、気になる記事を見つけてしまったので、ちょくちょく通わせていただきます。

ありがとうございました。

[ 2008/06/18 14:43 ] [ 編集 ]

コメントの投稿