Adobe Muse でテキストを使用する方法を学びます。テキストパネルを使用して、テキストの外観の変更、パディングの追加、インデント値の設定、およびその他の操作を行います。

注意:

Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報と支援については、Adobe Muse のサービス終了ページを参照してください。

Web サイトをデザインしている間、次の方法で Adobe Muse を使用して、テキストを追加できます。

  • テキストボックスを追加し、そのテキストボックス内にコンテンツを入力します。
  • テキストファイルにテキストを保存し、このファイルを Adobe Muse ページに読み込みます。
  • InDesign などのアプリケーションを使用して、テキストをレイアウトします。事前にフォーマットされたこのテキストをクリップボードにコピーし、Adobe Muse に貼り付けます。

レスポンシブレイアウトでは、ユーザーが Web サイトを表示するデバイスに応じてテキストをフォーマットすることもできます。例えば、スマートフォンのテキストを大きくして、デスクトップバージョンに比べより多くのパディングを設定できます。さらに、Adobe Muse でのレスポンシブ Web デザインでは、各ブレークポイントのテキストをフォーマットすることもできます。各ブレークポイントのテキストに対して、スタイル、カラー、行送り、パディングおよびサイズを変更できます。1 つのファイルでさまざまなデバイス向けの Web サイトを作成する際のテキストのフォーマットについて詳しくは、「レスポンシブレイアウトでのテキストのフォーマット」を参照してください。

テキストフレームの作成とスタイル設定

メニューを入力するには、外部のテキストファイルからメニューテキストをコピーして、テキストフレームにコンテンツをペーストします。段落スタイルを作成し、適用することで、テキストのスタイルも設定します。次の手順に従います。

  1. デザインビューでページを編集しているときに、テキストツールを使用して、テキストフレームを作成します。別のファイルソースからテキストをコピーする場合は、テキストをコピーし、Adobe Muse 内部でテキストツールを使用して、テキストフレームの内部をクリックします。テキストフレームに、コピーしたテキストコンテンツをペーストします。

  2. テキストツールを使用して、任意のテキスト行を選択します。

  3. テキストパネルで、以下のいずれかの設定を使用して、テキストの書式設定をします。

    • フォント:Droid Serif Bold(または好みの serif フォント)
    • フォントサイズ:14 フォント
    • スタイル:太字フォント
    • カラー:#A6342A(赤色)
    • 整列:左揃え
    • 行送り:120%
  4. テキストのフォーマットでは、さらに次の追加テキストフォーマットオプションを使用できます。

    • 上付き文字
    • 下付き文字
    • 大文字
    • 小文字
  5. テキストを選択しながら、段落スタイル(ウィンドウ/段落スタイル)パネルの下部にある「新規スタイル」ボタンをクリックします。新規段落スタイルをダブルクリックして、名前を「food-header」に変更します。

    これで、同じフォーマットをメニュー内の他のテキストヘッダーに再適用するのが簡単になります。

  6. テキストツールを使用して、次の朝食アイテム「Croissants $3」を選択します。

  7. 「food-header」という名前の段落スタイルをクリックして、2 番目の朝食アイテムに同じフォーマットを適用します。

  8. 手順 7 と 8 を繰り返して、food-header 段落スタイルを選択して、テキストフレーム内の各朝食アイテム($ 記号を含むすべての行)に適用します。

  9. テキストツールを使用して、上から順番に最初の朝食アイテムの説明(Bananas、mandarin oranges、red delicious apples、mixed berry cup)を選択します。

  10. 段落スタイルパネルにリストされた本文の段落スタイルをクリックして、テキストの行にフォーマットを適用します。

  11. 朝食アイテムの下にある残りの各説明テキストを 1 つずつ選択して、本文の段落スタイルを適用します。

fig_66_building
フォーマットを適用して、段落スタイルでメニューのスタイルを設定します。

 サンプルサイトのライブバージョンにアクセスして、参考としてデザインを使用すると便利です。

テキストの使用について詳しくは、「Adobe Muse でのテキスト編集」を参照してください。

ビルトインスペルチェックの使用

Adobe Muse では、テキストフレーム内でのタイプミスを非常に簡単に探して解決するスペルチェックを用意しています。スペルチェックは常に有効になっています。スペルチェックは辞書に記載されていない単語に赤色の下線を表示します。

