こちらでは簡単格安ホームページ作成サイト - FunMaker［ファンメイカー］で作成したホームページのサイトマップを表形式レイアウトにした場合に対する項目のデザイン変更方法を解説します。
FunMaker［ファンメイカー］ではサイトマップのレイアウトを2種類から選ぶことが出来ます。
変更する場合は、管理画面のHOMEに表示される『機能一覧』の中から、
サイトデザイン » サイトデザインの変更 » サイトマップ
をクリックし、希望のレイアウトを選択してください。
対象セレクタ
テキストに対するセレクタ
FunMakerにおいて、サイトマップ内の表形式レイアウトの左側の項目のテキストを指定するセレクタは、『#sitemap-table .sitemap-box .left a』になります。右側の項目のテキストを指定するセレクタは『#sitemap-table .sitemap-box .right li a』です。
#sitemap-table .sitemap-box .left a {
CSSプロパティ: 値;
}
#sitemap-table .sitemap-box li a {
CSSプロパティ: 値;
}
枠に対するセレクタ
FunMakerにおいて、サイトマップ内の表形式レイアウトの左側の項目の枠を指定するセレクタは、『#sitemap-table .sitemap-box .left』になります。右側の項目の枠を指定するセレクタは『#sitemap-table .sitemap-box .right』です。
列を指定するセレクタは『#sitemap-table .sitemap-box』になります。
#sitemap-table .sitemap-box .left {
CSSプロパティ: 値;
}
#sitemap-table .sitemap-box .right {
CSSプロパティ: 値;
}
#sitemap-table .sitemap-box {
CSSプロパティ: 値;
}
CSSプロパティ一覧
サイトマップ内の表形式レイアウトの項目には、通常通りテキスト要素に指定できる全てのCSSプロパティが利用できます。
以下に、利用できる代表的なCSSプロパティとその意味、使用例を紹介します。
- background-color
- 意 味：背景色の指定。値は、RGB、RGBAでの指定が可能。
- 使用例：『background-color: #FFA001;』（Webセーフカラー一覧）
- 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を利用したデザインの変更例を紹介します。
文字色と大きさの変更
#sitemap-table .sitemap-box .left a {
color: #FFA001; /* 文字の色 #FFA001 */オレンジ
}
#sitemap-table .sitemap-box li a {
color: #01A0FE; /* 文字の色 #01A0FE */青
}
2行目で左側の項目の文字色をオレンジに、3行目で右側の項目の文字色を青に変更しています。
borderを利用したデザイン
7
#sitemap-table .sitemap-box .right {
border-left: 4px double #999999; /* 左のライン 太さ4px 二重線 色は#999999 */
}
#sitemap-table .sitemap-box {
border-bottom: 1px dashed #000000; /* アンダーライン 太さ1px 破線 色は#000000 */
}
2行目で左と右の間に太さ4pxの二重線を、5行目で列との間に1pxの破線を入れています。
borderは今使用したdouble［二重線］、破線［dashed］の他にも実線［solid］、dotted［点線］、groove［へこんで見える線］、ridge［盛り上がって見える線］、inset［線の内側がへこんで見える線］、outset［線の内側が盛り上がって見える線］等に変更することが可能です。