本文へスキップ
ハンバーガーメニューに「MENU」の文字を入れる方法【編集方法-1】/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集
ハンバーガーメニューに「MENU」の文字を入れる方法【編集方法-1】/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集
ハンバーガーメニューに「MENU」の文字を入れる方法【編集方法-1】/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集
ハンバーガーメニューに「MENU」の文字を入れる方法/ウェブアートデザイナー編集
▼【編集方法-1】ハンバーガーメニューに「MENU」の文字を入れる方法
ハンバーガーメニューに「MENU」の文字を入れる方法は、
テンプレート「企業(テーマ)-クリーン[10012]-パープルのテンプレートのパーツを利用し説明を書きます。
・どのテンプレートも同じです。
・下のような
三本線のアイコン
(
ハンバーガーメニュー
)では、ホームページを訪問なさった方は何の印かわからない?
・「MENU」の文字が書いて有れば・・・!! これを加工します。
■私が使っているのは編集ソフトは「ホームページビルダー22ビジネスプレミアム」です。
■編集し加工する下の画像は、ドキュメントにあるホームページのインターネットファイルが入っているフォルダに入っています。
■フォルダを開いて直接編集します。
・編集し加工する目的の下の画像(アイコン)は、ドキュメントにあるホームページのインターネットファイルが入っているフォルダに入っています。
②ドキュメントにあるホームページのインターネットファイルが入っているフォルダを開きます。
目的のハンバーメニューのアイコンを探して右クリックします。
プロパティー(属性)の「詳細」からサイズを調べておきます。
27ピクセル×20ピクセルとわかりました。
③テンプレート収録のアイコン「logo_1La」を利用します。
このアイコンにはピンクに見える紫の色が着いています。
このピンク?はハンバーメニューの背景の色と同じと考え利用します。
④ インターネットファイルの入ったフォルダの中にある「__HPB_Recycled」のフォルダをクリックして開きます。
「ウエブアートデザイナーのアイコンで「logo_1La」を選択し開きます。
⑤表示された編集バナーの文字の部分(株式会社野口装身具)をマウスで押えます。
編集スペースから周りのグレーの部分に文字の部分をずらして隠します。
⑥下の画像の様になればOKです。
メニューから「ファイル(F)」→「画像に名前を付けてキャンバスを保存(V)」で画像を保存します。
ここでは、画像が欲しいので「ファイルの種類(T)」で「JPEG」で保存して下さい。
画像の名前はなんでもOK「hbg」とでもしとけばOKです。
保存画面の上方「保存する場(I)」を見て保存される場所を覚えておいてください。
⑦更に、メニューから
「編集(E)」→「キャンバスの設定(S)」と進み→キャンパスのダイアログボックスに「幅(W)100ピクセル×高さ(H)20ピクセル」になるよう書き込み設定します。
⑧少し小さめなキャンバスが表示されました。
ここにハンバーメニューを編集作成します。
⑨上の⑧のまま
メニューから「編集(E)」→「ファイルから貼り付け(F)」を選択し
ホームページビルダーのテンプレートに収録されていたハンバーガーメニューのアイコンを選択し呼び込みます。
⑩アイコンを呼び込んだら左端にきっちり配置します。
⑪上の編集画面で⑥で保存した画像を呼び込みます。
⑫メニューから「オブジェクト(O)」→「回転(R)」→「180度回転(1)」とします。
すると、ピンクの葉が無くなりバナーが一回転しました。
⑬回転した葉のバナーを左端に寄せます。
すると
少し前に左端に配置したハンバーガーメニューのアイコンが見えなくなってしまいました。
この重なりを訂正します。
⑭メニューから「オブジェクトの編集(O)」→「重なり(A)」→「最背面に移動(B)」とします。
・下の画像は使用中のパソコンの「ドキュメント」に保存となっています。
⑮重なりの変更がうまくいったようッですね。
⑯更にこれからこのまま「MENU」の文字を入れます。
左にあるツールボックスの「A」をクリックします。
ツールボックスがない場合はメニューから「表示(V)」→「操作ツールバー(P)」とします。
「A」をクリックすると文字が入力できるようにスペースが出てきます。
私は「MENU」と書き込みました。
書き込む文字は「メニュー」でもOKです。
⑰「MENU」の文字をWクリックすると挿入する文字に関する設定ができる「ダイアログボックス」は表示されます。
下の画像は、今回の私の挿入したい文字「MENU」の設定をお見せしています。
⑱設定がOKでしたら「保存」します。
メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」とします。
⑲一応「ウエブアートファイル」として保存します。
メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」とします。
⑲画像としてもう一回保存します。
メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」とします。
「JPEG」ファイルとして「保存」したら
ここで終了です。
・保存される場所を覚えておいてください。
㉑編集し出来上がったハンバーガーメニューは、インターネットファイルが入っている場所(ドキュメントにあるフォルダ)に入れて下さい。
保存した一回インターネットファイルをクリックして見ます。
まだCSSのハンバーガーメニューの表示場所サイズを変更しないといけません。
㉒CSSを書き変えます。
CSSのファイルはどこにあるかわかりません。
4つあるCSSファイルを開きメニューから「編集」→「検索」としキーワード「btn_menu」で検索し探します。
㉓「heigt 20px」をクリックします。
㉔CSSのスタイルの設定のダイアログボックスが表示されました。
㉕ 幅(W)「27」を幅(W)を「100」に書き変えサイズを長くなるよう変更します。
「OK」を選択します。
㉖後は「ファイル(F)」→「上書き保存」で戻ってください。
▼質問やお問い合わせは、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で編集中