fig_67_building
スペルミスと思われる単語には、赤色の下線が表示されます。

fig_68_building

修正候補の単語のいずれかが正しい場合は、下方向の矢印ボタンを押すか、マウスを使用して、使用したい修正候補の単語を選択してから、Return/Enter キーを押して修正を適用します。誤って正しくない単語を選択した場合は、単に変更を取り消してから(編集/取り消し)、別の修正候補の単語を選択するか、テキストツールを使用してその単語を編集します。

入力ミスのフラグが付いた単語が一度だけ使用され(人物の名前または場所など)、スペルが正しいとわかっている場合は、修正する必要はありません。サイトのプレビュー、パブリッシュまたは書き出しを行う場合、デザインビューで表示される赤色の下線は表示されません。

会社の名前や住所などのよく使用する単語の場合、スペルチェックの辞書にその単語を追加すると、タイポとしてマークされません。

テキストツールを使用して、辞書に追加する単語を右クリックしてから、表示されるコンテキストメニューから「辞書に追加」オプションを選択します。

サイト全体および個別のテキストフレームに対して、使用する言語を設定できます(この際、スペルチェック辞書の言語が設定されます)。

サイト全体に対してスペルチェック辞書を設定するには、ファイル/サイトプロパティを選択します。「テキスト」タブをクリックして、言語メニューで使用する言語を選択してから、「OK」をクリックします。

fig_69_building
サイトプロパティダイアログボックスで、サイト全体に使用する言語を設定します。

時折、サイトプロジェクトで複数の言語でテキストを提供する必要があります。この場合、サイトプロパティでデフォルトの(最も頻繁に使用する)言語を設定してから、別の言語でテキストを表示する特定のテキストフレームに対してスペルチェック言語を設定できます。

テキストフレームに対してスペルチェック辞書を設定するには、選択ツールでテキストフレームを選択します。右クリックして、表示されるコンテキストメニューから言語/(使用する言語を選択)を選択します。

fig_70_building
コンテキストメニューで、選択されたテキストフレームの言語を設定します。

次に、テキストフレームの外観を更新します。長方形や画像フレームと同様に、テキストフレームの線、塗り、背景画像を設定してスタイルを適用できます。

テキストフレームの外観の更新

