こちらでは簡単格安ホームページ作成サイト - FunMaker［ファンメイカー］で作成したホームページのパンくずリストのデザイン変更方法を解説します。
パンくずリストの表示・非表示設定は管理画面のHOMEに表示される『機能一覧』の中から、
サイトデザイン » サイトデザインの変更 » 上部共通領域［ヘッダー］
を選択し、『パンくずリストを追加』のチェックボックスをクリックすることで変更できます。
対象セレクタ
FunMakerにおいて、パンくずリスト全体を指定するセレクタは、『#breadcrumb』になります。パンくずリストに表示されたテキストを指定するセレクタは『#breadcrumb li』です。パンくずリスト内のリンクを指定するセレクタは『#breadcrumb li a』になります。
#breadcrumb {
CSSプロパティ: 値;
}
#breadcrumb li {
CSSプロパティ: 値;
}
#breadcrumb li a {
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を利用したデザインの変更例をいくつか紹介します。
文字色とリンクの色の変更
#breadcrumb li {
color: #0099FF; /* 文字の色 #0099FF */
}
#breadcrumb li a {
color: #9933FF; /* 文字の色 #9933FF */
}
2行目でテキストの色を変更し、5行目でリンクのテキストの色を変更しています。
配置の変更
#breadcrumb {
text-align: left; /* 文字の左揃え */
margin: 10px 0 5px 20px; /* 外側の余白 上10px 右0 下5px 左20px */
}
2行目でテキストを左へ寄せるように指示をしています。3行目で位置を調節しています。