本文へスキップ

ナビゲーションビボタンの色を変更 / ホームページビルダー21フルcssテンプレート編集

ナビゲーションビボタンの色を変更 / ホームページビルダー21フルcssテンプレート編集

ナビゲーションビボタンの色を変更 / ホームページビルダー21フルcssテンプレート編集

ナビゲーションビボタンの色を変更

  • Documentsの中に作ったホームページファイルが入った「mysite」フォルダーの中の「mainmenuBg_1R」「mainmenuBg_1R_on」のボタンを作ります。
    ボタンのサイズを確認します。
    「mainmenuBg_1R」のボタンのサイズは、「267×42」です。
    0

  • 「mainmenuBg_1R_on」のボタンのサイズも「267×42」でした。
    0
  • @ホームページビルダーを起動してサイトを開きます。
    Aメニューから「ツール(T)」→「ウェブアートデザイナーの起動(D)」でウェブアートデザイナーを使えるようにします。
    B「編集(E)」→「キャンバスの設定(S)」でダイアログボックスに「267×42」を記入設定し「適用(A)」「OK」とします。
    0
  • 最初に「mainmenuBg_1R」のボタンを作ります。
    サイズは、「267×42」でした。

    0
  • 「編集(E)」→「キャンバスの設定(S)」でダイログボックスに「267×42」を記入設定し「適用(A)」「OK」とします。
    キャンバスが表示されたら上方の「ボタン作成」アイコンをクリックします。
    ボタン作成ウィザードからボタン形状の「一覧(L)」から私は「button027」を選択しました。
    (既に色が着いています。先日ホームページを製作した時の色が残ってしまっています。)
    0
  • 色を決めます。
    カラーパレットの下の「その他(O)」をクリックして色の設定をします。
    色設定ウィザードの右端「16進」と書いてあるボックスに色のHTMLを書き込みます。

    ボックス1コに二文字づつ記入します。
    私は前回使用した「#97ddfe」を「97」「dd」「fe」と記入しました。
    「色の追加(A)」→「OK」とします。
    0
  • パレットにボタンが表示されました。
    0
  • サイズがあっていないのでマウスで押え、パレットのサイズに合わせます。
    メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」で名前を付けて「PNG]で保存します。
    パレットはこのままでもう一つのボタンを作ります。
    0
  • 次に、もう一つの「mainmenuBg_1R_on」のボタンを作ります。
    サイズは「267×42」です。
    0
  • 上で加工した「mainmenuBg_1R_on」のボタンが残っている場合は、マウスで押えて見えないところへ一時移動します。
    再び、ボタン作成ウィザードで「button027」を指定します。
    0
  • 前回のようにボタンウィザードで色の設定をします。
    私は、色の設定を「#00cc99」としました。。
    青色系がいいと考えましたが説明をわかりやすくする為、緑系としました。
    0
  • パレットにボタンが表示されましたがサイズがあっていません。
    0
  • パレットに合わせました。
    0
  • 「オブジェクトスタック(K)」から先ほど作った青系色のボタン「mainmenuBg_1R」をクリックして呼び出します。
    右下にオブジェクトスタックに入った青色系ボタンがあるのがわかります。
    画像では点線で表示されています。
    0
  • 点線と緑ボタンが重なったところを右クリックします。
    「重なり(A)]→「最前面に移動」と選択します。
    0
  • 下の画像のようになります。
    0
  • メニューから「表示(V)]→「テンプレートギャラリー(E)」としテンプレートギャラリーを表示します。
    0
  • 更に、「素材」から「リストマーク」を選択し「青色の三角矢印」を選択Wクリックしました。
    パレットのボタンに「青色の三角矢印」が表示されました。
    0
  • マウスでサイズを小さく設定して画像の位置に移動しました。
    0
  • 2種類を合わせたボタンの出来上がりです。
    メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」としファイル名を付け「PNG」で保存します。
    0
  • ボタンの色を変更する前です。
    0
  • ボタンの色を変更した後です。完成です。
    0
  • ホームページビルダーのテンプレートは、ビルダーだけを使ってホームページが作れるように考えられています。
    インターネット上で見かけるテンプレートとは少し違いがあるようです。

  • 質問やお問い合わせは、LINEでお願い致します。
    LINE ID