このセクションでは、テキストフレームの属性を更新して、ページの背景グラフィックから目立つようにします。

  1. 選択ツールを使用して、朝食メニューを含むテキストフレームを選択します。

  2. コントロールパネルで、線幅を 5 に設定して、線のカラーを黒色に設定します。

  3. 塗りメニューを使用して、塗りのカラーを「cream-menu」と名前を変更したスウォッチに設定します(または 16 進法のカラー値 #E9916F を入力します)。「画像」セクションの横にあるフォルダーアイコンをクリックして、サンプルファイルフォルダー内にある bg-texture.png という名前のファイルを参照して選択します。「OK」をクリックして、読み込みダイアログボックスを閉じます。サイズ調整メニューを「並べて表示」に設定してから、ページ上の他の場所をクリックし、塗りメニューを閉じます。

  4. 必要に応じて、選択ツールを使用して、テキストのサイズが合うまで、テキストフレームのハンドルをドラッグしてサイズを変更します。ライブサンプルサイトの朝食メニューの寸法は、約 800 ピクセル(幅)x 440 ピクセル(高)です。

    塗りのカラーがクリーム色のタイル張りの背景画像によってパーチメントのような効果が追加され、暗い線によって背景から際立って表示されます。

    ここで、朝食メニューの上部にタイトルを追加し、訪問者が識別できるようにします。

  5. テキストツールを使用して、朝食メニューの真上にテキストフレームを作成して、左上側に整列します。

  6. 「Breakfast」と文字を入力します。

  7. テキストパネルで、以下の設定を選択してテキストをフォーマットします。

    • Web フォント:Kaushan Script(または希望する任意のスクリプトフォント)
    • フォントサイズ:32カラー:#70909D(パート 3 で、このカラーの名前を「blue-menu」に変更しました)
    • 行送り:120%
    • 整列:中央揃え
  8. テキストを選択しながら、段落スタイルパネルの下部にある新規スタイルボタンをクリックして、新規段落スタイルを作成します。新規段落スタイルをダブルクリックして、名前を「menu-label」に変更します。

朝食メニューの上にあるラベルは、ユーザーに指示を与え、どのメニューを読んでいるか視覚的に明らかにします。これらの変更を加えると、以下の画像に類似した朝食メニューが完成します。

fig_71_building
朝食メニューにはスタイルが設定され、テキストコンテンツがフォーマットされます。

次のセクションでは、朝食メニューを複製してから、複製されたテキストフレーム内でテキストコンテンツを更新して、昼食、夕食、デザートのメニューを作成します。

テキストフレームの複製

前のセクションでは、朝食メニューのテキストフレームを作成し、外部テキストファイルからのテキストを挿入し、段落スタイルを使用して一貫したテキストフォーマットを適用してから、タイル張りの背景画像、塗りのカラー、線を追加することによって、テキストフレームの外観を更新しました。メニューのテキストフレームの上に、2 番目のテキストフレームを追加して、朝食メニューであることを示すヘッダーも作成できます。次の手順では、この要素のセットを3 回複製して、合計 4 つのメニューを作成します。

  1. 選択ツールを使用して、「Breakfast」という文字を含むテキストフレーム、および朝食メニューを含むテキストフレームを選択します。

  2. Option キー(Mac)または Alt キー(Windows)を押しながら、2 つのテキストフレームをページの下方向にドラッグして、複製コピーを作成します。コピーを下方向にドラッグして、元のテキストフレームと垂直方向に整列させます(スマートガイドによって、側面と中央が整列されたタイミングがわかります)。複製されたテキストフレームのセットは、元のセットの約 430 ピクセル下に表示されます。

    fig_72_building
    朝食メニューの複製をページの下方向にドラッグします。

  3. テキストツールを使用して、複製したテキストフィールドのラベルを選択します。「Breakfast」という文字を「Lunch」で置き換えます。

  4. 一時的に Adobe Muse からデスクトップに切り替えます。サンプルファイルフォルダーを開いて、「text-food-lunch.txt」という名前のファイルを探します。ファイルをダブルクリックして、テキストエディターで開きます。最初のテキスト行「The JR $9」をコピーします。.

  5. Adobe Muse に戻ります。テキストツールを使用して、昼食メニューのテキストフレームの内部をクリックします。テキストフレームにコピーしたテキストコンテンツをペーストして、リストされている最初の food 項目「Croissants $3」を置き換えます。.

  6. 手順 4 と 5 を繰り返して、text-food-lunch.txt ファイルから $ 記号の付いた各行をコピーして、昼食メニューの項目を置き換えます。

  7. text-food-lunch.txt ファイル内にある各説明をコピーして、複製した昼食メニュー内で既存の説明の上に 1 つずつこれらの説明をペーストすることで、昼食メニューの挿入を続けます。この方策により、テキストコンテンツに適用されたスタイルが確実に維持されます。

  8. 手順 1~7 を繰り返して、2 つの昼食テキストフレームを選択し、それらを複製し、既存の昼食メニューの約 430 ピクセル下にドラッグし、ラベルを「Dinner」に変更してから、text-food-dinner.txt 内で項目をコピーして夕食メニューを挿入します。

  9. 手順 8 をもう一度繰り返します。ここで、複製されたラベルの名前を「Dessert」に変更します。text-food-dessert.txt からテキスト行をコピーして、デザートメニューを完成します。

  10. 選択ツールを使用して、必要に応じて 4 つの各テキストフレームを再配置して、各領域の間隔が約 120 ピクセルになるようにこれらのテキストフレームを垂直方向に整列します。

    fig_73_building
    food ページで、4 つのすべてのメニュー(朝食、昼食、夕食、デザート)を垂直方向に整列します。

複製された各コピーを下方向にドラッグすると、パート 1 で定義したフッター領域が自動的に下に移動するので、ページ上で垂直方向の空間が追加されます。この結果、このサンプルサイト内の他のページに比べて、food ページの高さが長くなります。

訪問者が各メニューにすばやくジャンプできるナビゲーションシステムを作成するには、各メニューの上にアンカーを追加する必要があります。food ページは長いので、訪問者がクリックしたメニュー項目に基づいて、コンテンツが縦方向にスクロールして対応するメニューが表示されます。また、 リンクの使用方法についても詳しく見ていき、多様なタイプのリンクを作成します。これには、訪問者が PDF ファイルをダウンロードできるダウンロードリンクも含まれます。

記号と特殊文字の挿入

字形パネルを使用すると、標準のキーボードでは使用できない、© などの記号やベータ(ᵝ)などの特殊文字を挿入できます。字形パネルを使用すると、Unicode 文字を挿入できます。

挿入できる記号や文字のタイプは、選択するフォントによって異なります。たとえば、一部のフォントには、国際的な文字(Ç、 ë)や国際的な通貨記号(£、¥)が含まれています。組み込みの記号フォントには、矢印、箇条書き、化学記号が含まれます。

字形パネルを使用して文字を挿入するには、次のようにします。

  1. まだ実行していない場合は、文字を挿入する Web ページでテキストフレームを描画します。

  2. ウィンドウ/字形を選択して、字形パネルを起動します。

  3. ドロップダウンを使用して、挿入する文字のカテゴリを選択します。

  4. 字形パネルには、選択したカテゴリのすべての文字が表示されます。挿入する文字をクリックします。

テキストフレーム外観の編集

Web フォント、Web セーフフォント、またはシステムフォントのいずれをテキストに適用しても、デザインビューで作業中にはテキストコンテンツをいつでも編集できます。また、テキストブロックが異なるように表示するために、テキストフレーム自体の外観を更新することもできます。

テキストフレームは、テキストの各セクションを取り囲むコンテナとして考えてください。ライブサイトでの表示に影響する、テキストフレームを多くの方法で制御できます。

テキストフレームの書式設定およびスタイル設定をする場合は、選択ツールを使用してテキストフレームを選択した後、テキストコンテンツの外観に影響を与える変更を適用します。

注意:テキストツールを使用してテキストを選択した場合は、テキストパネルまたはコントロールパネルの書式オプションを設定することで、テキストのスタイルが設定できます。

テキストフレームの寸法は、ハンドルをドラッグして伸長または縮小してサイズを変更します。テキストフレーム全体をページ上でドラッグして、位置を変更することもできます。テキストフレームのサイズを変更すると、ツールヒントにその寸法が表示されます。

fig_15_type
テキストフレームを取り囲むハンドルをドラッグしてサイズを変更します。

また、テキストフレームを回転することも可能ですが、その場合(適用したフォントに関係なく)、そのテキストは画像ファイルとして書き出されることに注意してください。このため、テキストフレームの回転は慎重に行い、回転したテキストには常にタイトルを追加してください。

テキストフレームコンテナの外観を更新するには、長方形の編集に使用する同じ書式設定オプションを使用できます。塗りのカラーを設定したり、さらには背景画像を追加したりすることもできます。また、線を設定して、同じ設定を使用して線の幅、カラー、および整列を制御できます。コントロールパネルの角および効果メニューを使用して、テキストフレームの角丸の半径を設定し、ドロップシャドウ、ベベル、およびグローを適用できます。

テキストフレームに透明部分を追加するには、不透明度スライダーを使用して不透明度値を変更します。

ハイパーリンクメニューと「ハイパーリンク」フィールドを使用して、テキストにタイトルの追加、リンクの追加、およびリンクが新しいブラウザーウィンドウで開くかどうかを設定します。

画像周辺のテキストの整列と回り込みの制御

テキストフレームは、ページコンテンツの作成で非常に役に立ちます。前のセクションで示したように、テキストフレームにはグラフィックエレメント、効果、さらにテキストコンテンツを含めることができます。

このセクションでは、スペースを追加するためにパディングを設定して、テキストフレーム内のテキストコンテンツを制御する方法を説明します。さらに、画像周辺を回り込みするテキストの列を作成して、雑誌スタイルのレイアウトを作成する方法についても学習します。

テキストへのパディングの追加

初期設定では、テキストフレームに入力、配置、またはペーストするテキストは、左側に整列します。スペースパネルで設定を確認すると、すべて 0 に設定されています。

PaddingZero
テキストフレームのテキストに適用される初期設定のパディング。

テキストフレームの左、右、上、下にスペースを追加するには、希望する値(ピクセル)を入力するか、各フィールドの横にある上下の矢印をクリックして数値を増減します。

テキストのインデントと行送りおよび字送り値の制御

Adobe Muse でのテキストの書式設定は、ワープロやその他多くの画像編集ツールでテキストコンテンツを更新するのと同じ方法で制御できます。テキストパネルには多くの追加設定があり、そのいくつかは、テキストが選択されるとコントロールパネルには表示されません。

次の手順に従って、段落のテキストの最初の行をインデントします。

  1. 文字ツールを使用して、いくつかのテキストを選択します。

  2. 文字ツールのインデント値を希望するピクセル値に更新します。

TypeToolIndent
フィールドに数値を入力するか、上下の矢印をクリックして値を変更します。

テキストパネルの「文字間隔」オプションにより、各文字間の間隔を指定できます。これは、特にテキスト効果、および Web で装飾的または定型化されたフォントを読みやすくする場合に効果的です。

「文字間隔」フィールドにピクセルの数値を入力することで、選択したテキストに文字間隔を適用できます。または、希望する効果が得られるまで、上下の矢印をクリックして値を増減できます。

TypeToolAddSpace
「文字間隔」フィールドに数値を入力するか、上下の矢印をクリックして値を変更します。

行送りは、段落のテキスト書式の制御に使用できるその他の便利な機能です。行送りにより、テキストの行間隔を調整できます。行送り機能は、コントロールパネルおよびテキストパネルの両方から使用できます。

TypeToolLeading
行間隔を増減するために、行送り値を更新します。

その他にテキストパネルから次の 4 つのテキスト編集制御を使用できます。

「左マージン」および「右マージン」

これらは、テキストフレームの左側または右側とテキストフレームの境界間のスペースを制御します。これらの設定は、スペースパネルでのパディング値の設定と非常に似ていますが、パディング値を編集するのに、(テキストツールでテキストコンテンツを選択するのではなく)選択ツールでテキストフレームを選択する必要があります。

「スペースの前」および「スペースの後」

これらの設定を使用して、段落の強制改行の前または後に表示されるスペースの大きさ(ピクセル)を制御します。これらの設定により、単一のテキストフレーム内にある段落セット間の白いスペースを多くまたは少なく表示するかを調整できます。

テキストパネルのこれらの設定すべてを試してみて、デザインするページのテキストコンテンツの表示を制御する方法を習得してください。

テキストファイルからページへのテキストの配置

このサンプルプロジェクトの本文のコピーを含んでいるソースファイルは、Kevins_Koffee_Kart フォルダーにあります。テキストは TXT ファイルとして保存されています。Adobe Muse では、テキストファイル全体を配置してページにテキストを追加できます。テキストエディターでテキストファイルを開いて、テキストの行をコピーしてページ上にペーストする必要はありません。

  1. ファイル配置を選択するか、「配置」キーボードコマンドの Command+D(Mac)または Control+D(Windows®)を使用すると、配置操作が開始されます。これは、画像ファイルをページ上に配置する場合に使用する手順と同じです。

  2. 読み込みダイアログボックスで、Kevins_Koffee_Kart フォルダーに移動し、TextThreeSpeed.txt というテキストファイルを選択します。

  3. アコーディオンウィジェットで、ヘッダー TASTING NOTES の下のライトグレーの大きなコンテナをクリックし、テキストファイルのコンテンツを上部のアコーディオンパネルに配置します。

  4. 新しいテキストフレームを配置した後、選択ツールを使用して TASTING NOTES ヘッダーの下に再配置し、必要に応じて、テキストフレームの上下左右のハンドルをドラッグして、ライトグレーのコンテナを拡張し、ヘッダーとその下のテキストの両方を揃えます。先ほど配置したテキストをクリックしてドラッグすると、2 つのアイテムが整列された時点で、青いガイドが一時的に表示されるため、テキストがヘッダーテキストの左側に整列されるタイミングがわかります。ハンドルをドラッグして、配置したテキストのサイズを変更することに加えて、グレーのコンテナをクリックし、下部のハンドルをドラッグしてコンテナの高さを拡張することができます。

  5. ライトグレーのコンテナを選択した状態で、塗りカラーピッカーをクリックして、パネルの背景色を塗りなしに設定します。

    fig_40
    テキストを一番上のグレータブと、対応する大きいコンテナに追加し、コンテンツで埋めます。

同期したテキストの使用

同期したテキストの使用の詳細については、「同期したテキストの使用」を参照してください。

レスポンシブレイアウトでテキストを操作する

レスポンシブレイアウトでテキストをフォーマットする方法について詳しくは、「レスポンシブレイアウトでのテキストのフォーマット」を参照してください。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー