【ワードプレス】コクーンのカレンダーの見た目を、シンプルに変えてみました

むかし表を作ったりすると、かならず数字と数字の間に罫線（けいせん）を入れていました。
近年はそれが見直され、罫線の代わりにすき間を入れて、スッキリさせるのが主流のようです。

最近 WordPress（ワードプレス）のテーマを、Simplicity から Cocoon に変更しました。
すると、シンプルだったカレンダーが、罫線で固められていました。

Simplicity も Cocoon もわいひらさんが作成されたテーマです。
見た目はとてもシンプルですが、高機能でカスタマイズしやすいテーマです。

ちょっと好みではないので、スタイル定義（CSS）で調整してみることに。
日付の数字は、押せるときにだけボタンのような見た目に変わります。

Cocoon バージョン 2.1.3.3 以降に対応しています。

Cocoonのカレンダー
カレンダーの調整
ページネーションの調整
あとがき

Cocoonのカレンダー

Cocoon のカレンダーの見た目の特徴は、次の通りです（Cocoon バージョン 2.1.3.3 以降）。

罫線が引かれている。
今日の日付は、背景色が橙色になっている。
投稿した日は、背景色が黄色で下線が引かれている。
前月と次月への移動リンクは、下線が引かれている。

カレンダーの調整

ということで、カレンダーのスタイルを自分好みに変更してみました。

罫線は無くして、リンクが張られている場所はボタンのようにし、今日の日付は太字にしています。
もし今日投稿すると、太字の日付の周りにボーダーが引かれて、ボタンのようになります。

太字が近くにあると目立たないので、キャプションの年月も直しました。

/* カレンダー */
#calendar_wrap {
  margin-right: -4px;
  margin-left: -4px;
  line-height: 1.5;
}

#wp-calendar {
  margin-bottom: 5px;
  border-collapse: separate;
  border-spacing: 4px;
  border-style: none;
}

#wp-calendar caption {
  font-size: 1.2em;
  font-weight: normal;
}

#wp-calendar th {
  padding: 2px 0;
  background-color: #f5f5f5;
}

#wp-calendar td,
#wp-calendar th {
  border-style: none;
}

#wp-calendar td a,
#wp-calendar #today a,
.wp-calendar-nav a {
  border: solid 1px #ddd;
  border-radius: 4px;
  background-color: transparent;
  text-decoration: none;
  transition: all .3s;
}

#wp-calendar td a:hover,
#wp-calendar #today a:hover,
.wp-calendar-nav a:hover {
  background-color: #eee;
}

#wp-calendar #today {
  background-color: transparent;
  font-weight: bold;
}

.wp-calendar-nav {
  display: flex;
  justify-content: space-between;
  margin-right: 4px;
  margin-left: 4px;
}

.wp-calendar-nav a {
  display: inline-block;
  padding: 0 50px;
  color: inherit;
}

修正内容：

分割されたテーブルセルの間隔（4px）だけ、マイナスの左右マージン（-4px）で広げた。
テーブルセルを分割して間隔（4px）を空け、外枠のボーダーを消した。
キャプションの文字の大きさを大きくして、太さを標準にした。
テーブル見出しとテーブルデータのそれぞれのボーダーを消した。
リンクにはボーダーを付けて、背景色を透明（transparent）にし、下線を無くした。
今日の日付の背景色を透明（transparent）にして、太字にした。

ページネーションの調整

ついでにインデックスページの下部にあるページネーションの見た目も、調整しておきました。
リンクが張られている場所はボタンのようにし、現在のページは太字にしています。

「次のページ」ボタンは目立たせたいので、ボーダーを太くしました。

/* ページネーション */
.pagination-next-link,
.comment-btn {
  border: solid 2px #ddd;
  border-radius: 4px;
  background-color: #fff;
}

.pagination-next-link:hover,
.comment-btn:hover {
  background-color: #eee;
}

.pagination {
  margin-bottom: 0;
}

.pagination a {
  border-color: #ddd;
}

.pagination a:hover {
  background-color: #eee;
}

.pagination .current {
  border-color: transparent;
  background-color: #fff;
  font-weight: bold;
}

.page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
}

修正内容：