カレンダースクリプトの小技その3：月毎に背景画像を設定
せっかく月別のカレンダーを表示できるようにしてあるので、画像も月別に。
使った写真は全て当方の撮影……素材が悪いのはご愛敬ということで(泣)
カレンダースクリプトで、特定の月の背景画像(壁紙)を指定したい場合には、カスタムCSSに次のような記述を追加します。
#calendar .ct_(月の英名) {
background: url('(背景画像のURL)') center top no-repeat;
}
例えば、現在のこのサイトでは、8月用に、
background: url('(背景画像のURL)') center top no-repeat;
}
#calendar .ct_August {
background: url('https://furyu.tea-nifty.com/image/august.jpg') center top no-repeat;
}
のような設定がしてあります。
background: url('https://furyu.tea-nifty.com/image/august.jpg') center top no-repeat;
}
月の英名部分はそれぞれ、
'January','February','March','April','May','June','July','August','September','October','November','December'
です。
'January','February','March','April','May','June','July','August','September','October','November','December'
です。
また、記事へのリンクがある日を目立たせるためには、
#calendar td a {
display:block;
background-color: lightblue;
}
のように、リンクがあるところに背景色を指定してブロック(四角)表示させる、という方法があります。
display:block;
background-color: lightblue;
}
上の方法だと、記事の多い月にはせっかくの壁紙がほとんど隠れてしまう、という場合には、半透明の画像を用意してbackground-colorの代わりに使う、という方法もあります。
このサイトでは現在こちらの方法にしていて、
#calendar td a {
display:block;
background: url('https://furyu.tea-nifty.com/image/transparent-paleblue.png') no-repeat;
}
のようになっています。
display:block;
background: url('https://furyu.tea-nifty.com/image/transparent-paleblue.png') no-repeat;
}
CSSの半透明フィルタだとブラウザ依存性が高くなってしまうため、透明色と不透明色を市松模様に配置したPNG画像を使っています。
なお、この記事を書くにあたって、takoさんのサイト『初めてのココログ・カスタマイズ』の以下の記事を参考にさせていただきました。
« カレンダースクリプトの小技その2：日曜は赤色・土曜は青色にする | トップページ | 【ココログ】ラインカレンダーの設置 »
「ウェブログ・ココログ関連」カテゴリの記事
- 久しぶりの投稿がココログへの苦言というのもなんなのですが……(2019.03.20)
- ココログをTwitterカードに対応させてみる(2016.11.23)
- 【覚書】風柳亭（ココログプロ）をレスポンシブWebデザイン化（Bootstrap3使用)(2015.10.09)
- ココログ用全文検索 - ココログ最強検索を jQuery を使って作り直してみた（既知の不具合の幾つかに対応）(2015.09.01)
- 現在に生きるということ。(2013.01.05)
コメント
トラックバック
この記事へのトラックバック一覧です： カレンダースクリプトの小技その3：月毎に背景画像を設定:
» またまた風流さんのカレンダーがパワーアップ！ [Bugsなうさぎの憂鬱]
風流さんのカレンダーが怒濤の勢いでパワーアップしています。 曜日に色を付けられたり、月ごとに！違う画像を貼り付けられたり、スクリプトが働くまでのタイムラグを目立たなくさせたり、強力です。 とりあえず、曜日の色を変えてみました。カラフルになって楽しい。画像は時間のあるときに合いそうなものを選んでバックグラウンドに貼ってみようと思います。スクリプトをONの方にしかわからないのがもったいないですね。 詳... [続きを読む]
« カレンダースクリプトの小技その2：日曜は赤色・土曜は青色にする | トップページ | 【ココログ】ラインカレンダーの設置 »
風柳さま
はじめまして、ゆいと申します。
ココログでこちらの月毎背景入りカレンダーカスタマイズを参考にさせていただいています。あわせて月移動≫のブログーパーツも使わせていただいています。ありがとうございます。
お忙しいところ恐縮ですが質問してもよろしいでしょうか。
お力を貸していただけると嬉しいです。
月別のカレンダーの日にちの多さによって画像の縦幅が大小かわります。
月をさかのぼっても一定の大きさで表示する方法を教えていただけないでしょうか。
よろしくおねがいします。
投稿: ゆい | 2008/12/13 22:14
ゆい さん、はじめまして。
カレンダーの高さですが、CSSで
#calendar .ct_Body {
height: 132px; /* この部分を調節 */
}
のように設定してあげれば、一定の大きさになるかと思います。お試しください。
投稿: 風柳＞ゆい さん | 2008/12/13 23:26
風柳さま
お世話になっています。
早速の回答、大いに参考になりました。
ブログアップ前にトリムしたものと枠の縦長が変わることで
画像の中心がずれてしまい困っていたところ
助かりました。
画像が一定の大きさで表示できることは、大変見やすく、安定感が
あるのですね。成功して感じました。
快く回答していただきましてありがとうございました。
投稿: ゆい | 2008/12/14 01:20
風柳さん こんばんは。
【ココログ】アーカイブページに目次とページングを付加するJavaScriptでは大変お世話になりました。便利に使わせて頂いております。
今回、カレンダーも使わせて頂き、大変便利になりました。
ありがとうございます。
背景画像の設定を行ってみたのですが、宜しければ2点ほど教えて頂けせんでしょうか。
１．カレンダーの背景を年間通して同じものにする場合は、
#calendar .ct_August { を
#calendar table{ とすればよいでしょうか。
２．背景画像を表示したと時に、背景画像がカレンダー左側のバックの
画像にかかってしまい、見栄えが悪い状態です。綺麗に表示する
何か良い方法は無いでしょうか｡
画像横幅を縮めたりしてみまいたが、バック画像の外枠が消えて
しまっていて、やはり見栄えが悪い状態になってしまいます。
（ちなみにリッチテンプレートを使用しています。）
投稿: kura | 2009/07/21 22:29
kura さん、どうもです。
| １．カレンダーの背景を年間通して同じものにする場合は、
#calendar .ct_August {
などの代わりに、
#calendar .ct_Body {
に対して設定すれば、年間通して同じものとなります。
| ２．背景画像を表示したと時に、背景画像がカレンダー左側のバックの
| 画像にかかってしまい、見栄えが悪い状態です。
CSSだけでうまく設定する方法が思いつかなかったので、画像の方を変えてみてはいかがでしょうか。
具体的には、
#calendar .ct_Body {
background:transparent url(http://furyu-tei.sakura.ne.jp/image/kanku3.png) no-repeat scroll left top;
}
として、お試し下さい。
※http://furyu-tei.sakura.ne.jp/image/kanku3.png を見ていただければわかると思いますが、元の背景画像に外枠を合成しています。
投稿: 風柳＞kura さん | 2009/07/22 21:04
風柳さん こんばんは。
ありがとうございます。無事綺麗に表示できるようになりました。
画像を合成した方が良いかとも思っていたのですが、合成する腕が無く、四苦八苦していました。
ご多忙のところ合成までして頂いて感謝です！
合成頂いた画像は当方サイトに取り込みマーク位置を微調整させて頂きました。
ありがとうございました！
投稿: kura | 2009/07/22 23:33