[WordPress.com] カレンダーウィジェットの日付を丸くする

WordPress.com にはカレンダーウィジェットというのがあります。私自身は、どちらかというと機能的なことよりもブログのデザインの一つとして利用している面が強いです。

そういうわけで、とりあえず、私自身のブログで使っているカレンダー用の CSS を紹介しておきます。

Twenty Eleven

AccessMenuBarApps-1
/* カレンダー comemo-theme-twenty-eleven rev.0.1 */
.widget_calendar #wp-calendar th,.widget_calendar #wp-calendar tfoot td {
border: none;
background: none;
}

.widget_calendar #wp-calendar td,
.widget_calendar #wp-calendar th {
width: 14%;
}

#today {
border: 1px solid #d38110;
border-radius: 2px;
}

.widget_calendar tbody td a, .widget_calendar tbody td a:visited {
background-color: #DC8110;
border-radius: 12px 12px 12px 12px;
color: #FFFFFF;
display: inline-block;
height: 24px;
line-height: 24px;
margin: 1px;
vertical-align: middle;
width: 24px;
}

.widget_calendar tbody td a:hover {
background-color: #e8a870;
color: white;
}

Twenty Thirteen

AccessMenuBarApps-2
/* カレンダー comemo-theme-twenty-thirteen rev.0.1 */
#wp-calendar tbody td a {
background-color: #2F7D3D;
border-radius: 15px;
color: white;
display: block;
height: 30px;
width: 30px;
margin: 2px auto;
}

#wp-calendar tbody td {
width: 30px;
}

.widget_calendar table, .widget_calendar td {
border-spacing: 5px;
}

#today {
border: 1px solid green;
border-radius: 2px;
}

Widely (2020/02/22 現在、このテーマはリタイアしています。)

AccessMenuBarApps-3
/* カレンダー comemo-theme-widely rev.0.1 */
#wp-calendar tbody td a {
background-color: #b97722;
border-radius: 10px;
width: 20px;
height: 20px;
line-height: 20px;
color: white;
margin: 0 auto;
}

#wp-calendar #today {
border: 1px solid #888888;
}

丸くする方法について簡単に説明しようと考えていたのですが、そのまんまの記事があったので、そちらの説明の方は割愛します。

投稿者: comemo

WordPress.com での記事の作成方法など

[WordPress.com] カレンダーウィジェットの日付を丸くする」への1件のフィードバック

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。