CSSマニュアル：フッター/footer最下部のデザイン（見出しや背景など）

こちらでは簡単格安ホームページ作成サイト - FunMaker［ファンメイカー］で作成したホームページのフッター［footer］の最下部のデザイン変更方法を解説します。
基本設定で保存したサイト名が表示されています。内容を変更する場合は、管理画面のHOMEに表示される『機能一覧』の中から、
基本設定 » サイト名[title]（全角30文字以内）（必須項目）
の項目を変更し保存することで変更が可能です。
コピーライトを追加する場合は同じページの『コピーライト』という項目に記入してください。

コピーライトなしのHOME最下部

CSSマニュアル：最下部のデザイン［コピーライトなし］ - FunMaker［ファンメイカー］

コピーライトありのHOME最下部

CSSマニュアル：最下部のデザイン［コピーライトあり］ - FunMaker［ファンメイカー］

対象セレクタ

FunMakerにおいて、コピーライトについての変更を指定するセレクタは『footer .line p』になります。最下部の見出し（サイト名）を指定するセレクタは『footer .line a』です。それぞれに余白を作りたい、それぞれに指示を出したい場合は各セレクタで指定をお願いします。
全体の背景や余白を変更したい場合のセレクタは『footer .line』です。

footer .line p {
	CSSプロパティ: 値; /* コピーライト */
}
footer .line a {
	CSSプロパティ: 値; /* サイト名 */
}
footer .line {
	CSSプロパティ: 値; /* 最下部全体 */
}

CSSプロパティ一覧

最下部の見出し・コピーライトに対しては、通常通りテキスト要素に指定できる全てのCSSプロパティが利用できます。
以下に、最下部の見出し・コピーライトに対して利用できる代表的な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を利用したデザインの変更例をいくつか紹介します。

文字色と余白の変更

footer .line p {
	color: #336666; /* 文字の色　#336666 */
}
footer .line a {
	color: #336666; /* 文字の色　#336666 */
}
footer .line {
	background-color: #00CCCC; /* 背景の色　#00CCCC */
	padding: 20px 0; /* 内側の余白　上下20px　左右0 */
}

2行目でコピーライトの文字色を変え、5行目でサイト名の色も同じ色に変えています。8行目で背景の色を変更し、9行目で上下の余白を20px指示しています。

中央揃えのデザイン

footer .line p {
	color: #336666; /* 文字の色　#336666 */
	font-size: 10px; /* 文字の大きさ　10px */
	text-align: center; /* 文字の中央揃え */
}
footer .line a {
	color: #336666; /* 文字の色　#336666 */
	font-size: 12px; /* 文字の大きさ　10px */
}
footer .line {
	background-color: #00CCCC; /* 背景の色　#00CCCC */
	padding: 20px 0; /* 内側の余白　上下20px　左右0 */
}

最初の使用例に加えて、4行目で中央揃え、3、8行目でそれぞれの文字の大きさを指示しています。