« ブログ便利ツール:ブログ専用検索サイト | トップページ | カスタマイズ・サンプル<No4:金魚> »

2006/06/20

第33回:カレンダーの背景に画像を表示してみよう

カレンダーの背景に画像を表示してみました。
こんな感じになりました。↓

calendar_bg


う~ん、見やすいかどうかは微妙ですね^^;

手順

事前準備:背景用画像を準備する

表示する画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。

私は「NOION」 様でお借りした素材(200px×150px)を使いました。

ファイルをココログにアップロードする

画像をココログのサーバーにアップロードします。
アップロードの方法は別ページ、
『基本1: ファイルのアップロード』
を参照して下さい。

CSSを編集する

  1. 「ファイルのアップロード」の5.で表示されている画像の名前をクリックして画像が保存されているページを開く。
    ※「リンク」ボタンではなく、画像(ファイル)の名前のリンクをクリックして下さい。
  2. ブラウザのアドレスバーにそのファイルの保存先のurl(http://~)が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
    ※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。
  3. 「管理トップページ」→「ブログ」タブ→(便利メニューから)「デザインの編集」→「カスタムCSSを編集」
    ※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。 CSSを編集するためには、まず「カスタム・ テンプレート」を作成してください。
    ※カスタムテンプレートの作り方は
    『第3回:カスタムテンプレートを作ってみよう』
    を参照して下さい。
  4. 「編集」画面のCSS記述欄に

    /*カレンダーの背景画像*/
    #calendar table{
    background-image:url(●●●); /*画像のURL*/
    background-position:center; /*画像の位置*/
    background-repeat:no-repeat; /*画像の繰り返し:なし*/
    }

    を記述する。
    ※/*~*/で囲まれた部分以外は全て半角英数で記述して下さい。
    ※●●●には上記で保存した画像のURLを入力して下さい。
    ※画像の位置指定については下記のページを参考にして下さい。
    「TAG index」様内 『背景画像の表示位置を指定する』 
  5. 「変更を保存」ボタンを押す。
  6. 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
  7. 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
  8. 「すべてのファイルを反映しました」の画面に切り替わったら終了。
  9. イメージ通りに出来ているかどうか確認する。

以上です。
うまく出来ましたか?

ここがポイント

  • ここではカレンダーのタイトル以外の曜日、日付部分に背景が来るようにしたのでセレクターに「#calendar table」 を使いましたが、カレンダーには他にもいくつかセレクターがありますので部分的に画像を変更することも可能です。
    #calendar → カレンダー全体(○年○月部分も含む)
    #calendar table → カレンダーの曜日+日付部分
    #calender caption → カレンダーのタイトル(○年○月部分)のみ
    #calendar th → カレンダーの曜日部分のみ
    #calendar td → カレンダーの日付部分のみ
  • それぞれのセレクターに対して「background-image」ではなく 「background-color:#○○○○○○」と指定すれば画像でなく、背景色の変更が出来ます。
  • 背景画像を敷き詰めタイプにする場合は「画像の位置」と「繰り返し」の指定は不要です。
    画像のURLのみ指定して下さい。
  • 参考画像で日付の色が変わっている部分は記事を投稿した日付です。
    このカスタマイズについては、
    『第14回:カレンダーの投稿した日付に色を付けてみよう』
    を参照して下さい。

お世話になりました

「NOION」
■素材サイト 「PRISM」様<記事内のボタン素材>


*この記事にコメントを書く*


|

« ブログ便利ツール:ブログ専用検索サイト | トップページ | カスタマイズ・サンプル<No4:金魚> »

カスタマイズ」カテゴリの記事

ウェブログ・ココログ関連」カテゴリの記事

コメント

初めて書き込みさせていただきます。
郭嘉と申します。
つい最近ブログを初めて、もっと個性を出したいなぁ
でも知識も何もないなぁ・・・とブログについて検索し
ていたらtako様のサイトにたどり着きました。
カレンダーをはじめいろいろと参考になっています。
これからもちょくちょく拝見させていただくのでよろしく
おねがいします。

投稿: 郭嘉 | 2006/06/28 16:21

■郭嘉さん
こんにちは。コメントありがとうございます。

私のブログがちょっとでもお役に立っていれば何よりです(^^)
少しでも自分の好きな画像や色を取り入れるだけで雰囲気が変わってくると思うので、これからも楽しんでカスタマイズしてくださいね。

これからも宜しくお願いします(^^)

投稿: tako→郭嘉さん | 2006/07/02 20:38

はじめまして
最近 ココログに越してきたものです
今までにブログは2個経験してこれが 事情ありの3個目です
まだ知り合いには公開してないです
と、私のことはいいとして…
虹のカレンダー背景、、、慣れたらトライしてみます

私はたぶんHP作成中級だと(過信?)と思うのですが
HTMLでHPの運営もしています
なので既存のテンプレートをいじって掲示板(アイコンで)を
つくったり
プロフィールもアイコンにしたり…
といろいろ考えているのですが…

ココログはむずかしいというか 現在子育てのため、、時間もないのであまりFAQをちゃんとみれなかったり…
と、私の話はいいですね(トホホ)

あ!投稿後に掲示板が出るのですか?カキコしてて気づきました!感激です

そして、、ここに関係のない質問をするのですが
毎回最新の記事の下にgoogleの記事(?)が掲載されますよね?
それを消すのはどうしたらいいのでしょう…
こちらでは消されてないのですが、何人かさんんのブログを見たら
見当たらないではないですか!

それと既存のテンプレートをいぢる(アイコンなど入れる)には
カスタムCCSをいぢればいいのですね
というか CCSって何?の世界です

