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

関連記事

上部のメニュー「カスタムメニュー」の設定

上記メニューの設定方法です。管理画面の「外観」→「メニュー」にて下記ページを開く

記事を読む

Stinger2-20130801UPのご連絡（カスタムヘッダーに関する記述の変更）

カスタムヘッダーに関する記述を変更致しました。 functions.phpで該当箇所のみ変更頂

記事を読む

Googleアドセンスコードもウイジェット対応になりました

Googleアドセンスコードのウイジェット対応版をUPしました。

記事を読む

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

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

記事を読む

【重要】訂正版UPのお知らせ

いくつかの修正を加えたテーマをUP致しました。 2013年4月14日のAM3：00より前にダウ

記事を読む

Stinger20130615verをUPしました。

いくつかのNoticeの改善と、サムネイルが正方形にトリミングしない点を改善しました。すでに

記事を読む

Stinger20130711をUPしました。

Googleの検索結果のパンくずに対応したStinger20130711をUPしました。

記事を読む

Stinger2 ver0423をUPしました。

いくつかの改善と修正を行いました「ver20130423」をUP致しました。主には、「ア

記事を読む

ver20130516をUP致しました。

SNSボタンと、スマートフォンの関連記事のレイアウトを変更した ver20130516をU

記事を読む

好きなところにSNSボタンを表示したい

SNSの以下のコードを「外観」→「テーマの編集」にて、サイドバーとか任意の場所にペーストして

記事を読む

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