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

ワードプレス
この記事は約5分で読めます。

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

卓上カレンダー

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

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

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

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

スポンサーリンク

Cocoonのカレンダー

CSS適用前

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;
}

修正内容:

  • 「次のページ」ボタンは、ボーダーを太く(2px)して、背景色を白色(#fff)にした。
  • 「現在ページ」ボタンは、ボーダーを消して背景色を白色(#fff)にし、太字にした。
  • 「…」は、ボーダーと背景色を透明(transparent)にした。

あとがき

バンザイする棒人間

スタイル定義(CSS)を適用することによって、シンプルなカレンダーになりました。
ページネーションのスタイルも合わせたので、同じような感覚で操作してもらえると嬉しいです。

これからも、どうしたら判りやすいかを考えて、調整していくことにします。

コメント

タイトルとURLをコピーしました