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