TOP

WordPressのカレンダーのデザインカスタマイズ

公開日： 2013/08/24 : NEWS, カスタマイズ

すいません。遅くなりましたがウィジェットのカレンダーのCSSを書きましたのでカレンダーを使用している方はstyle.cssにコピペして下さい。

こんな感じです。

2013-08-24_170923

/*-------------------------------------
カレンダー
------------------------------------*/

#wp-calendar {
	border-collapse: collapse;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	width: 250px;
	margin-left: 35px;
}
#wp-calendar thead tr th {
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #999;
	border-left-color: #999;
}
#wp-calendar td {
	text-align: center;
	padding: 0px;

}
#wp-calendar caption {
	font-weight: bold;
	text-align: left;
}
#wp-calendar tbody tr #today {
	background-color: #CCC;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

/*-------------------------------------

カレンダー

------------------------------------*/

#wp-calendar {

border-collapse: collapse;

border-top-width: 1px;

border-right-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-top-color: #999;

border-right-color: #999;

width: 250px;

margin-left: 35px;

}

#wp-calendar thead tr th {

border-bottom-width: 1px;

border-left-width: 1px;

border-bottom-style: solid;

border-left-style: solid;

border-bottom-color: #999;

border-left-color: #999;

}

#wp-calendar td {

text-align: center;

padding: 0px;

}

#wp-calendar caption {

font-weight: bold;

text-align: left;

}

#wp-calendar tbody tr #today {

background-color: #CCC;

}

スマホ用はsmart.cssにこちらをコピペ

/*-------------------------------------
カレンダー
------------------------------------*/

#wp-calendar {
	border-collapse: collapse;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: #999;
	border-right-color: #999;
	width: 100%;

}
#wp-calendar thead tr th {
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #999;
	border-left-color: #999;
}
#wp-calendar td {
	text-align: center;
	padding: 10px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #999;
	border-left-color: #999;
}
#wp-calendar caption {
	font-weight: bold;
	text-align: left;
}
#wp-calendar tbody tr #today {
	background-color: #CCC;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

/*-------------------------------------

カレンダー

------------------------------------*/

#wp-calendar {

border-collapse: collapse;

border-top-width: 1px;

border-right-width: 1px;

border-top-style: solid;

border-right-style: solid;

border-top-color: #999;

border-right-color: #999;

width: 100%;

}

#wp-calendar thead tr th {

border-bottom-width: 1px;

border-left-width: 1px;

border-bottom-style: solid;

border-left-style: solid;

border-bottom-color: #999;

border-left-color: #999;

}

#wp-calendar td {

text-align: center;

padding: 10px;

border-bottom-width: 1px;

border-left-width: 1px;

border-bottom-style: solid;

border-left-style: solid;

border-bottom-color: #999;

border-left-color: #999;

}

#wp-calendar caption {

font-weight: bold;

text-align: left;

}

#wp-calendar tbody tr #today {

background-color: #CCC;

}

カスタマイズはご自由に！

Tweet

関連記事

SNSの数字取得不具合の修正版　Ver20130531

SNSの数字取得不具合の修正版です。取り急ぎですみません！

記事を読む

Google+ボタンの不具合について

ユーザー様より、「google+ボタンが上手く起動しない。」というご指摘を頂きました。確認の上、

記事を読む

ヘッダーの余計なソースを表示させない

以下の記事を参考にヘッダーソースの最適化をしてあります。参考サイト：プラグインを使わないでヘッダ

記事を読む

サイドバーの広告をスクロール（固定）する機能

広告をスクロールする機能参考サイト：ライブドアみたいにスクロールしたらサイドバーの広告を固定する

記事を読む

Stinger2 20130730をUPしました

jsコードの修正したものをUPしましたのでダウンロードおよび差し替えをお願い致します。 ※

記事を読む

Stingerのfunctions.php

記事を読む

[STINGER3修正のお願い] IE9で、画像が大きく表示される

申し訳ありません。 CSSの記述ミスでIE9にて通常画像がPCでも拡大表示されるご報告を頂いており

記事を読む

【Stinger利用者の方は必ずお読み下さい】Stingerでいるもの、いらないもの

ちょっと取り急ぎのエントリーです。 Stingerでプラグイン系の不具合が多いので取り敢えず、

記事を読む

【重要】Stingerのスマホ用アドセンス表示の問題について

重要なお願いフォローさんから現在のStingerのスマホのアドセンス表示に対し問題点があると

記事を読む

プラグインが上手く動かない件について

まずは、 http://wp-stinger.com/news/post-646/ を必

記事を読む

PREV: 違うサイズのアイキャッチ画像を作る
NEXT: [お詫び] ヘッダー画像が縮小される件について

About

SEOとアフィリエイトに効果的なWordPressテーマSTINGERの作者です。「はじめてのWordPress」で紹介されました。

@ENJILOG からのツイート

NEW ENTRY

: STINGERのカスタマイズのまとめがNAVERまとめに
http://matome.naver.jp/ 有難い事

: 【重要】Stingerのスマホ用アドセンス表示の問題について
重要なお願いフォローさんから現在のStingerのスマホのアド

: [STINGER3修正のお願い] IE9で、画像が大きく表示される
申し訳ありません。 CSSの記述ミスでIE9にて通常画像がPCでも拡

: 永江様へ　Stinger2でサムネイルが飛び出す件
ソースを拝見したところが該当箇所はで、その他は [crayo

: Stinger3の正式公開
この度、Stinger3 betaを公開しました。従来のS

→もっと見る

PAGE

僕のお勧めサーバー

Tweet