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

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

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

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

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

私は「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」様＜記事内のボタン素材＞

---

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

---