Adobe Museでテキストへのリンクスタイルを設定する方法

今回はAdobe Museでのテキストへのリンクスタイルの設定方法です。リンクスタイルはCSSでいうところの :hover や :visitedなどの擬似属性にあたります。Adobe Museのリンクスタイルはテキストのみに設定できるので、実質は pタグ内のaタグに対してということになります（それ以外の、例えば画像に対して :hoverなどを設定するにはAdobe Museでは「ステート」という機能を使用しますが、この投稿では説明しません）。

なお、今回も前回に引き続き、デザインは「HTML&CSSとWebデザインが一冊できちんと身につく本」の中でサンプルとして配布されているものを元にして、私がAdobe Museで作ったもので、背景に使用した画像はフリー写真素材サイト「Pixabay」からダウンロードしたNYの遊園地「コニーアイランド」。文章はコニーアイランドのウィキペディアからの引用となっています。

テキストへのリンクスタイルを設定するには

リンクスタイルの設定は「サイトプロパティ」で行います。「サイトプロパティ」を開くには、2通りの方法があります。

一つは画面上部のメニュー内「ファイル」内にある「サイトプロパティ」から。

もう一つはテキストフレームを選択した状態で画面上部のコントロールパネル内にある青文字の「ハイパーリンク」をクリックし、表示されたパネルにある「リンクスタイルを編集」からです。

サイトプロパティでの設定

それでは実際に設定していきます。

1. サイトプロパティを開くとパネル上に「レイアウト」「コンテンツ」「詳細」の3つのボタンがあるので、「コンテンツ」を選択します。

2. 左側の四角の右下にある書類のアイコンをクリックして、新規リンクスタイルを作成します。

ここでは「linkstyle_01」という名前でリンクスタイルを作成しました。

3. リンクスタイルを作成すると左側の枠の中に名前が表示されるので、それをクリックし、枠の右側にあるチェックボックスでリンクを設定された文字の各状態を設定していきます。




一見複雑に見えますが、仕組みをわかってしまえば簡単です。幾つか設定の異なるリンクスタイルを作り、どのように動作するか試してみてください。

テキストにリンクを設定

テキストにリンクスタイルを適応させるには、その前にテキストにリンクを設定しなければなりません。

テキストにリンクを設定するには、設定したいテキストの範囲をドラッグにて指定た状態で、画面上部のコントロールパネル内青文字の「ハイパーリンク：」の横にあるプルダウンメニューにて行います。

以下の画面では、テキスト「Read More >>」にヌルリンク（#で指定する仮のリンク）を設定しています。

テキストリンクにリンクスタイルを設定

テキストリンクにリンクスタイルを設定するにも二通りの方法があります。

一つは画面上部のコントロールパネル内青文字の「ハイパーリンク：」をクリック。表示されたパネル内の「テキストのリンクスタイル」の横にあるプルダウンメニューから。



もう一つはテキストパネル内の下から2つめにあるプルダウンメニューからです。



リンクを設定したテキストをドラッグにて選択した状態で、上記の方法でリンクスタイルを設定してください。

以上です。