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

最近 WordPress(ワードプレス)のテーマを、Simplicity から Cocoon に変更しました。
すると、シンプルだったカレンダーが、罫線で固められていました。
Simplicity も Cocoon も わいひらさんが作成されたテーマです。
見た目はとてもシンプルですが、高機能でカスタマイズしやすいテーマです。
ちょっと好みではないので、スタイル定義(CSS)で調整してみることに。
日付の数字は、押せるときにだけボタンのような見た目に変わります。
Cocoon バージョン 2.1.3.3 以降に対応しています。
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)にして、太字にした。
ページネーションの調整
CSS適用前 CSS適用後
ついでにインデックスページの下部にあるページネーションの見た目も、調整しておきました。
リンクが張られている場所はボタンのようにし、現在のページは太字にしています。
「次のページ」ボタンは目立たせたいので、ボーダーを太くしました。
/* ページネーション */
.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)を適用することによって、シンプルなカレンダーになりました。
ページネーションのスタイルも合わせたので、同じような感覚で操作してもらえると嬉しいです。
これからも、どうしたら判りやすいかを考えて、調整していくことにします。
コメント