ごめんなさい!!訂正です
まったくのド素人です…

長い乱文になってしまいましたがコメントいただけるとありがたいです

いまからカスタムCCSってトコを除いてみますです
失礼しましたです

ps:お気に入りにさせてもらっていいですか?

投稿: れいだ | 2006/07/18 06:45

■れいださん
こんにちは。コメントありがとうございます(^^)

ご質問の「記事の下のGoogleの広告」についてですが、
これはフリープランのココログには必ず表示されるもので残念ながら消すことは出来ません。
フリープランが無償で提供されているのは、この広告からの収入によるものだからです。
一方、「広告が表示されていないブログ(ココログ)」も存在します。
それはフリー以外(ベーシック、プラス、プロ)のプランで、何らかの形で@niftyにお金を払っているユーザーが使っているプランということになります。
つまり、広告の有無は有償のプランか、無償のプランかによって変わるのです。
ご理解いただけましたでしょうか?
【参考】
「ココログプラン別比較表」
「FAQ:トップの記事に表示される「Ads by Google」「PR」って何?」

リンクについては大歓迎です!
こちらこそ宜しくお願いします(^^)
また遊びに来て下さいね。

投稿: tako→れいださん | 2006/07/18 19:09

この記事を見てカレンダーの背景を無事変えることができました♪
ありがとう!

投稿: inax | 2006/09/08 04:36

■inaxさん
こんにちは。
記事がお役に立ったようで何よりです。
コメントありがとうございました(^^)

投稿: tako→inaxさん | 2006/09/09 21:34

takoさま
秋ごろアイコンの高さでお世話になりましたゆいです。お忙しいところまた質問よろしいでしょうか。よろしくお願います。

こちらのカレンダーに背景を表示してみようを参考に月移動≫のブログパーツ、月別背景のcssを追加してカレンダーを作っています。(加工中でして、画像は11.12月の2種類しかないのですが)

質問したいのは月ごとの日にちの多さによって、カレンダーの大きさが大小に変化するのが気になります。
月をさかのぼっても一定の大きさで表示する方法を教えていただけないでしょうか。よろしくお願いします。

投稿: ゆい | 2008/12/13 15:45

■ゆいさん
こんにちは。コメントありがとうございます。

ご質問の
>月をさかのぼっても一定の大きさで表示
ですが、上記の記事の中に書いてあるカレンダーを指定するセレクター「#calendar table」に対して、
width(幅)とheight(高さ)の指定を追加すれば、多分どの月でもその大きさで表示できるはずです。

但し、導入した
>月移動≫のブログパーツ
から独自のCSSが吐き出されている可能性があります。
その場合、上記の指定が上手く効かない場合があるかもしれません。
(その場合は申し訳ありませんが私には対応出来ません)

※ただ、上記の記事では「カレンダーの月別に背景を変えている」については触れていないのですが、大丈夫でしょうか?
もしかしたら、風柳さんのこちら(↓)の記事を参考にされたのではないですか?
http://furyu.tea-nifty.com/annex/2006/08/3_1c8e.html
だとしたら、風柳さんに確認されたほうが確実なのではないかと思うのですが…。
思い過ごしでしたらごめんなさい。

投稿: tako→ゆいさん | 2008/12/13 18:26

takoさま
いつもお世話になっています。回答ありがとうございます。

#calendar table {
width: 155px; height: 175px;
}
を追加してみました結果カレンダーの枠は指定の大きさになりましたが、カレンダー外の上下黒い下地に大きな空間ができ、文字列自体も若干間延びして月末の文字列が画像からはみ出しました。(素人なものでこのタグが合っているか分かりません(^-^;)

ご指摘の通り、月別はURL先を参考に書き換えました。
もうちょっとがんばってみてダメでしたら風柳さまに問い合わせてみます。お忙しいところ丁寧に答えてくださりありがとうございました。

投稿: ゆい | 2008/12/13 19:09

takoさま

お世話になっています。
その後風柳さまに問い合わせまして
解決いたしました。
takoさまの回答、大いに参考になりました。
お礼申し上げます。

〉カレンダーの月別背景に変える…
お返事がおそくなりましたが月別画像を入れることは
できております。縦枠長さが変化することでトリムする
大きさに迷いがあって、すべては変えていませんでした(*^_^*)

投稿: ゆい | 2008/12/14 01:39

■ゆいさん
こんにちは。

>風柳さまに問い合わせまして解決いたしました。

了解しました。
風柳さんのブログで回答のやり取りも拝見しました。
やはり独自セレクターを設定してあったようですね。
お知らせありがとうございました。

カスタマイズ頑張って下さい。

投稿: tako→ゆいさん | 2008/12/14 11:17

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/2654/2307179

この記事へのトラックバック一覧です: 第33回:カレンダーの背景に画像を表示してみよう:

» サイトのお色直し [小屋番Nobの雑記帳 ]
私が使っているブログはご存じニフティが運営しているココログのベーシックタイプです [続きを読む]

受信: 2006/07/26 20:51

» カレンダースクリプトの小技その3:月毎に背景画像を設定 [風柳亭 - 別館:書庫のある庵 -]
カレンダースクリプトで、特定の月の背景画像(壁紙)を指定したい場合には、カスタムCSSに次のような記述を追加します。 #calendar .ct_(月の英名) ... [続きを読む]

受信: 2006/08/12 02:22

» 雪見鍋とカスタマイズ [A careful living]
[主婦] ブログ村キーワード 2時っチャオでブリの雪見鍋を紹介していたので作りま [続きを読む]

受信: 2008/11/21 09:49

« ブログ便利ツール:ブログ専用検索サイト | トップページ | カスタマイズ・サンプル<No4:金魚> »