本文へスキップ
ナビゲーションビボタンの色を変更 / ホームページビルダー21・22フルcssテンプレート編集
ナビゲーションビボタンの色を変更 / ホームページビルダー21・22フルcssテンプレート編集
ナビゲーションビボタンの色を変更 / ホームページビルダー21・22フルcssテンプレート編集
ナビゲーションビボタンの色を変更
★サイド
ナビゲーションボタンの色を好みの色に変更
します。
2種類の画像を使ってのボタン構成になっています。。
Documentsの中に作ったホームページファイルが入った「mysite」フォルダーの中の
「mainmenuBg_1R」
「mainmenuBg_1R_on」
のボタンを作ります。
ボタンのサイズを確認します。
「mainmenuBg_1R」のボタンのサイズは、「267×42」です。
「mainmenuBg_1R_on」のボタンのサイズも「267×42」でした。
@ホームページビルダーを起動してサイトを開きます。
Aメニューから「ツール(T)」→「ウェブアートデザイナーの起動(D)」でウェブアートデザイナーを使えるようにします。
B「編集(E)」→
「キャンバスの設定(S)」
でダイアログボックスに「267×42」を記入設定し「適用(A)」「OK」とします。
最初に「mainmenuBg_1R」のボタンを作ります。
サイズは、「267×42」でした。
「編集(E)」→「キャンバスの設定(S)」でダイログボックスに「267×42」を記入設定し「適用(A)」「OK」とします。
キャンバスが表示されたら上方の
「ボタン作成」
アイコンをクリックします。
ボタン作成ウィザード
からボタン形状の「一覧(L)」から私は「button027」を選択しました。
(既に色が着いています。先日ホームページを製作した時の色が残ってしまっています。)
色を決めます。
カラーパレット
の下の「その他(O)」をクリックして色の設定をします。
色設定ウィザード
の右端「16進」と書いてあるボックスに色のHTMLを書き込みます。
ボックス1コに二文字づつ記入します。
私は前回使用した「#97ddfe」を「97」「dd」「fe」と記入しました。
「色の追加(A)」→「OK」とします。
パレットにボタンが表示されました。
サイズがあっていないのでマウスで押え、パレットのサイズに合わせます。
メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」で名前を付けて「PNG]で保存します。
パレットはこのままでもう一つのボタンを作ります。
次に、もう一つの「mainmenuBg_1R_on」のボタンを作ります。
サイズは「267×42」です。
上で加工した「mainmenuBg_1R_on」のボタンが残っている場合は、マウスで押えて見えないところへ一時移動します。
再び、ボタン作成ウィザードで「button027」を指定します。
前回のようにボタンウィザードで色の設定をします。
私は、色の設定を「#00cc99」としました。。
青色系がいいと考えましたが説明をわかりやすくする為、緑系としました。
パレットにボタンが表示されましたがサイズがあっていません。
パレットに合わせました。
「オブジェクトスタック(K)」から先ほど作った青系色のボタン「mainmenuBg_1R」をクリックして呼び出します。
右下にオブジェクトスタックに入った青色系ボタンがあるのがわかります。
画像では点線で表示されています。
点線と緑ボタンが重なったところを右クリックします。
「重なり(A)]→「最前面に移動」と選択します。
下の画像のようになります。
メニューから「表示(V)]→「テンプレートギャラリー(E)」としテンプレートギャラリーを表示します。
更に、「素材」から「リストマーク」を選択し「青色の三角矢印」を選択Wクリックしました。
パレットのボタンに「青色の三角矢印」が表示されました。
マウスでサイズを小さく設定して画像の位置に移動しました。
2種類を合わせたボタンの出来上がりです。
メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」としファイル名を付け「PNG」で保存します。
ボタンの色を変更する前です。
ボタンの色を変更した後です。完成です。
ホームページビルダーのテンプレートは、ビルダーだけを使ってホームページが作れるように考えられています。
インターネット上で見かけるテンプレートとは少し違いがあるようです。
ナビゲーションの編集については下記にてそれぞれ説明致します。
▼
ナビゲーション(サイド)を全頁に反映させる
▼
ナビボタンの順序を変更
▼
ナビボタンの名称(名前)の変更
▼
ナビボタンの削除
▼
ナビボタンの色を変更
▼
リンク文字色・下線の色変更
▼
ナビのいらないHTMLを削除
▼質問やお問い合わせは、LINEでお願い致します。(無料)
・
編集中の「わからない」「困った」にはLINEにてお問い合わせください。(無料)
(
LINE無料相談は
、
9時〜23時
ですがすぐに返信できないこともあります。)
ご自宅へ
出張訪問(関東地区・その他相談)によるサービス(お困りごとの解決)は有料となります。
(ホームページビルダーによるホームページ作成方法,編集方法を一から教授致します。・・・
有料
)
■有益なタイトルタグ・Descriptionダグを作成致します。5,000円
■会社やあなたの
昔のホームページを
最近流行の
レスポンシブデザイン
(パソコン・タブレット・スマートフォン対応)のホームページビルダー収録「
フルCSSテンプレート
」で
ホームページを作り変え致します。
(1〜10ページ36,000〜160,000円)
・ホームページビルダーを使うので
後にご自分で編集
できます。
(ホームページビルダーによるホームページ
編集方法を一から教授
致します。)
▼LINE登録は、QRコードをタップして下さい。
このページの先頭へ
ナビゲーション
最初から設定する
@クラシック版で直ぐ始める
Aタイトル画像の加工と編集
A-2タイトル写真の編集
A-3タイトル用写真の変更
BTOPページ「index」を編集
B-2編集方法-タブを選択
B-3要素<title>の書換
B-4TOPICSに本文を書く
・TOPICSの増やし方く
・段落の増やし方く
・TOPICSに写真挿入方法
・TOPICSに表挿入方法
・NWESを削除する方法
・文字サイズを変更スル方法
CSSを書換えfontの属性を変更
オプションでfontの属性を変更
ページを増やす方法
ナビゲーションを編集
NAVIを全頁に反映させる
・NAVIの順序を変更スル
・NAVIの名称を変更スル
・不要NAVIの頁を削除
・NAVIボタンの色を変更
・NAVIのリンク色を変更
・NAVIの不要HTMLを削除
タップすると電話番号表示
C会社方針のページ編集
Dサービス/製品一覧の頁編集
E新着情報・FAQの頁編集
F会社概要の頁編集
G採用情報の頁編集
Hお問い合わせのページ編集
Iプライバシーポリシーの頁編集
J特定商取引法ニ関スル記述編集
Kアクセスaccess.html の編集
Lバナーを編集
バナー編集/ウェブアートデザイナー
・グラデーションバナー作成
・画像背景透明化/ウェエブアートD
Mナビゲーションを全頁に反映
Nホームページヲアップロードする
Oホームページヲサーバに転送する
ホームページをダウンロ−ド
ヘッダー(header)を編集
フッター(footer)を編集
MENUアイコンを編集加工
ハンバーガーメニューにMENU表示-@
ハンバーガーメニューにMENU表示-A
グーグルマップの挿入方法
XMLサイトマップを作る
サイト内サイトマップを作る
タップすると電話番号表記
LINE-QRコードで友だち追加
ブログをナビボタンにリンクさせる
内部リンク元から内部リンク先
サイト転送の自動転送設定
ビルダーで基本のSEO設定
freedom思考的SEO対策
検索順位ノ検証(SEO効果ノ検証)
SEO対策をあれこれ考える前に!
・SEO対策をアレコレ考エル前に!A
・SEO対策をアレコレ考エル前に!B
・SEO対策をアレコレ考エル前に!C
キャッシュを知ろう・考えよう
検索に引っかからないホームページ
検索に引っかカラナイホームページA
検索に引っかカラナイホームページB
検索に引っかカラナイホームページC
検索に引っかカラナイホームページD
SP版-サイトフォルダの場所ヲ探す方法
SP版-背景色を変更する方法
SP版-文字のイロイロ変更方法
編集方法 / まとめ
いろいろな編集方法(質問から)
ホームページサンプル集
索引(タグ一覧)
編集に必要なソフト・参考書
バナー・タイトル用写真など販売
タイトル用写真販売
バナースペース
ビルダーのテンプレートが購入できます
freedomは
ホームページビルダー22で編集中