【WordPress】MASAa.blogにもカレンダーを設置してみました!

アイキャッチ画像 WordPress ブルー

カレンダーのブログパーツ設置について

WordPressで作成されたブログサイトをいろいろ見てみると、カレンダーの設置が無いブログサイトが結構多いみたいですね。

当初、今回のMASAa.blog@WordPress版でもカレンダーを設置しない方向でした。

しかし、いざカレンダーの無いMASAa.blogを見ると、元々MASA.blog@MovableType版でカレンダーを設置したため物足りなさを感じてしまいましたσ(^◇^;)

カレンダーが有ることで、今月はどれだけのエントリー記事をどの日にアップしたかすぐに分かったのですが、それが確認出来ないためにエントリー記事アップの意欲低下に繋がることが分かりました。

自分にとってカレンダーは結構重要なブログパーツみたいです。

MASAa.blog カレンダーの条件について

と言うことで、MASAa.blog@WordPress版にもカレンダーを設置することにしました!( ・`ー・´) + キリッ

WordPressのウィジェットにもカレンダーは用意されているのですが、これではちょっとダサいですね(^^ゞ

デフォルト カレンダー

今回のカレンダーは、MASA.blog@MovableType版で使っているような祝日が分かるカレンダーで有ること、MASAa.blogに有ったデザインで有ることの2つが条件です。

そこで、カレンダーのプラグインを探してみたもののなかなか自分好みのカレンダーがありません。

小粋空間のカレンダーのブログパーツを使う!

そこでMovableType版MASAa.blogで使用中のカレンダーをリリースしている「小粋空間」で調べてみると、WordPress版の「休日表示付きリアルタイムカレンダー for WordPress」がリリースされていました!

WordPressでのプラグイン新規追加では検索されないので、この小粋空間サイトから直接ダウンロードして、サーバーのプラグインフォルダにアップロードする必要が有ります。

アップロードすると、WordPressのインストール済みプラグインの一覧に表示されるので、有効化を行えば「休日表示付きリアルタイムカレンダー for WordPress」が使用することができます。

しかし、デフォルトのデザインは、「日曜日」「土曜日」「休日」がそれぞれ色分けされているだけの状態です。

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

カレンダーをカスタマイズする!

この状態では使う気にはなれないので、MASAa.blogに合わせてカスタマイズしてみました。

一から作る気も起こらないので、Simplicityサイトの「カレンダーウィジェットに枠をつけるCSSカスタマイズ方法」を参考にしてカスタマイズしてみました。

カスタマイズ後のソース(style.css)です。

 

これだけでは、本日のセルの枠線が黒だったり、style.cssを弄ったことによって土曜日の青色が消えてしまったりしたため、プラグインの calendar.css についても少しだけカスタマイズさせて頂きました。

これが calendar.css のソースです。

 

これで出来たのがMASAa.blogの右上に設置した祝日対応のカレンダーです!