本文へスキップ
MENUのアイコンに手を加える【編集方法-2】 / ホームページビルダー21・22フルcssテンプレート編集
MENUのアイコンに手を加える【編集方法-2】 / ホームページビルダー21・22フルcssテンプレート編集
MENUのアイコンに手を加える【編集方法-2】 / ホームページビルダー21・22フルcssテンプレート編集
MENUのアイコンに手を加える
MENUのアイコンに手を加える
【編集方法-2】
「編集方法-1」では背景処理などうまくいかなかったなどの方はお試しください。
下のような
三本線のアイコン
(
ハンバーガーメニュー
)では、ホームページを訪問なさった方は何の印かわからない?
スマートフォンでアクセスした時にメニューがない?・・・と思われないように!
MENUのアイコンに手を加え下のようにします。
三本線の背景色がわからないので調べてみます。
CSSに書いてあるのでいくつかあるCSSフォルダを適当に開いてレスポンシブの言葉を頼りに適当に探してみました。
「container_1R_2c_right」
に
「レスポンシブル設定」
というところが運よく見つかりました。
更に下にストロークしていきます。
色のHTMLは「#+6文字」で現わしています。
下にストロークしながら「#」を見つけたらクリックします。
「border-top-color: #ecf3fa;」をクリックして
プロパティを見ると・・・あたりのようです。
「#ecf3fa 」が探していた色のようです。
一度、MENUのアイコンのサイズなどを調べておきます。
①ドキュメントからテンプレートの入ったフォルダを開きます。
②アイコンにマウスオンしてサイズなど調べます
サイズは「27×20 」イメージは「PNG]とわかりました。
ホームページビルダーのメニューから
「ツール(T)」→「ウェブアートデザイナーの起動(D)」をクリックします。
新規に「ファイル(F)」→「キャンバスの新規作成(N)」
編集(E)」→「キャンバスの設定(S)」と進み「幅(W)410×高さ(H)100」とします。
ツールバーから「四角形」を選択します。
「幅(W)410×高さ(H)100」の枠の左上外側より右下外側へドラッグします。
画像は、左上から右下へドラッグした後の様子です。
「カラーパレットの表示/非表示」をクリックします。
「カラーパレット」が表示されたら
「カラーパレット」の中の「変更」ボタンをクリックします。
「色設定」ダイアログが表示されます。
右下の「16進」と書いてある下のボックスに「#ecf3fa」を書き入れます。
ボックス1コに2文字づつ書き入れます。
「ec」「f3」「fa」と記入します。
中央下の「色|純色(O)」に色が表示されます。
OKなら「色の追加(A)」ボタンをクリックします。
ツールボックスに色が正しく表示されたか確認します。
「幅(W)410×高さ(H)100」の枠に「色の塗り潰し」をします。
「塗り潰し」アイコンをクリックします。
「塗り潰し」アイコンを「幅(W)410×高さ(H)100」の枠にマウスインします。
色が変更になりました。
次に三本線のマーク線を作ります。
既に、マーク線の色は「#0066FF」と決めています。
「カラーパレット」→「変更」→「色の設定」で「#0066ff」セットして下さい。
色の切り替えは「直角に曲がった矢印」をクリックすると変更になります。
一度、作業しやすくする為に「塗りつぶし」アイコンをクリックします。
どこでも良いので「四角形」アイコンで画像のような小さめの四角形を作ります。
「塗りつぶし」アイコンで四角形をクリックします。
青色に色が着きました。
青色の「四角形」右クリックします。
「オブジェクトの編集(O)」を選択します。
表示されたダイアログ(図形の編集)に、
「幅(W)20/高さ(H)20」の数値を入れます。
ツールボックスの左上方の「オブジェクト選択」をクリックします。
「オブジェクト選択」を選択すると図形を移動させることができます。
マウスで青くなった四角形を左上方角ぴったりに移動させ配置します。
「青四角形」を右クリックして「コピー(C)」を選択します。
下の画像のように三か所に配置します。
更に「四角形」アイコンで長方形を作ります。
長方形を右クリック→「オブジェクトの編集(O)」で表示されたダイアログに「幅(W)115/高さ(H)20」と記入します。
記入前に「縦横比保持(K)」の☑は外します。
「塗りつぶし」アイコンで長方形にマウスインして青色にします。
下の画像になるよう「オブジェクト選択」で編集配置します。
下の画像の任意の位置に「MENU」の文字を入れます。
文字を挿入するのにツールボックスの「A」をクリックします。
任意の位置にマウスインして文字を書きます。
文字のプロパティーを変更します。
最初に書いた文字列をクリックします。
「ロゴ編集」のダイアログが表示されます。
私の設定を参考にして下さい
下の画像のように「MENU」の文字を編集し配置しました。
「MENU」画像が出来上がりました。
サイズは「幅(W)410/高さ(H)100」です。
サイズ「幅(W)410/高さ(H)100」では大きすぎて使用できません。
使用できるようにサイズを小さくします。
出来上がった「MENU」をペイントで呼び出します。
ペイントのメニューから→「ホーム」→「サイズ変更」とします。
表示された「サイズ変更と傾斜」のダイアログに「垂直方向(V)」20/水平方向(H)は自動的に82に・・・
・・なったら「OK」します。
サイズ「幅(W)410/高さ(H)100」が「幅(W)82/高さ(H)20」になった「MENU」のアイコンが出来上がりました。
ペイントのメニューから→ファイル→名前を付けて保存(A)→と進み
「ファイル名(N)」と「ファイルの種類(T)」PNGを指定して「保存」とします。
初めから「82×20」で作ると小さすぎて作れません。
作りやすくするために5倍としました。
まだこのままでは使えません。
テンプレートではMENUアイコンのスペースは「27×20」と決まっています。
作ったアイコンは「82×20」で一部分しか表示されません。
そこでCSSを書き変えます。
ドキュメントからホームページのファイル(テンプレート)が入ったフォルダを開きます。
CSSファイル「main_1R_2c」(カスケード スタイル シート)を開きサイズを変更します。
メニューから「編集E)]→「検索(F)]で
キーワード「btn_menu」で検索します。
ヒットした「ナビゲーションデザイン設定」に書いてある
「width: 27px;」を「width: 82px;」と書き変えます。
「width: 82px;」と書き変えたら「上書き保存」します。
出来上がったら作ったアイコン(画像)をサイトのフォルダーに移動します。
その後、アップロードするために転送します。
確認します。
▼質問やお問い合わせは、LINEでお願い致します。(無料)
・
編集中の「わからない」「困った」にはLINEにてお問い合わせください。(無料)
(
LINE無料相談は
、
9時~23時
ですがすぐに返信できないこともあります。)
ご自宅へ
出張訪問(関東地区・その他相談)によるサービス(お困りごとの解決)は有料となります。
(ホームページビルダーによるホームページ作成方法,編集方法を一から教授致します。・・・
有料
)
■有益なタイトルタグ・Descriptionダグを作成致します。5,000円
■会社やあなたの
昔のホームページを
最近流行の
レスポンシブデザイン
(パソコン・タブレット・スマートフォン対応)のホームページビルダー収録「
フルCSSテンプレート
」で
ホームページを作り変え致します。
(1~10ページ36,000~160,000円)
・ホームページビルダーを使うので
後にご自分で編集
できます。
(ホームページビルダーによるホームページ
編集方法を一から教授
致します。)
▼LINE登録は、QRコードをタップして下さい。
このページの先頭へ
ナビゲーション
最初から設定する
①クラシック版で直ぐ始める
②タイトル画像の加工と編集
②-2タイトル写真の編集
②-3タイトル用写真の変更
③TOPページ「index」を編集
③-2編集方法-タブを選択
③-3要素<title>の書換
③-4TOPICSに本文を書く
・TOPICSの増やし方く
・段落の増やし方く
・TOPICSに写真挿入方法
・TOPICSに表挿入方法
・NWESを削除する方法
・文字サイズを変更スル方法
CSSを書換えfontの属性を変更
オプションでfontの属性を変更
ページを増やす方法
ナビゲーションを編集
NAVIを全頁に反映させる
・NAVIの順序を変更スル
・NAVIの名称を変更スル
・不要NAVIの頁を削除
・NAVIボタンの色を変更
・NAVIのリンク色を変更
・NAVIの不要HTMLを削除
タップすると電話番号表示
④会社方針のページ編集
⑤サービス/製品一覧の頁編集
⑥新着情報・FAQの頁編集
⑦会社概要の頁編集
⑧採用情報の頁編集
⑨お問い合わせのページ編集
⑩プライバシーポリシーの頁編集
⑪特定商取引法ニ関スル記述編集
⑫アクセスaccess.html の編集
⑬バナーを編集
バナー編集/ウェブアートデザイナー
・グラデーションバナー作成
・画像背景透明化/ウェエブアートD
⑭ナビゲーションを全頁に反映
⑮ホームページヲアップロードする
⑯ホームページヲサーバに転送する
ホームページをダウンロ-ド
ヘッダー(header)を編集
フッター(footer)を編集
MENUアイコンを編集加工
ハンバーガーメニューにMENU表示-①
ハンバーガーメニューにMENU表示-②
グーグルマップの挿入方法
XMLサイトマップを作る
サイト内サイトマップを作る
タップすると電話番号表記
LINE-QRコードで友だち追加
ブログをナビボタンにリンクさせる
内部リンク元から内部リンク先
サイト転送の自動転送設定
ビルダーで基本のSEO設定
freedom思考的SEO対策
検索順位ノ検証(SEO効果ノ検証)
SEO対策をあれこれ考える前に!
・SEO対策をアレコレ考エル前に!②
・SEO対策をアレコレ考エル前に!③
・SEO対策をアレコレ考エル前に!④
キャッシュを知ろう・考えよう
検索に引っかからないホームページ
検索に引っかカラナイホームページ②
検索に引っかカラナイホームページ③
検索に引っかカラナイホームページ④
検索に引っかカラナイホームページ⑤
SP版-サイトフォルダの場所ヲ探す方法
SP版-背景色を変更する方法
SP版-文字のイロイロ変更方法
編集方法 / まとめ
いろいろな編集方法(質問から)
ホームページサンプル集
索引(タグ一覧)
編集に必要なソフト・参考書
バナー・タイトル用写真など販売
タイトル用写真販売
バナースペース
ビルダーのテンプレートが購入できます
freedomは
ホームページビルダー22で編集中