musexpress3_18

Adobe Muse CCを使ったホームページ制作

Dynamic Menuの設置(MusexPress3)

『Adobe Muse』と『MusexPress3』を組み合わせることで
コーディング作業なしにWordPressサイトの制作が可能。

「Dynamic Menu」を利用する事でアニメーション効果を持たせた
2種類のメニューの設置が可能になります。

◎WordPressで「dynamic-menu」をインストール。

・外観/メニューより新規メニューを作成。

◎Adobe Museで「MusexPress – Dynamic Menu 3」Widgetを読込。

〔Animated Menuの場合〕

◎Adobe Museで該当ページへ「MusexPress – Dynamic Menu 3/Animated Menu」Widgetを配置。

・WordPressで設定した「メニュー名」と同じものを配置したWidget内の項目(Menu title)に設定。
その他、アニメーションのエフェクト、カラーなども設定。

設定完了後、〔ファイル〕メニューの〔FTPアップロード〕からファイルをアップ。
注)ルートパスを選択する項目では最後に「/mxp_theme」とする。
注)アップロードをスタートさせるとFTP検証アラートが表示されるが「無視」を選択してアップを継続する。

◎WordPressでページを変換する。

アップロードが完了したら、WordPressに作業を移して、
「MusexPress/Pages Converter」よりページを選択して変換します。
赤色で表示されているページは変換されておらず、変換されると緑色の表記になります。

▽サンプルサイト
live-preview

〔Vertical Menuの場合〕

◎Adobe Museで該当ページへ「MusexPress – Dynamic Menu 3/Animated Menu」Widgetを配置。

・WordPressで設定した「メニュー名」と同じものを配置したWidget内の項目(Menu title)に設定。
その他、アニメーションのエフェクト、カラーなども設定。

※同サービスから提供されている「Absolute Muse Menu」と連携させることで表示させることが出来るようになります。
「Absolute Muse Menu」についての詳細はコチラ(外部サイト)

設定完了後、〔ファイル〕メニューの〔FTPアップロード〕からファイルをアップ。
注)ルートパスを選択する項目では最後に「/mxp_theme」とする。
注)アップロードをスタートさせるとFTP検証アラートが表示されるが「無視」を選択してアップを継続する。

◎WordPressでページを変換する。

アップロードが完了したら、WordPressに作業を移して、
「MusexPress/Pages Converter」よりページを選択して変換します。
赤色で表示されているページは変換されておらず、変換されると緑色の表記になります。

▽サンプルサイト
live-preview

「MusexPress」についての詳細はコチラ(外部サイト)

musexpress3_15Search Boxの設定(MusexPress3)前のページ

サンプルブログ001の制作(MusexPress3.x)次のページkishioka-design_sample001_01

関連記事

  1. animate-svg03

    Adobe Muse CCを使ったホームページ制作

    SVGアニメーション(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  2. shake

    Adobe Muse CCを使ったホームページ制作

    マウスオーバーで10種類の揺れを(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  3. hero-connect03
  4. sidebar-connect02

    Adobe Muse CCを使ったホームページ制作

    強力サイドバーナビゲーションシステム(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  5. full-width-video01

    Adobe Muse CCを使ったホームページ制作

    レスポンシブ対応フルワイドビデオ(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  6. superhero-slider04

    Adobe Muse CCを使ったホームページ制作

    最大20枚設置可能のフルスクリーンスライドショー(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  1. svgdraw2018

    Adobe Muse CCを使ったホームページ制作

    SVGドローアニメーション(Adobe Muse CC)
  2. particles02

    Adobe Muse CCを使ったホームページ制作

    パーティクル効果で演出(Adobe Muse CC)
  3. filmora-pho011-01

    Filmora

    トランジション「ベーシック編3」(Filmora)
  4. minimal-titles-img

    After Effects

    Filmstocksが提供しているAfter Effectsのエフェクト「Min…
  5. eyecatch-200503

    After Effects

    テキストを調整レイヤー化して、アルファチャンネルを利用した表現を試す(After…
PAGE TOP