本文へスキップ

ハンバーガーメニューに「MENU」の文字を入れる方法【編集方法-1】/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集

ハンバーガーメニューに「MENU」の文字を入れる方法【編集方法-1】/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集

ハンバーガーメニューに「MENU」の文字を入れる方法【編集方法-1】/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集

ハンバーガーメニューに「MENU」の文字を入れる方法/ウェブアートデザイナー編集

  • ▼【編集方法-1】ハンバーガーメニューに「MENU」の文字を入れる方法
     ハンバーガーメニューに「MENU」の文字を入れる方法は、
     テンプレート「企業(テーマ)-クリーン[10012]-パープルのテンプレートのパーツを利用し説明を書きます。
    ・どのテンプレートも同じです。


    ・下のような三本線のアイコン(ハンバーガーメニュー)では、ホームページを訪問なさった方は何の印かわからない?
    ハンバーガーメニューに「MENU」の文字を入れる方法

    ・「MENU」の文字が書いて有れば・・・!!  これを加工します。
    ハンバーガーメニューに「MENU」の文字を入れる方法






    ■私が使っているのは編集ソフトは「ホームページビルダー22ビジネスプレミアム」です。
    ■編集し加工する下の画像は、ドキュメントにあるホームページのインターネットファイルが入っているフォルダに入っています。
    ■フォルダを開いて直接編集します。


    ・編集し加工する目的の下の画像(アイコン)は、ドキュメントにあるホームページのインターネットファイルが入っているフォルダに入っています。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ②ドキュメントにあるホームページのインターネットファイルが入っているフォルダを開きます。
    目的のハンバーメニューのアイコンを探して右クリックします。
    プロパティー(属性)の「詳細」からサイズを調べておきます。
    27ピクセル×20ピクセルとわかりました。

    ハンバーガーメニューに「MENU」の文字を入れる方法



    ③テンプレート収録のアイコン「logo_1La」を利用します。
     このアイコンにはピンクに見える紫の色が着いています。
     このピンク?はハンバーメニューの背景の色と同じと考え利用します。
    ハンバーガーメニューに「MENU」の文字を入れる方法


    ④ インターネットファイルの入ったフォルダの中にある「__HPB_Recycled」のフォルダをクリックして開きます。
    ハンバーガーメニューに「MENU」の文字を入れる方法
    「ウエブアートデザイナーのアイコンで「logo_1La」を選択し開きます。
     
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ⑤表示された編集バナーの文字の部分(株式会社野口装身具)をマウスで押えます。
     編集スペースから周りのグレーの部分に文字の部分をずらして隠します。
    ハンバーガーメニューに「MENU」の文字を入れる方法




    ⑥下の画像の様になればOKです。
    メニューから「ファイル(F)」→「画像に名前を付けてキャンバスを保存(V)」で画像を保存します。
    ここでは、画像が欲しいので「ファイルの種類(T)」で「JPEG」で保存して下さい。
    画像の名前はなんでもOK「hbg」とでもしとけばOKです。
    保存画面の上方「保存する場(I)」を見て保存される場所を覚えておいてください。
     
    ハンバーガーメニューに「MENU」の文字を入れる方法




    ⑦更に、メニューから
     「編集(E)」→「キャンバスの設定(S)」と進み→キャンパスのダイアログボックスに「幅(W)100ピクセル×高さ(H)20ピクセル」になるよう書き込み設定します。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ⑧少し小さめなキャンバスが表示されました。
     ここにハンバーメニューを編集作成します。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ⑨上の⑧のまま
     メニューから「編集(E)」→「ファイルから貼り付け(F)」を選択し
     ホームページビルダーのテンプレートに収録されていたハンバーガーメニューのアイコンを選択し呼び込みます。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ⑩アイコンを呼び込んだら左端にきっちり配置します。
     
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ⑪上の編集画面で⑥で保存した画像を呼び込みます。
    ハンバーガーメニューに「MENU」の文字を入れる方法


    ⑫メニューから「オブジェクト(O)」→「回転(R)」→「180度回転(1)」とします。
    すると、ピンクの葉が無くなりバナーが一回転しました。
    ハンバーガーメニューに「MENU」の文字を入れる方法


    ⑬回転した葉のバナーを左端に寄せます。
    すると
    少し前に左端に配置したハンバーガーメニューのアイコンが見えなくなってしまいました。
    この重なりを訂正します。
    ハンバーガーメニューに「MENU」の文字を入れる方法


    ⑭メニューから「オブジェクトの編集(O)」→「重なり(A)」→「最背面に移動(B)」とします。
       ・下の画像は使用中のパソコンの「ドキュメント」に保存となっています。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ⑮重なりの変更がうまくいったようッですね。

    ハンバーガーメニューに「MENU」の文字を入れる方法


    ⑯更にこれからこのまま「MENU」の文字を入れます。
    左にあるツールボックスの「A」をクリックします。
    ツールボックスがない場合はメニューから「表示(V)」→「操作ツールバー(P)」とします。

    「A」をクリックすると文字が入力できるようにスペースが出てきます。
    私は「MENU」と書き込みました。
    書き込む文字は「メニュー」でもOKです。
    ハンバーガーメニューに「MENU」の文字を入れる方法


    ⑰「MENU」の文字をWクリックすると挿入する文字に関する設定ができる「ダイアログボックス」は表示されます。
    下の画像は、今回の私の挿入したい文字「MENU」の設定をお見せしています。

    ハンバーガーメニューに「MENU」の文字を入れる方法



    ⑱設定がOKでしたら「保存」します。
    メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」とします。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ⑲一応「ウエブアートファイル」として保存します。
     メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」とします。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ⑲画像としてもう一回保存します。
     メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」とします。
     「JPEG」ファイルとして「保存」したらここで終了です。
    ・保存される場所を覚えておいてください。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ㉑編集し出来上がったハンバーガーメニューは、インターネットファイルが入っている場所(ドキュメントにあるフォルダ)に入れて下さい。
    保存した一回インターネットファイルをクリックして見ます。
    まだCSSのハンバーガーメニューの表示場所サイズを変更しないといけません。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ㉒CSSを書き変えます。
    CSSのファイルはどこにあるかわかりません。
    4つあるCSSファイルを開きメニューから「編集」→「検索」としキーワード「btn_menu」で検索し探します。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ㉓「heigt 20px」をクリックします。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ㉔CSSのスタイルの設定のダイアログボックスが表示されました。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ㉕ 幅(W)「27」を幅(W)を「100」に書き変えサイズを長くなるよう変更します。
    「OK」を選択します。
    ハンバーガーメニューに「MENU」の文字を入れる方法



    ㉖後は「ファイル(F)」→「上書き保存」で戻ってください。
    ハンバーガーメニューに「MENU」の文字を入れる方法















  • ▼質問やお問い合わせは、LINEでお願い致します。(無料)
    ▼LINE登録は、QRコードをタップして下さい。
    フリーダム/QRコード
    フリーダム/QRコード

ナビゲーション

バナースペース