【WordPress】休日表示付きリアルタイムカレンダー設置について

INDEX

WordPress カレンダー
1. 休日表示付きリアルタイムカレンダー
カレンダーのカスタマイズ
1. カスタマイズ内容
2. カスタマイズ後のカレンダー

WordPress カレンダー

ブログサイトのデザインに合ったカレンダー設置方法についてまとめてみました。

休日表示付きリアルタイムカレンダー

WordPressのウィジェットにカレンダーは用意されているのですが、自分的には今一歩なのでここはプラグインに頼ることにします。

因みにWordPressテーマ Cocoonで、ウィジェットのカレンダーを設置するとこのようなカレンダーとなります。

カレンダーの条件は祝日対応であることと、ブログに合ったカレンダーにカスタマイズできることの2点です。

カレンダーのブログパーツを探してみたところ「小粋空間」の「休日表示付きリアルタイムカレンダー for WordPress」を利用することにしました。

休日表示付きリアルタイムカレンダー for WordPress

WordPressのプラグイン新規追加では検索されないので、直接、小粋空間サイトからダウンロードする必要があります。

ダウンロードしたファイルをフォルダ毎、サーバーのプラグインフォルダにアップロードします。

次にWordPressのインストール済みプラグインの一覧に「Realtime Calendar」表示されるので有効化を行います。

これで「休日表示付きリアルタイムカレンダー for WordPress」が使用することができます。

カレンダーのカスタマイズ

デフォルトのデザインは、このようにシンプルなデザインとなっています。

この状態からブログに合わせてカスタマイズを行います。

Simplicityサイトの「カレンダーウィジェットに枠をつけるCSSカスタマイズ方法」を参考にしてカスタマイズしてみました。

カレンダーウィジェットに枠をつけるCSSカスタマイズ方法

カスタマイズ内容

「カレンダー」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/*****************************
** カレンダーカスタマイズ／カレンダーに枠と曜日の色を付ける
*****************************/
#wp-calendar {
  border-collapse: collapse;
  border-top-width: 1px;
  border-right-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-top-color: #fe619a;
  border-right-color: #fe619a;
  background-color: #FFBFE5; /* カレンダーバックグランドカラー設定 */
  width: 250px;
  margin-left: 1px;
  font-size:12px;
}
 #wp-calendar thead tr th {
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-bottom-style: solid;
  border-left-style: solid;
  border-bottom-color: #fe619a;
  border-left-color: #fe619a;
}

#wp-calendar thead tr th:nth-child(1),	/*日曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(2),	/*月曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(3),	/*火曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(4),	/*水曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(5),	/*木曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(6),	/*金曜日のヘッダーセル*/
#wp-calendar thead tr th:nth-child(7){	/*土曜日のヘッダーセル*/
  background-color: #FF95CA;
  text-align: center;
}

#wp-calendar td {
  text-align: center;
  padding: 2px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-bottom-style: solid;
  border-left-style: solid;
  border-bottom-color: #fe619a;
  border-left-color: #fe619a;
}
#wp-calendar caption {
  font-weight: bold;
  text-align: center;
  font-size:12px;
  color: #F32469;
}
#wp-calendar tbody tr #today {
  font-weight: bold;
  background-color: #FF4848;
}

#wp-calendar a:link { 
/*  text-decoration: underline;*/
/*  font-weight: bold;*/
  font-style: oblique;
  background-color: #FFEEFF;
}

#wp-calendar td a{
   display:block;
   width:100%;
   height:100%;
}

#wp-calendar td:hover {
  background-color: #fe619a !important;    /* マウスオーバー時の行の背景色 */
}

次にプラグインの calendar.css をカスタマイズします。

このカスタマイズ内容を「calendar.css」に上書きします。

#wp-calendar td#today {
/*    display: block;*/
    text-align: center;
/*border: 1px solid #444444;　masaa*/
}

#wp-calendar th.holiday,
#wp-calendar td.holiday,
#wp-calendar td.holiday a:link {
    color: #e50003;
}

#wp-calendar th.saturday,
#wp-calendar td.saturday{
/*#wp-calendar td.saturday a:link {　masaa*/
    color: #0000ff;
}

#wp-calendar td.tholiday {
/*    display: block; */
/*border: 1px solid #444444;　masaa*/
    color: #e50003;
}

#wp-calendar td.tholiday a:link {
    color: #e50003;
}

#wp-calendar td.tsaturday {
/*    display: block; */
/*border: 1px solid #444444;　masaa*/
    color: #0000ff;
}

/*#wp-calendar td.tsaturday a:link {
    color: #0000ff;
}*/

#wp-calendar td#today.tholiday {
    color: #e50003;
}

#wp-calendar td#today.tsaturday {
    color: #0000ff;
}