こちらでは簡単格安ホームページ作成サイト - FunMaker［ファンメイカー］で作成したホームページのサイトマップを表形式レイアウトにした場合に対するデザイン変更方法を解説します。
FunMaker［ファンメイカー］ではサイトマップのレイアウトを2種類から選ぶことが出来ます。
変更する場合は、管理画面のHOMEに表示される『機能一覧』の中から、
サイトデザイン » サイトデザインの変更 » サイトマップ
をクリックし、希望のレイアウトを選択してください。
対象セレクタ
FunMakerにおいて、サイトマップ内の表形式レイアウトを指定するセレクタは、『#sitemap-table』になります。
列全体を指定するセレクタは『#sitemap-table .sitemap-box』です。
#sitemap-table {
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を利用したデザインの変更例を紹介します。
背景色の変更とborderを利用したデザイン
#sitemap-table {
background-color: #CCCCCC; /* 背景の色 #CCCCCC */
border: 1px solid #006699; /* 全体のライン 太さ1px 実線 色は#006699 */
}
#sitemap-table .sitemap-box {
border-bottom: 1px dotted #006699; /* アンダーライン 太さ1px 点線 色は#006699 */
}
2行目で表全体の背景色をグレーに変更し、周りを濃いブルーの線で囲む指示をしています。6行目で列と列の間の線を濃いブルーの点線に変更しています。
borderは今指定した実線［solid］、dotted［点線］の他にもdouble［二重線］、破線［dashed］、groove［へこんで見える線］、ridge［盛り上がって見える線］、inset［線の内側がへこんで見える線］、outset［線の内側が盛り上がって見える線］等に変更することが可能です。