ビジネス・カレンダーのデザイン変更の解説

当サイトで無料でダウンロードできるカレンダープログラム「ビジネスカレンダー」のカスタマイズ方法をこのページでは解説します。

初期状態では以下のような画面になっています。
カレンダーの初期状態

この解説の対象となる人


このページの解説は以下の人が対象となります。

必須スキル
CSSを理解・編集ができる人。

カレンダーの横幅を広げたい場合

カレンダーの横幅を広げたい場合はbusiness-calendar.cssの以下の部分を、

div#business-calendar{
  width : 300px;  /* カレンダーの横幅はここで調整 */
  margin : 0 auto;  /* 既存のページに組み込む場合は、この中央寄せの設定は不要かも */
  position : relative;  /* 前月・次月をクリックした際のローディング画像の位置調整のため必要 */
}

以下のように変更します。(widthの部分を変更)

div#business-calendar{
  width : 600px;  /* カレンダーの横幅はここで調整 */
  margin : 0 auto;  /* 既存のページに組み込む場合は、この中央寄せの設定は不要かも */
  position : relative;  /* 前月・次月をクリックした際のローディング画像の位置調整のため必要 */
}

するとカレンダーの表示は以下のようになります。
横幅を広げたカレンダー

カレンダーの縦幅を広げたい場合

上記の横幅に加え、さらにカレンダーの縦幅を広げたい場合はbusiness-calendar.cssの以下の部分を、

div#business-calendar table tr th,
div#business-calendar table tr td{
  padding : 7px 0;  /* 各セルの縦幅はここで調整 */
}

以下のように変更します。(paddingを変更)

div#business-calendar table tr th,
div#business-calendar table tr td{
  padding : 20px 0;  /* 各セルの縦幅はここで調整 */
}

するとカレンダーの各セルの縦幅が広がり、表示は以下のようになります。
カレンダーのセルの縦幅

年月の文字の太さや大きさなどを変更したい場合

上記までの作業に加え、さらに「●●●●年●●月」の文字の太さや大きさなどを変更したい場合は、

business-calendar.cssのどこかに以下のコードを追加し、

div#business-calendar table tr#year-month th p{
}

文字の大きさを大きくしたいなら以下のようにします。

div#business-calendar table tr#year-month th p{
  font-size : 150%;
}

さらに文字の色を赤くしたいなら以下のように追加します。

div#business-calendar table tr#year-month th p{
  font-size : 150%;
  color : red;
}

以上のように追記すると、カレンダーの表示は以下のようになります。
文字の大きさと色を変更

「前月」や「次月」の文字の大きさを変更したい場合

上記までの作業によって、カレンダーの表示は以下のようになっています。
前月と次月の表示

ここで「前月」や「次月」の文字の大きさを変更したい場合は、business-calendar.cssの以下の部分を、

div#business-calendar table tr#year-month ul li#prev{
  float : left;
  margin-left : 5px;
}

div#business-calendar table tr#year-month ul li#next{
  float : right;
  margin-right : 5px;
}

以下のように変更します。(font-sizeを追加)

div#business-calendar table tr#year-month ul li#prev{
  float : left;
  margin-left : 5px;
  font-size : 150%;
}

div#business-calendar table tr#year-month ul li#next{
  float : right;
  margin-right : 5px;
  font-size : 150%;
}

するとカレンダーの表示は以下のように変わります。
前月と次月の文字を大きく変更

「前月」や「次月」の文字の表示位置を変更したい場合

上記までの変更によってカレンダーは以下のような表示になっています。
このままでは「前月」や「次月」の文字の表示位置が「2018年06月」の表示と揃っていないので、少しだけ上にずらしたいと思います。
文字の位置がずれている

その場合は、business-calendar.cssの以下の部分を、

div#business-calendar table tr#year-month th ul{
  width : 100%;
  list-style-type : none;
  overflow : hidden;
  position : absolute;
  left : 0;
  bottom : 10px;
}

以下のように変更します。(bottomの部分を変更)

div#business-calendar table tr#year-month th ul{
  width : 100%;
  list-style-type : none;
  overflow : hidden;
  position : absolute;
  left : 0;
  bottom : 21px;
}

すると以下のように文字の表示を揃えることができます。
文字を揃えた例
今回の例ではbottom : 21px;を設定していますが、これはカレンダーの表示フォントの種類によって少し変わってきますので、目視によって微調整する必要があります。

サポートBBS

サポートBBS

サイト内を検索
アップデート情報

この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。

サイト運用事例
提供サポートなど
メールフォーム

ダウンロード一覧へ

カレンダー

これはビジネスカレンダーのサイト組み込みサンプルです。
サンプル管理画面から定休日の変更操作ができます。
ご自由にお試しください。(ユーザ名はtani、パスワードは0000です)

ダウンロード一覧へ

新着情報欄の更新

ダウンロード一覧へ

BBS

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別
制作者の詳細
  • 谷元博のブログ
  • Google+