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

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

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

卓上カレンダー

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

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

ちょっと好みではないので、スタイル定義(CSS)で調整してみました。

スポンサーリンク

Cocoonのカレンダー

Cocoonのカレンダー
CSS適用前

Cocoon のカレンダーの見た目の特徴は、次の通りです。

  • 罫線が引かれている。
  • 今日の日付は、背景色が橙色になっている。
  • リンクが張られている場所(投稿した日、前月、次月)は、背景色が黄色で下線が引かれている。

カレンダーの調整

ということで、カレンダーのスタイルを自分好みに変更してみました。
罫線は無くして、リンクが張られている場所はボタンのようにし、今日の日付は太字にしています。

もし今日投稿すると、太字の日付の周りにボーダーが引かれて、ボタンのようになります。

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

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

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

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

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

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

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

修正内容:

  • 分割されたテーブルセルの間隔(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をコピーしました