WordPress カレンダー
ブログサイトのデザインに合ったカレンダー設置方法についてまとめてみました。
休日表示付きリアルタイムカレンダー
WordPressのウィジェットにカレンダーは用意されているのですが、自分的には今一歩なのでここはプラグインに頼ることにします。
因みにWordPressテーマ Cocoonで、ウィジェットのカレンダーを設置するとこのようなカレンダーとなります。
カレンダーの条件は祝日対応であることと、ブログに合ったカレンダーにカスタマイズできることの2点です。
カレンダーのブログパーツを探してみたところ「小粋空間」の「休日表示付きリアルタイムカレンダー for WordPress」を利用することにしました。
WordPressのプラグイン新規追加では検索されないので、直接、小粋空間サイトからダウンロードする必要があります。
ダウンロードしたファイルをフォルダ毎、サーバーのプラグインフォルダにアップロードします。
次にWordPressのインストール済みプラグインの一覧に「Realtime Calendar」表示されるので有効化を行います。
これで「休日表示付きリアルタイムカレンダー for WordPress」が使用することができます。
カレンダーのカスタマイズ
デフォルトのデザインは、このようにシンプルなデザインとなっています。
この状態からブログに合わせてカスタマイズを行います。
Simplicityサイトの「カレンダーウィジェットに枠をつける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;
}
カスタマイズ後のカレンダー
今回のカスタマイズによって「カレンダー」は次のようになりました。
今回のカスタマイズによって、カレンダーがサイト全体とマッチするようになりました。
また、希望通り祝日が表示されるようになりました。
コメント