Adobe Add-ons「Header Page」試用レポート
Adobe Add-onsで21日に公開された「Header Page」を試してみましたので、簡単なレポートを掲載しておきます。このアドオンを使用すると、ページのヘッダー領域に他のページを表示できますので、Museで更新することなく、ヘッダーのビジュアルを変更することができます。また、レスポンシブデザインのヘッダーとして表現することも可能です。
限定的な使い方になりますが、一つの表現方法として参考にしてください。
更新日:2014年7月22日
Adobe IDでログインした状態で、「無料」ボタンをクリックすると、ダウンロードが始まります。
※Creative Cloud アプリケーションでファイルの同期がオンになっていることを確認しておきます。
ダウンロードしたファイルを解凍すると「Header-Page_QooQee_Widgets.mulib」というMuseライブラリファイルになりますので、ダブルクリックしてMuseに追加します。 起動後、ライブラリパネルに追加されていることを確認します。
ライブラリパネルに追加された「QooQee_Widgets」を開くと「Header-page」が表示されていますので、ページ画面にドラッグします。あとは、オプションメニューで設定するだけです。 簡単なサンプルを作成しましたので、ウェブブラウザーで確認してみてください。
参考:サンプルページ
ブラウザーのウィンドウを狭めたり、広げると、ページの構成要素が伸縮します。
これは、Muse側でレスポンシブデザインに対応しているわけではなく、iframe要素で「レスポンシブデザインのページを表示している」だけです。
このサンプルでは、ウェブページ全体を表示させていますが、ヘッダーのためのアドインですから、本来であればヘッダーだけのページを表示させます。
スマートフォンとタブレットでは、不必要な機能ですが、デスクトップのページ設定によっては、おかしな表示になりますので確認が必要です。
サンプルは、(レスポンシブデザインの適応度をウィンドウの伸縮で確認しやすいように)デスクトップのページ幅に「320」という極端な数値を設定しています。
この設定のままデスクトップ用のページをスマートフォンやタブレットで表示すると、崩れてしまいますので、それぞれページを設定する必要があります。サンプルでは、スマートフォンとタブレットにそれぞれ、ページを設定しています(画像を配置しているだけです)。
オプションの設定:
「Header-page」のオプションの「Page URL」に表示させたいヘッダーページのURLを入力します。「Location of the header page」は「Hosted elsewhere」を選択、その他はデフォルトのままです。
最上部にナビゲーションバーがある場合は、バーの高さ分の数値を「Start the header page sfter (Pixels)」に入力しておきます。表示されるヘッダー全体が、ナビゲーションバーの高さ分、下方向に移動します。
冒頭で書いたとおり、ヘッダーのビジュアルを一日数回、変化させるなど、動的な表現も可能ですが、特殊な使い方になりますので、試しながら検討してください。