WebDesignのヨリドコロ

ページ内目次

Archives Calendar Widget – サイドバーのカレンダーをおしゃれに

WordPress標準のウィジェットで簡単にサイドバーなどにアーカイブカレンダー（投稿記事のあるなしカレンダー）を表示できますが、あんまりカッコよくない(；´∀｀)

スタイルシートでカスタマイズすればいいのだけど、標準→おしゃれとするのはけっこう修正箇所が多いかなと。

そこで「プラグインでできちゃえばいいのに」とさがしてみたところ、やっぱりありました♬

Archives Calendar Widget というプラグイン。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-04-7-09-39実は、おしゃれにというか、サイドバーを狭くしたら標準カレンダーがはみ出してしまったのです。

こんなふうに

かっちょわるい

 

そこで、Archives Calendar Widget をインストールして、ウィジェットを配置すると…

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-04-7-12-08

ただ配置しただけでも

おっ♡

って感じです。

でも、年間表示(；´∀｀)

 

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-04-7-11-30もちろん、ウィジェットの設定画面で簡単に月表示に切り替えられます。

他にも前へ後ろへの記号だとか、表示するカテゴリーだとか、いろいろカスタマイズできます。

デザインも数種類用意されていますが、これはあんまりしっくりくるのがありませんでした。

デフォルトがけっこうきれいなので、これでもいいかなと思ったんだけど、全体がブルー基調のサイトだったので、ちょっとだけcssをカスタマイズ。

カレンダーのヘッダーを直すのはココですね。

.calendar-archives.calendrier .calendar-navigation {
    height: 30px !important;
    border-radius: 5px 5px 0 0;
    border-bottom: 0;
    color: #FFF;
    text-shadow: -1px -1px 0px rgba(0,0,0,0.4);
    background-image: -webkit-linear-gradient(top, #cd310d 0%, #b32b0c 100%);
    background-image: -o-linear-gradient(top, #cd310d 0%, #b32b0c 100%);
    background-image: linear-gradient(to bottom, #cd310d 0%, #71463c 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFCD310D', endColorstr='#FFB32B0C', GradientType=0);
}

カレンダー内の投稿のあった日の色はこのあたりで変えられます。

.calendar-archives.calendrier .month.has-posts, .calendar-archives.calendrier .day.has-posts {
    background-color: #cd310d;
}

10分もあれば簡単にできちゃいます。

最終的には、こんなです

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-04-8-41-05

いいでしょ

WordPress神推しブログのネタワンさんに、選べるデザインの見本とかがアップされてます。たすかるぅ

Archives Calendar Widget – カレンダー形式のアーカイブを表示できるWordPressプラグイン

↑上へまいりま〜す