Liruu Blog

AdobeMuse!クールなスライドショーを作る！Vol.07

2017.12.19

初心者でも、コードを一切書かずにレスポンシブなWEBサイトを作ることができる「Adobe Muse（ミューズ）」！
ドラッグ＆ドロップでページを構成するのと、あらかじめウィジットが用意されているので、楽にWEBサイトが作れます！
そのAdobe Museの使い方をご紹介します！

Adobe「Muse（ミューズ）」のTOPページに設置したスライドショーを、クールな感じにしてみます！

+‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥
Adobe Muse関連の記事一覧
‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥+
→ 初心者でもコーディング不要でWEBサイトを作る！Vol.01
→ 英語を日本語化にする！Vol.02
→ 新規サイトを作成する！Vol.03
→ マスターページでheaderする！Vol.04
→ マスターページでfooterする！Vol.05
→ TOPページにスライドショー！Vol.06
→ クールなスライドショーを作る！Vol.07

画像を差し替える

今はサンプル画像が入っていいるので、差し替えましょう。

今回は「制作実績」「実績1」「実績2」の3枚をスライドさせ、それぞれのページに飛ばします。

museスライダー画像変更

スライダー画像をダブルクリックで選択すると、青の矢印マークが出てくるのでクリックします。
「画像を追加」のフォルダアイコンをクリックし、ダイアログから画像を選択して「開く」をクリックすると、スライダーに画像が反映されます。

museサムネール変更

同時にサムネール画像も変わっていることがわかります。

リンクを挿入

クリックしたら、「制作実績」「実績1」「実績2」ページに飛ぶようにします。
任意の画像をクリックしたら、画面上2段目の「ハイパーリンク」のプルダウンメニューから、該当ページを選択します。

museリンク設置

プレビューモードで、確認しましょう。設定した通りにページ遷移ができました。他の画像も設定しておきます。

各パーツをデザインする

「前へ・次へボタン」を変更します。

muse各パーツ変更

デフォルトで背景白が敷いてあるので、「塗り」を「なし」にします。
ボタンを押しやすくするためにも、もっと大きいほうが良いですね。
「テキスト」から「フォントサイズ」を適当に大きくしましょう。とりあえず36に変更しました。
次に、「T」マークをクリックして、更に太字に変更します。
文字色も変更できますので、画像と被らないような色に変更しておきましょう。

次に、キャプションです。ここには任意のタイトル名を入力します。

museキャプション変更

キャプションをクリックすると、カーソルがテキスト入力に変わるので、任意のタイトル名を入れます。
選択ツールで場所を変更したり、「テキスト」から「フォントスタイル」などを指定し体裁を整えましょう。

ここでまた注意です！
キャプションの一枚目を変更した場合、デザインが同期されているために2枚目と3枚目にも変更が適用されます。
全キャプションが同じ体裁ならいいのですが、ごとに変えたい場合もあります。

その場合は、キャプションを選択して青矢印マークをクリックします。一番下の「編集をすべてに適用」のチェックを外しましょう。そうすれば、ごとに変更できるようになります！

う～～んっなんか・・・・・
ナビゲーションの背景が邪魔だなぁ。ちょっと変えてみましょう。

ナビゲーションの動的部分をカスタマイズ

マスターページを表示して、ナビゲーションを選択します。
背景色をなくしたいので、「塗り」を「なし」にします。
ホームに戻りましょう。

あ゛あ゛っ

ナビゲーションの背景はナシになったけど、「ホーム」の背景だけグレーがついています。

どういうことかというと、「アクティブ」だからです。

プランモードで各ページを見ればわかりますが、該当ページのメニュー名の背景色が違うのがわかりますね。
「アクティブ」とは、ユーザーの操作によってクリック（アクティブ）になったかどうかでスタイルを適用できます。

それでは、これを変更していきましょう。
メニューを選択して画面上2段目の「メニュー項目」を開きます。
この中に「アクティブ」があるので選択してください。
すると、現在の仕様が右側に入るので、色を変えたりテキストを変更してみましょう。
今回はわかりやすくするために、テキストをグリーンに変更しました。

museアクティブを変更

デザインモードで確認すると、スタイルが適用されたのがわかります。
他の「ロールオーバー」なども変更して、ナビゲーションの動的部分を自分好みにデザインしてみてください。