CSSマニュアル：カレンダーのデザイン - FunMaker［ファンメイカー］

こちらでは簡単格安ホームページ作成サイト - FunMaker［ファンメイカー］で作成したホームページに表示するカレンダーのデザイン変更方法を解説します。

対象セレクタ

テキストに対するセレクタ

FunMakerにおいて、カレンダーの年月［『2014年4月』など］を指定するセレクタは、『#wp-calendar caption』になります。
月曜日から金曜日までの曜日と日付を指定するセレクタは『#wp-calendar th, #wp-calendar td』です。
土曜日と土曜日の日付を指定するセレクタは『#wp-calendar th:last-child, #wp-calendar td:last-child』になります。
日曜日と日曜日の日付を指定するセレクタは『#wp-calendar th:first-child, #wp-calendar td:first-child』です。リンクが貼られている日付を指定するセレクタは『#wp-calendar td a』ですが、前月、後月のリンク色のみ変える場合は『#wp-calendar #prev a』と指定してください。

#wp-calendar caption {
	CSSプロパティ: 値; /* 年月のデザイン［『2014年1月』など］ */
}
#wp-calendar th, #wp-calendar td {
	CSSプロパティ: 値; /* 月曜日から金曜日までの曜日と日付 */
}
#wp-calendar th:last-child, #wp-calendar td:last-child {
	CSSプロパティ: 値; /* 土曜日とその日付 */
}
#wp-calendar th:first-child, #wp-calendar td:first-child {
	CSSプロパティ: 値; /* 日曜日とその日付 */
}
#wp-calendar td a {
	CSSプロパティ: 値; /* リンク */
}
#wp-calendar #prev a {
	CSSプロパティ: 値; /* 前月と後月のリンク */
}

枠に対するセレクタ

FunMakerにおいて、タイトルも含む大枠を指定するセレクタは『.widget_calendar』になります。タイトルを含まないカレンダー部分のみの枠を指定するセレクタは『#calendar_wrap』です。このセレクタで全体の余白の調節や囲みなどが可能です。

.widget_calendar {
	CSSプロパティ: 値;
}
#calendar_wrap {
	CSSプロパティ: 値;
}

カレンダーを表示するには、管理画面のHOMEに表示される『機能一覧』の中から、『各種機能の追加』をクリックし、『利用できる追加機能』の中から『カレンダー』を選択し、表示したい場所を示す項目にドラッグしてください。

CSSプロパティ一覧

カレンダーのテキストに対しては、通常通りテキスト要素に指定できる全てのCSSプロパティが利用できます。
以下に、利用できる代表的なCSSプロパティとその意味、使用例を紹介します。

font-family: 意味：フォント［書体］を指定。複数指定する場合は、半角カンマで区切り指定。; 使用例：『font-family: 'Osaka－等幅', 'Osaka-Mono';』
font-style: 意味：文字を斜体にする。値は、italic［斜体］/oblique［斜体］/normal［通常］の3種。; 使用例：『font-style: italic;』『font-style: oblique;』
color: 意味：文字色の指定。値は、RGB、RGBAでの指定が可能。; 使用例：『color: #FFA001;』（Webセーフカラー一覧）
font-size: 意味：文字サイズの指定。単位はpx。FunMakerの標準文字サイズは12px。; 使用例：『font-size: 18px;』
font-weight: 意味：文字の太さを指定。値は、100～900の間で指定（標準は400）。; 使用例：『font-weight: 700;』
line-height: 意味：行の高さを指定。単位はpxもしくは%。マイナス指定は不可。; 使用例：『line-height: 100px;』『line-height: 200%;』
letter-spacing: 意味：文字間隔を指定。単位はpx。0を指定すると標準と同じになる。; 使用例：『letter-spacing: 10px;』
text-decoration: 意味：文字装飾を指定。line-through［取り消し線］/underline［下線］/overline［上線］/blink［点滅］/none［装飾なし］; 使用例：『text-decoration: underline;』『text-decoration: overline;』
text-align: 意味：行揃えを指定。auto［自動］/left［左］/center［中央］/right［右］/justify［両端揃え］; 使用例：『text-align: center;』『text-align: right;』
margin: 意味：要素を囲むボックス外側の余白を指定。順番は上、右、下、左。; 使用例：『margin: 30px 20px 40px 30px;』（上30px、右20px、下40px、左30pxの余白）
padding: 意味：要素を囲むボックス内側の余白を指定。順番は上、右、下、左。; 使用例：『padding: 30px 20px 40px 30px;』（上30px、右20px、下40px、左30pxの余白）
background: 意味：背景の色、画像、画像の繰り返し、画像の固定、画像の位置を一括して指定。; 使用例：『background: #FFA001 url(https://funmaker.jp/service/icon/free/symbol/plane_001/cyanL.png) no-repeat top right fixed;』
border: 意味：要素を囲むボックスの枠線を指定。下線だけを指定する時はborder-bottom、以下同様に左border-left、上border-top、右border-right。; 使用例：『border: solid 1px #FFA001;』『border-bottom: solid 1px #FFA001;』

使用例

以下、カレンダーに対するCSSを利用したデザインの変更例をいくつか紹介します。

文字色の変更

#wp-calendar caption {
	color: #CC6699; /* 文字の色　#CC6699 */
}
#wp-calendar th, #wp-calendar td {
	color: #66CC99; /* 文字の色　#66CC99 */
}
#wp-calendar th:last-child, #wp-calendar td:last-child {
	color: #0099CC; /* 文字の色　#0099CC */
}
#wp-calendar th:first-child, #wp-calendar td:first-child {
	color: #FF0000; /* 文字の色　#FF0000 */
}
#wp-calendar td a {
	color: #CC33CC; /* 文字の色　#CC33CC */
}
#wp-calendar #prev a {
	color: #FF9900; /* 文字の色　#FF9900 */
}

年月の色をピンク、月曜日から金曜日までを緑、土曜日を青、日曜日を赤、リンクを紫、前月後月をオレンジに変更しています。

borderを利用したデザイン

#calendar_wrap {
	border: 2px dotted #CCCCCC; /* 全体のライン　2px　点線　色は#CCCCCC */
	padding: 2px; /* 内側の余白　上下左右　2px */
}

2行目でタイトルを含まないカレンダーの枠全体に点線を入れ、3行目で位置を調節しています。
今回borderはdotted［点線］を指定していますが、こちらをdouble［二重線］、実線［solid］、dashed［破線］、groove［へこんで見える線］、ridge［盛り上がって見える線］、inset［線の内側がへこんで見える線］、outset［線の内側が盛り上がって見える線］等に変更することで、様々なデザインの線を表示できます。

サイドバーとフッターを別のデザインにする

以下、カレンダーに対して、サイドバーとフッターとサイドバーでデザインを変える方法を解説します。

FunMakerでは、

サイドバー
フッター

毎に以下の様な別のID［目印］を振っているので、それらをCSSセレクタの前につけることで、個別の指定ができます。

サイドバー: aside
フッター: footer

例えば以下のようにCSSを記述することで、先述した使用例の『文字色の変更』をサイドバーのみにすることができます。

aside #wp-calendar caption {
	color: #CC6699;
}
aside #wp-calendar th, aside #wp-calendar td {
	color: #66CC99;
}
aside #wp-calendar th:last-child, aside #wp-calendar td:last-child {
	color: #0099CC;
}
aside #wp-calendar th:first-child, aside #wp-calendar td:first-child {
	color: #FF0000;
}
aside #wp-calendar td a {
	color: #CC33CC;
}
aside #wp-calendar #prev a {
	color: #FF9900;
}