Muse (2015) 基本講座

ハイパーリンクの適用

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイト内のハイパーリンクを利用して各ページをつなぐ方法や、同一のページ内にアンカーを設置してリンクさせる方法を解説します。
講師:
08:06

字幕

このレッスンではハイパーリンクの設定について解説します。それでは、このレッスンのファイルを開いてそして Home のページを見ます。この中にある Recent Work であるとかMeet The Teamそして Contact Us Today! ですね。こういった項目ですが、これらはサイト内の他のページAbout Us であるとかPortfolio、Contact Usこれらに跳ぶためのリンクとなります。なので、その設定を行いましょう。それではまず一番上Recent Work から行きましょう。ハイパーリンクを設定する時なんですがこの対象となるオブジェクトを選択してそして画面上部の、このハイパーリンクという所から行います。外部のサイトなんかに行く時にはここに URL を入力するんですがご覧いただくと同じサイト内、Muse のサイト内の他のページはこのリスト上に一覧で出てきます。なのでここから選択するだけで手軽にリンクを作ることができます。それでは Recent Work は「Portfolio」ここにリンクさせます。そして Meet The Team は「About US」そして Contact Us Today! は「Contact Us」とここに設定します。 では更にこれに加えて対象を選んでいるとこの「ハイパーリンク」というオプションが有効になるのでこれをクリックします。ここに「ツールヒント」というものがあります。「ツールヒント」というのはマウスを近づけた時にテキストを表示できるそんな機能になります。ではここにclick to see とclick to see という言葉が表示されるようにします。でですね、これ繰り返し使うのでコピーしておきましょう。全体を選んでMac の方は CommandWindows の方は Ctrl を押しながらC を押してコピーします。これでコピーできたのでじゃ Meet The team のオプションにもここで Command もしくは Ctrl+V を押します。これで貼り付けられました。Contact Us Today! も同じくこの様に貼り付けが行えました。そしたらプレビューで確認してみましょう。そうすると、ここにマウスを持って来るとこの様にツールチップが出てますね。ではリンクが有効になっているか実際にブラウザーで確認してみようと思います。「ファイル」メニューのこのプレビューの所なんですが「ブラウザーでページをプレビュー」だとこの一個のページだけになってしまうので今回他のリンクしているページも確認するので「ブラウザーでサイトをプレビュー」こっちを実行します。 そうすると書き出しが行われてブラウザーが起動してこんな感じに表示されます。では Recent Workまずマウスをあてるとツールヒントが出ますね。ではクリックするとPortfolio のページに来ました。では戻ってMeet The Team をクリックするとAbout Us ですね。そして Contact Us Today!ここもクリックするとContact のページに来ました。ちゃんと機能していますね。この様にしてサイト内には簡単にリンクを張ることが可能です。では、改めて About Us のページに行きましょう。About Us のページこの様にずらっと説明文があるのですけど最後の部分にちょっともう1つ加えようと思います。それが、この 04_06.rtf の中にあるそれぞれのメンバー、もっと知りたければ名前の所クリックしてね、という一文ですね。これをコピーして文章の一番最後に付け加えます。そしてこのAndy Maria Tina Jay とそれぞれの名前をクリックするとそれぞれの人の所に跳ぶというそんな設定を作ろうと思います。但しこれ、同じページの中なのでここに今跳べる項目がないですね。 同じページの中でリンクを張りたい時にはアンカーというものをリンク先になる目印ですね、それを設置します。では「オブジェクト」のメニューから「リンクアンカーを挿入」というのを選ぶとマウスのポインタがこんな碇のマークになります。そしたら、これ最終的に見えないので例えばこの写真の左上とかですね。ここをクリックして設置します。そしたらここは Andy とそれぞれの対応する名前を入れておきましょう。これをそれぞれ、みんな一人一人同じように行います。リンクアンカーを挿入して名前を入力します。そして、こっちもですね同じように名前を入力していきます。こうやってまずはアンカーを設置します。そしてリンクを貼りたい部分のテキストを選んでこれで「ハイパーリンク」の部分これを開けてやるとこの「Abous US」このページの更に下の階層にこのアンカーのマークがついて今設定したアンカーが全部表示されています。じゃあこんな感じでそれぞれの名前に対応する所を選んでやります。そしたら、これを「ページをプレビュー」で確認してみましょう。こんな感じに追加されました。それぞれの名前の所、クリックするとこの様に対応する所が一番上に来るように動作します。 この様に例えば同一のページ内でもこの様に跳べるようなアンカーを設置しておくと見る人が非常にアクセスしやすくなります。そういった所の配慮も含めて、是非ともこうしたサイト内でのハイパーリンクそれをうまく使いこなして下さい。

Muse (2015) 基本講座

WebデザインソフトMuseを使うと、HTMLのコードを使わずにデザイン性に溢れるWebページを簡単に作ることが可能です。このコースではマスターページの作成やコンテンツの追加、テキストの追加や色の設定、ウィジェットや拡張機能の活用、レスポンシブなレイアウトの設定やデータをアップロードしてウェブ上に公開する手順などMuseの操作をひと通り学ぶことができます。

4時間01分 (39 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2016年07月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。