リストを利用してリンクボタンを作成する

通常、リストを挿入しリンクの設定を行うと
<図1>
<図1>のように表示されますが、スタイルシートを利用すると、ボタンのように表示することができます。

1. リストの挿入とリンクの設定

挿入→リスト→番号なしリスト

リストを利用し、文字を入力後リンクの挿入を行います。

2. 「スタイルシートマネージャー」で通常のリンク状態を装飾する

最低限設定する個所は次のとおりです。
※このページにあるサンプルリストは下に示した設定のほかに、[レイアウト]タブ内の「ボーダー」項目のスタイル(アウトセット/インセット)や[色と背景]タブ内の「前景色」を設定しています。

※ボタンサイズを反映する

3.ホームページビルダー10以降をお使いの場合。ボタンのサイズを反映させるには？

※ホームページビルダー10以前のバージョンをご利用の場合はソースへ直接書き込む操作が必要です。

HTMLソースを開き、display : block;　をA要素に対して追加します。これを追加しないとボタンサイズとなる幅と高さが反映されません。

(例)HTMLソースを開き、次のように追加します。
A{
text-decoration : none;
background-color : #66cc66;
width : 100px;
height : 30px;
display : block;　　<!--この行を追加する-->
}

補足.横方向に配置する

HTMLタグの候補 「LI (リスト項目)」に対して、[位置]タブ「回り込み　左」を選択すると横に表示することが出来ます。