注意:

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

Muse サイトでブログを表示するための埋め込み HTML の使用

埋め込み HTML とは、Google、YouTube、Flickr、Picasa など、サードパーティの Web サイトによって生成されたソースコードを指します。ユーザーは、これらの Web サイトでアカウントを設定し、ログインしてから、これらのサイトから埋め込みコードをコピーして、自分のサイトに追加することができます。

埋め込み HTML をページにペーストするのは、サードパーティサイトのコンテンツを表示するウィンドウを自分のサイトのページ内部に配置するようなものです。

埋め込み HTML は、複雑な情報(地図、天気予報、株式市場の相場など)だけでなく、リッチメディア(デジタルビデオ、スライドショー、オーディオファイルなど)を迅速かつ簡単に追加するには、優れた方法です。この方策には、サードパーティのサイトをホスティングサービスやアップロードインターフェイスとして使用できる追加の利点があります。例えば、YouTube で無償のアカウントを作成すると、独自の YouTube チャネルを作成して、自分のサイトにビデオコンテンツをアップロードすることができます。YouTube には、アップロードプロセスを簡素化し、ユーザーのサイトでビデオファイルをホストする Web ページが用意されています。自分のサイトを更新したい場合は、単にビデオを自分の YouTube チャネルに追加し、埋め込みコードをコピーしてから、ページにペーストして Muse サイトに新しいビデオを追加します。

このセクションでは、Tumblr からソースコードをコピーします。これは、アカウントを作成し、サインインしてから、公開されるブログ記事を投稿することが要求される無償のオンラインサービスです。ブログは使いやすく、特に自分のサイトを更新する技術力のないユーザーのために簡単にする際に役立ちます。ほとんどのサイトには、オンラインインターフェイスが用意されているので、任意のブラウザーを使用して自分のアカウントにログインし、新しい記事を投稿することができます。HTML に関する知識や追加のソフトウェアは必要ありません。

注意:Web サイトにアクセスする訪問者は、ページに埋め込まれたブログを閲覧するために、Tumblr アカウントを保有する必要はありません。サイトのデザイン担当者のみ、カスタムブログを作成し、自分の Web サイトに追加する埋め込みコードを生成するために、Tumblr アカウントが必要となります。

  1. このチュートリアルでは、手順に従うために Tumblr アカウントを作成する必要はありません。無償のブログを作成した後に、Tumblr Web サイトによって生成された以下のコードをコピーするだけで十分です。

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

  1. プランビューで、events ページのサムネールをダブルクリックし、ページを開いてデザインビューで編集します。
  2. 空白のページの中央をクリックして HTML コードを埋め込むには、以下の方法のいずれかを使用します。
  • 編集/ペーストを使用するか、キーボードショートカット(Mac の場合は Command+V、Windows の場合は Control+V)を使用して、直接ページにコードをペーストします。
  • オブジェクト/HTML を挿入を選択します。ここで表示される HTML を編集ウィンドウのフィールド内部をクリックして、コンテンツをペーストします。「OK」をクリックして、HTML を編集ウィンドウを閉じます。

注意:ほとんどの場合、Muse は HTML コードを識別するので、直接ページ上にペーストした HTML を自動的に埋め込みます。ただし、サードパーティ Web サイトのコンテンツではなく、コードがページ上に表示される場合は、代わりにオブジェクト/HTML を挿入を選択します。

HTML コードを埋め込むと、Katie's Cafe の Tumblr アカウント向けに入力されたブログの投稿を取り囲むハンドルの付いた青色のバウンディングボックスが表示されます。

  1. 選択ツールを使用してハンドルをドラッグし、ブログのコンテンツがページ幅の約 80%を占めるようにサイズを変更します。ブログコンテンツをページ中央に配置し、タイル張りの背景グラフィックが左右両側に表示されるようにします。青色の計測用長方形には、他のオブジェクトからの距離が表示されます。赤色の整列ガイドが一時的に表示され、選択されたオブジェクトが垂直方向に中央揃えされたことを示します。
ページをサイズ変更して配置
events ページで Tumblr ブログのサイズを変更し、配置します。

これが、HTML を Muse ページに埋め込むために必要な条件のすべてです。HTML コードを編集したい場合、埋め込み HTML 要素を右クリックして、表示されるコンテキストメニューから HTML を編集を選択します。これにより、HTML を編集ウィンドウが開くので、前の手順でペーストしたコードにアクセスできます。

それでは、events ページに加えた変更内容を確認しましょう。

  1. ファイル/ブラウザーでページをプレビューを選択して、新しいブラウザーウィンドウに表示される events ページを確認します。

ブログ記事のリストを下にスクロールすると、ヘッダーが他のページコンテンツの上に表示されるのがわかります。event ページが前面マスターページを使用し、マスターページのヘッダーコンテンツを前面に表示するように設定されているため、このビヘイビアーが発生します。

これで、events ページは完成しました。次のセクションでは、ウィジェットの内部に埋め込み HTML コンテンツをペーストして、ユーザー操作に応じてサードパーティコンテンツの表示を制御する方法について学びます。

Muse Web サイト内にビデオを埋め込む

現在、ターゲットコンテナはグレーカラーで塗りつぶされています。ただし、ターゲットコンテナ内部には、異なる画像ファイル、塗りつぶされた長方形、テキスト、他の Web サイトからコピーした埋め込み HTML を含む、あらゆる種類のコンテンツを配置できます。

この例では、YouTube によって生成された埋め込み HTML をペーストします。

YouTube.com のページにアクセスして、自分のアカウントでアップロードしたビデオを視聴することを想定してください。「共有」ボタンをクリックし、続いて「埋め込む」をクリックすると、ビデオのために埋め込まれたコードにアクセスしてコピーできます。

ビデオの埋め込み
希望のビデオサイズを選択した後、YouTube によって生成された埋め込みコードをコピーします。

このビデオの目的上、Katie's Cafe ビデオ用の埋め込みコードは既にサイトにコピーされているので、YouTube にアクセスする必要はありません。以下の埋め込みコードをコピーして、クリップボードに保存します。

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

上のコードでは、YouTube に投稿されたビデオファイルへのリンクが iFrame タグで挟まれています。iFrame は HTML コンテナで、Web ページにコンテンツを追加するとき、「ウィンドウ」内部にコンテンツを表示できます。

上のコードをコピーした後、Muse に戻ります。

  1. 選択ツールを使用して、ページのグレーの境界線をクリックすると、左上隅にある選択範囲インジケーターに単語ページが表示されます。これは、ページ全体が選択されていることを示します。
  2. グレーカラーで塗りつぶされた大きなターゲットコンテナをクリックします。左上隅にある選択範囲インジケーターに「コンポジション」という文字が表示されます。グレーのターゲットコンテナをもう一度クリックすると、選択範囲インジケーターに「コンテナ」という文字が表示されます。もう一度クリックして(「ターゲット」と表示)、選択範囲インジケーターに「画像フレーム」という文字が表示されるまでクリックを続けます。Backspace キー(Windows)または Delete キー(Mac)を押して、ターゲットコンテナから画像フレームを削除します。

次のパートでは、内部のターゲットコンテナを選択しながら、上でコピーした HTML コードをターゲットコンテナにペーストします。

注意:スライド画像をトリガーコンテナにペーストしたときに経験したように、ターゲットコンテナ内部にコードをペーストするのは多少難しい場合があります。ここでは、ウィジェットのターゲットコンテナ内部にコードをペーストするのが目標です。(現在選択している要素に応じて)ウィジェットの外部にビデオコードをペーストすることができます。これにより、コードがページに直接埋め込まれます。このため、慎重に継続してください。プレビューをクリックしてライトボックスをテストして、スライド画像をクリックしていないのにビデオが表示される場合は、ビデオコードが正常にコンテナにペーストされていません。このため、ビデオが直ちに表示されます。ビデオは、スライド画像をクリックした後でのみ表示されるはずです。

(選択範囲インジケーターに「コンテナ」という文字が表示される間)ターゲットコンテナにビデオコードをペーストするには、以下の手順に従います。

  1. オブジェクト/HTML を挿入を選択します。表示されるウィンドウ内で、デフォルトのプレースホルダーテキストを選択し、Delete キー(Mac)または Backspace キー(Windows)を押して削除します。編集/ペーストを選択して、上でコピーした YouTube コードを HTML コードフィールドにペーストします。「OK」をクリックして、HTML コードウィンドウを閉じます。

注意:多くの場合、Muse は HTML コードがペーストされたことを自動的に検出し、プレーンテキストではなく、HTML であることを理解します。このため、必要に応じて、オブジェクト/HTML を挿入を選択して HTML ウィンドウを開く代わりに、内部のターゲットコンテナを選択しながら、右クリック(または Control キーを押しながらクリック)して、表示されるコンテキストメニューからペーストを選択できます(または編集/ペーストを選択するか、キーボードショートカットを使用してソースコードをターゲットコンテナにペーストします)。Muse には、ビデオコードをターゲットコンテナにペーストするという同じ目標を達成するための方法が多数用意されています。

コードをターゲットコンテナにペーストした後、ビデオの最初のフレームが表示されます(コーヒーのカップ)。このビデオの最初のフレームは、HTML 埋め込みコードを正常にペーストしたことを示します。デザインビューでページを編集している間、ビデオは再生されません。コントロールパネルで「プレビュー」ボタンをクリックした後、またはブラウザーでページをプレビューした後でのみ、ビデオが再生されます。

  1. 必要に応じて、選択ツールを使用してターゲットコンテナのサイズを変更し、埋め込まれた HTML ビデオコンテンツのサイズに合わせて寸法を拡大します。幅は約 670 ピクセルで、高さは約 415 ピクセルである必要があります。ビデオを選択している間、選択範囲インジケーターには「HTML アイテム」という文字が表示されます。
  2. ターゲットコンテナを選択しながら、Esc キーを一度押して、外部コンテナを選択します。または、必要に応じて、ライトボックス表示ウィジェット以外の場所をクリックして選択を解除してから、ウィジェットを 2 回クリックします。1 回クリックすると、「コンポジション」が選択され、もう一度クリックすると、大きなコンテナが選択されます。選択ツールを使用してコンテナのハンドルをドラッグし、内側でターゲットコンテナを中央に揃えます。コンテナの寸法が幅 710 ピクセル、高さ 460 ピクセルになるようにサイズを変更します。
  3. 塗りメニューを使用してコンテナの塗りのカラーを茶色(#63301B)に設定し、塗りのカラーの不透明度を 100 に設定します。
塗りメニュー
塗りメニューで、コンテナの塗りのカラーと不透明度を設定します。

  1. コンテナの下部でテキストフレームを選択し、Delete キー(Mac)または Backspace キー(Windows)を押してテキストフレームを削除します。テキストフレームには、ターゲットコンテンツのキャプションを挿入できますが、このプロジェクトでは使用されません。
  2. コンテナの右上隅にある(X の付いた)閉じるボックスを選択します。閉じるボックスの内側をクリックして、ラベルを選択し、削除します。塗りメニューを使用して、塗りのカラーをなしに設定します。塗りメニューの画像セクションの横にあるフォルダーアイコンをクリックして、icon-close.png という名前のファイルを参照して選択します。選択ツールを使用して閉じるボックスのサイズを変更し、閉じるアイコンの画像全体が表示されるようにします。
  3. 選択ツールを使用して、ターゲットコンテナとトリガーコンテナの両方の位置を変更し、ページ上でこれらのコンテナを表示したい場所に移動します。
  4. コンポジションを選択しながら、青色の矢印ボタンをクリックしてオプションパネルを開きます。この例では、以下の設定を使用します。
    • 位置:ライトボックス
    • トランジション:フェード
    • 自動再生:無効
    • シャッフル:無効
    • 最初はすべて隠す:無効
    • スワイプを有効にする:有効
    • 一番上でトリガー:無効
    • 閉じるボタン:有効
    • 編集中にライトボックスのパーツを表示:有効
    • すべてをデザインモードで表示:有効
コンポジションオプション
オプションメニューで設定を更新して、ウィジェットの動作方法を制御します。

オプションメニュー以外の場所をクリックして、メニューを閉じます。この時点で、ウィジェットの設定が完了し、テストする準備が整いました。

このチュートリアルで、前に Tumblr ブログをイベントページに追加するために、HTML をページに埋め込む方法を既に学習しています。さらに、利用者がボタンをクリックしたときに、ライトボックスウィンドウ内に YouTube ビデオを表示できるように、ライトボックスコンポジションウィジェット内に埋め込み HTML をペーストする方法も学習しました。このセクションでは、Google マップサイトが提供する、もう 1 つ別の種類の埋め込み HTML について説明します。次の手順に従います。

  1. デザインビューで visit ページが既に開いている場合は、「プラン」をクリックして、visit ページサムネールをダブルクリックして編集します。

このソースコードは、maps.google.com サイトからコピーされています。1 つの住所に 1 つのカスタムのマップを作成できます(この例では複数の場所)。これは無料のサービスで、単に住所(複数可)を入力し、「地図を作成」ボタンをクリックします。

「地図を作成」をクリック
「地図を作成」をクリックして、入力した住所に基づいたマップを作成します。

マップを作成すると、Google マップインターフェイスでは、タイトルと説明を入力できます。次に、「リンク」ボタンをクリックしてコードにアクセスします。「HTML を貼りつけてサイトに地図を埋め込みます」というフィールドに表示された HTML コードを選択します。これで Muse に戻り、その HTML をページに埋め込む準備が完了しました。

ページに HTML コードを追加する
Google マップインターフェイスを使用して、マップの HTML コードを生成します。

このチュートリアルの目的上、新しいマップを自ら作成する必要はありません。マップ作成を試してみる場合は、任意の住所の入力、マップの作成、およびコードのコピーをして試してください。しかし、単にいかに機能するかを確認したい場合は、既に生成済みの HTML コードを使用することができます。

  1. 次のソースコードをコピーします。

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

  1. このコードを visit ページの上部にペーストします。選択ツールを使用して、マップの約 4 分の 1 がヘッダー領域と重なるように、埋め込み HTML をページの最上部近くの縦方向の中心に配置します。マップおよびその下の花のグラフィック間に、テキストの説明を追加できるスペースを確保してください。
  2. テキストツールを使用して、埋め込みマップの下にテキストフレームをドラッグします。次のテキストをコピーしてテキストフレームにペーストします。

While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.

  1. テキストパネルを使用して、次の設定を適用して、テキストのスタイルを設定します。
    • フォント:Droid Serif(またはその他の serif フォント)
    • フォントサイズ:14
    • フォントカラー:#222222
    • フォントの整列:左
    • 行送り:120%

マップに説明を追加したら、visit ページは完成します。

  1. ファイル/ブラウザーでページをプレビューを選択して、ブラウザーで visit ページを確認します。
マップ付きの Web ページ
完成した visit ページには、完全に動作可能な Google マップが含まれます。

埋め込み HTML Google マップはインタラクティブです。矢印をクリックしてそのウィンドウ内でマップを移動でき、+ および - ボタンをクリックして拡大および縮小もできます。

これで、すべてのページのサイトデザインが完成しました。このチュートリアルの残りのセクションでは、仕上げの微調整方法と無料試用版としてサイトをパブリッシュする方法を説明します。

 Adobe Muse ページへの HTML の埋め込み

サイトのページに HTML コードを埋め込み、サードパーティの Web サーバーから動的に表示される複雑なサイト機能を追加することができます。このようなコードのチャンクは、Google、Yahoo!、YouTube、その他など、多数の Web サービスプロバイダーからコピーして、Muse ページ内にペーストできます。このセクションでは、埋め込み HTML の 2 つの異なる例を確認し、Muse で制作した Web サイトにソーシャルメディアコンテンツやインタラクティブな Google マップをすばやく追加できる方法について説明します。

ホームページコンテンツを完了することにより、手順を開始します。手順に従っていた場合、デザインビューでホームページが既に開かれている可能性があります。そうでない場合は、プランビューでホームページサムネールをダブルクリックして、デザインビューで編集用に開きます。以前の手順でホームページに追加したスライドショーの上に埋め込み HTML を追加します。

埋め込み HTML Twitter フィードの追加による最新投稿の表示

Twitter など、様々な Web サービスで無償のアカウントを設定できます。これらのアカウントにより、Web サイトに表示されるメッセージを投稿できます。ただし、Twitter.com に情報を表示することに加え、アカウントを使用してログインし、埋め込みコードをコピーして、作成した Web サイト上に同じメッセージを表示できます。

この例では、Kevin's Koffee Kart 用の架空のアカウントを設定します。このためには、新規ユーザーとして Twitter にサインインし、登録フォームを完成する必要があります。その後、サイトのインターフェイスを使用してメッセージを投稿し、Web 上の任意の場所にメッセージを表示できるようにする埋め込みコードをコピーします。これは、ブログの投稿、ビデオコンテンツ、RSS フィード、株式情報、天気予報、ゲームスコア、他の多数の種類の動的データを共有するときに使用する処理と同じです。クライアント用のサイトを制作している場合は、クライアントの顧客と情報を共有できるように、これらのサービスを既に使用しているかどうかをクライアントに確認してください。多くの場合、クライアントのアカウント情報を使用してログインし、表示したい必要なデータ用の埋め込みコードを取得できます。

Twitter にログインして独自のアカウントを作成しなくても済むように、Twitter からコピーした Kevin's Koffee Kart アカウント用の埋め込みコードを示します。

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">オプションのプレースホルダーテキスト</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

 

  1. 上に示したコードをコピーします。

  2. Muse に戻ります。多くの場合、ページ上の目的の位置をクリックし、右クリックして表示されるコンテキストメニューから「ペースト」を選択するだけでできます。または、ペーストのキーボードショートカット(Mac では Command-V、Windows では Control-V)を使用できます。Muse はペーストするテキストが通常のテキストコンテンツではなく、ソースコードであることを認識します。

    注意:

    まれに、コードが HTML とは認識されない場合は、オブジェクトHTML を挿入を選択すると HTML コードウィンドウが開きます。そこでコピーしたソースコードをウィンドウにペーストし、「OK」をクリックすると、ウィンドウが閉じてコードが埋め込まれます。

  3. ソースコード(基本的にはサイトページ内にウィンドウを作成し、サードパーティの Web サイトからリンクされたコンテンツを表示するコード)を埋め込んだ後、そのページに意図したとおりに表示されない場合があります。Twitter 埋め込み HTML コンテンツのデフォルト表示が表示されます。

    ソースコードの埋め込み
    Twitter フィードデータは想定どおりに表示されますが、テキストにはスタイルやフォーマットが適用されていません。

  4. 埋め込み HTML の周囲にあるハンドルをクリックして Twitter フィードテキストエリアのサイズを大きくし、ページの幅ほぼいっぱい、高さが約 1/3 になるよう拡張します。

    埋め込みコードボックスの拡張
    Twitter フィードデータウィンドウの幅と高さを、さらに大きなサイズに拡張します。

    これにより、テキストをかなり広いスペースに表示することができますが、この時点ではテキストはまだデフォルトサイズです。

    次に、HTML コードウィンドウにあるコードを更新して、ダイナミックテキストを表示する方法を定義する CSS スタイルを追加します。このオプションは、投稿されたメッセージの Twitter.com での表示には影響しませんが、自分のサイトでのテキストのフォーマットを変更します。

  5. 次のCSS スタイルコードをコピーします。

    <style type="text/css">

    #twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }

    a:link, a:hover { font-size: 14; color: white; text-decoration: none }

    </style>

    注意:

    時間をとって上記のコードに習熟し、コードが何かを指定する開始タグ(<style type="text/css">)にスタイルが含まれていること、およびブラウザーが CSS スタイルルールの終了を認識できる終了タグ(</style>)について理解してください。ユーザー独自の埋め込み HTML コードにスタイルを設定するときは、適用するスタイルを囲む括弧としてこれらのタグを常に使用します。このケースでは、Twitter Web サイトが投稿されたメッセージをホストし、#twitFeed という CSS ID セレクターを使用して、サイトにテキストを表示する方法を制御しています。したがって、上記のコードは本質的にスタイル名(Twitter サイトから取得)を使用し、サイトでテキストを表示する方法を定義するルールを適用して、Twitter.com で適用されるスタイルをオーバーライドしています。テキストコンテンツのフォーマットの CSS ルールについては、W3C Schools Web サイトを参照してください。

  6. 埋め込み HTML コードウィンドウで右クリックし、表示されたコンテキストメニューから「HTML」を選択します。HTML コードウィンドウが表示され、以前の手順でペーストしたソースコードを確認できます。サイトを編集中に、このウィンドウを開いて HTML ソースコンテンツをいつでも更新できます。ウィンドウの最上部で、埋め込んだ HTML コードの上をクリックします。手順 5 でコピーした新しいスタイルコードをペーストします。

    埋め込まれている HTML コード
    HTML コードウィンドウで、前の手順でペーストした Twitter ソースコードの上にスタイルコードをペーストします。

  7. 「OK」をクリックして、HTML ウィンドウを閉じます。Twitter テキストのスタイルを変更した後、Twitter サイトからリンクされている投稿はホームページのスライドショーの上に白色のテキストで大きく表示されます。

    Web ページに Twitter テキストを表示
    HTML オブジェクトのサイズを更新し、テキストのスタイルをフォーマット処理した後の完了した Twitter フィード

ホームページはほとんど完成しました。ページに追加する最後のエレメントが 1 つだけあります。

  1. ファイル/  配置を選択します。読み込みダイアログボックスで、Kevins_Koffee_Kart フォルダー内から DailyDrip.png というファイルを探して選択します。「選択」をクリックします。

  2. ホームページに画像を配置した後、選択ツールを使用してその画像をスライドショーの上部近くの左側に配置し、スライドショーの上部に一部重なるようにします。

  3. 「プレビュー」をクリックしてスライドショーのアニメーションを見て、Daily Drip と茶色のドリップ画像の下にどのように表示されるかを確認します。

    完成したホームページのデザイン
    完成したホームページのデザイン

ホームページのレビューを終了したら、「プラン」リンクをクリックしてプランビューに戻ります。

次に、別のタイプの埋め込み HTML を KART MAP ページに追加します。

  1. KART MAP サムネールをダブルクリックしてページをデザインビューで開き、編集を開始します。

  2. テキストツールを使用して、KART MAP ページ上のページコンテンツの上部付近にあるテキストフレームを、ヘッダーの直下にドラッグします。

  3. 次のように入力します。Looking for the Koffee Kart? Check here for real-time location updates throughout the day.

  4. テキストを選択した状態で、段落スタイルパネルを開きます。「Georgia Body Medium」というスタイルをクリックして、KART MAP ページ上のヘッダーテキストに段落スタイルを適用します。

埋め込み HTML を使用した Muse Web ページへの Google マップの挿入

ビデオチュートリアル

ビデオチュートリアル
lynda.com - James Fritz

このセクションでは、Google マップによって生成されたマップを読み込む埋め込み HTML を追加することにより、 KART MAP ページにコンテンツを追加します。これは、サイトで埋め込み HTML を使用するときのもう 1 つのちょっとした可能性の例です。YouTube、Flickr、または Picasa など、他の多くのサードパーティサイトのコンテンツを組み込むばかりでなく、フォーム、ブログ、およびアカウントにアクセスして対応するサイトにコンテンツを投稿することにより制御できる他の複雑なサイト機能も追加できます。

  1. 新しいブラウザーウィンドウを開き、Google マップにアクセスします。

  2. 住所、または、Adobe SF などの検索語を入力し、マップ作成に使用する実際の位置を検索します。

  3. インターフェイスの右上部分に表示されているリンクボタンをクリックし、「埋め込み地図のカスタマイズとプレビュー」オプションを選択します。

  4. 表示されるカスタマイズウィンドウで、カスタムマップサイズを幅 850、高さ 470 に設定します。ウィンドウ内のマップの位置を変更し、住所のテキストが完全に表示されるようにします。

  5. Google ウィンドウから得られた HTML をコピーします。また、ユーザー独自の Google マップコードを作成したくない場合は、下記のソースコードをコピーすることもできます。

    <! -- Google Public Location Badge -->

    <iframe src="http://www.google.com/latitude/apps/badge/api?user=3988005937557250144&type=iframe&maptype=roadmap" width="872

    " height="600" frameborder="0"></iframe>

    <! -- To disable location sharing, you *must* visit https://www.google.com/latitude/apps/badge and disable the Google Public Location badge.Removing this code snippet is not enough! -->

    Google マップウィンドウから HTML ソースコードをコピーする
    Google マップウィンドウから HTML ソースコードをコピーします。

  6. Muse に戻ります。ページで右クリックし、「ペースト」を選択してコードを配置します。また、オブジェクトHTML を挿入を選択して HTML コードウィンドウを開くか、標準のキーボードショートカットを使用してコードをペーストすることもできます(Mac の場合は、Command+V キー、Windows の場合は、Control+V キー)。

  7. 選択ツールを使用して、マップをページの左側に配置します。

  8. 「プレビュー」をクリックして、ライブサイトで Google マップが訪問者にどのように表示されるかを確認します。マップのナビゲーションボタンをクリックすると、マップが完全にインタラクティブであることがわかります。また、埋め込みウィンドウ内でマップにズームインしたり、マップの周囲で移動することができます。

埋め込み HTML による、他サイトのページ表示のための、サイトへの iframe の追加

埋め込み HTML を使用して、サードパーティの Web サイトからペーストしたコードを挿入できるばかりでなく、同じ方法を使用して iframe 内に Web ページ全体を埋め込むこともできます。例えば、次のようなコードスニペットを入力できます。

<iframe title="A Title for this Content" src="http://yoururlhere.com" width="900" height="500" style="border: 0;"></iframe>

上のコードで、title=""url="" 内のテキストを、必要な外部 Web ページのタイトルと URL に置き換えます。また、iframe ウィンドウの幅と高さを、サイトのデザインに合わせて必要な値にカスタマイズすることもできます。

必要に応じて、以下を開始 iframe タグに追加して、スクロールバーが iframe に表示されないようにすることもできます。

scrolling="no"

オブジェクトHTML を挿入を選択することにより、新しい HTML コードウィンドウを開き、ユーザーのサイトの任意の場所に iframe を埋め込み、URL(www.google.com などのサイトアドレス)を設定して、インターネット上でライブであるサイトをユーザーのサイト内に表示できます。

また、iframe を使用して、Adobe Edge で作成された HTML5 アニメーションなどのアニメーションを埋め込むこともできます。Adobe Edge で作成した HTML ファイルの名前を検索し、次のように iframe の URL 属性でそのファイル名を使用します。

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

次に、Adobe Edge HTML ファイル(および依存ファイル)を Muse サイトファイルと一緒に同じホストサーバーにアップロードする必要があります。サイトを FTP に書き出す場合は、書き出し処理中に Muse により作成されたフォルダー内に HTML ファイルをコピーできます。Muse の「パブリッシュ」リンクをクリックして Adobe Business Catalyst® ホスティングサーバーに直接パブリッシュする場合は、Adobe Dreamweaver® ソフトウェアまたは任意の FTP クライアントを使用してファイルをアップロードすることができます。Business Catalyst ホスティングサーバーに FTP でファイルをアップロードする方法については、Web サイトのパブリッシュを参照してください。

コンタクトフォームのエレメントのフォーマット

一部の標準の CSS ルールを使用して、Business Catalyst 管理コンソールインターフェイスで作成したコンタクトフォームのエレメントをフォーマットできます。ページデザインに合わせて、フォームとフォームエレメントの表示方法を調整できます。

管理コンソールから Muse のページにフォームのソースコードをペーストすると、フォームはデフォルトのスタイルで表示されます。

任意の HTML コードのペースト
任意の HTML コードをペーストすると、フォームがページに表示されます。

他のエレメントと同様に、サイドハンドルを使用してフォームのサイズを変更し、ページ上の目的の位置に移動できます。

フォームを右クリック(または Control キーを押しながらクリック)して、表示されたリストから HTML を選択します。

コンテキストメニューを使用して HTML を選択する
コンテキストメニューを使用してオプションのリストから「HTML」を選択します。

HTML コードウィンドウが表示されます。ここには、管理コンソールからページにペーストしたコードが表示されます。カーソルを一番上の、コードの最初の行の前に置き、Enter キー(Windows)または Return キー(Mac)を数回押して、フォームコードを下に移動してスタイルを追加するスペースを作成します。

Enter キーまたは Return キーを押して、既存のコードの上に数行のスペースを追加する
Enter キーまたは Return キーを押して、既存のコードの上に数行のスペースを追加します。

フォームコードの上のこの領域には、フォームエレメントの外観に影響を及ぼす CSS ルールをペーストまたは入力できます。

この機能を確認するには、下記のコードをコピーしてください。

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</style>

HTML ウィンドウのフォームの上の最上部にコードをペーストします。

HTML ウィンドウの最上部に CSS スタイルをペーストする
HTML ウィンドウの最上部に CSS スタイルをペーストします。

「OK」をクリックして、HTML ウィンドウを閉じます。新しいフォーマットを使用してフォームの外観が更新されたことがわかります。「プレビュー」をクリックするか、ファイル/ブラウザーでページをプレビューを選択して、パブリッシュされたサイトでページがどのように表示されるか確認します。

この方法を使用して、Business Catalyst からコピーしたコンタクトフォームコードを追加したときに含めた、様々なフォームエレメントを制御できます。

時間をとって、ウィンドウの上部にペーストしたコードをレビューしてください。CSS ルールの上と下には、ルールを囲む 2 つのスタイルタグがあることがわかります。これは重要です。開始スタイルタグと終了スタイルタグがないと、CSS ルールは機能しません。表示されているのは、次の 2 つのスタイルタグです。

<style type="text/css">

</style>

これらの開始スタイルタグと終了スタイルタグは、内側のコードに CSS フォーマットルールが含まれることをブラウザーに指定します。CSS ルールを内側にペーストする前に、これらのタグがウィンドウの最上部にあることを必ず確認してください。

フォームエレメントを変更して外観を更新するときは、「クラス」(フォームの様々なエレメントに割り当てられる名前)を呼び出し、更新するプロパティを指定して属性を設定します。

下記のコードの行を検討しましょう。

input.textarea {

background-color: #fff;

}

単語 input.textarea はテキストフィールドの 1 つのタイプ(「クラス」)に割り当てられた名前です。その次の行は、変更するプロパティを呼び出しています。この場合、background-color はテキストフィールドの背景色です。次に、コロンの後の #fff は CSS コードで #ffffff(白色を指定する 16 進法のカラー値)を記述するときの簡潔表現です。

つまり、上のルールは「このタイプのテキストフィールドの背景色を白に設定しなさい」と指定しています。

フォームを更新するために、テキストフィールドの背景色に一般的な Web カラー値、赤を割り当てることもできます。下記のコードは、このタイプのテキストフィールドの背景色を赤に設定します。

input.textarea {

background-color: red;

}

CSS ルールは独自の言語で記述されます。新しい言語を学習するときと同様に、言語に習熟するには練習が必要です。構文(これらのルールを記述するために使用される文法)に関する詳細については、W3Schools がオンラインで無償提供している優れたチュートリアルと CSS リファレンスガイドを参照してください。

ユーザー独自のコンタクトフォームの編集を開始する準備が整ったら、下記のリストを使用して、フォームエレメントごとに調整できるクラス名とそれに関連付けられたプロパティを識別することができます。

注意:

ブラウザー(およびデザインビュー)でルールをレンダリングできなくなるため、CSS ルールのリストを必ず開始スタイルタグと終了スタイルタグで囲むことを覚えておいてください。

<style type="text/css">

</style>

コンタクトフォームの上部からデフォルトのエレメントを削除

デフォルトでは、フォームをページにペーストすると、フォームは次の 2 つのエレメントで始まります。

これらのエレメントのいずれかまたは両方を削除したい場合は、HTML ウィンドウを開き、ペーストしたソースコード(追加した CSS スタイルタグの直下)を確認します。

*必須行を削除するには、コードの次の行を見つけて削除します。

<span class="req">*</span> 必須

タイトルラベルとメニューを削除するには、コードの次の行を見つけて削除します。

<td><label for="Title">タイトル</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

注意:

HTML コードを編集するときは、上に示す行以外のタグを誤って削除しないように注意してください。「>」など、1 つの文字を余分に削除しただけでフォームは破損します。この場合、管理コンソールに戻り、コードをコピーしてページの元の位置にペーストし、編集したコードをコピーしたコードに置き換えてください。

CSS ルールを追加し、コンタクトフォームをフォーマットするためのクラスとプロパティのリスト

カラー値を割り当てるときは、kuler などのオンラインツールや画像編集プログラム(Photoshop または Fireworks)を使用して多様な色を取得し、16 進数カラー値を作成できます。16 進数カラー値は必ず # 記号で始まり、その後に 3 または 6 文字の英数字(0 ~ 9 と A ~ F)の組み合わせが続きます。

Muse でスポイトツールを使用して、既存のデザインからカラーを選択するほうが簡単なことがおわかりでしょう。カラーピッカーのフィールドから 16 進数カラー値をコピーしてコード内にペーストすることができます。ただし、次の 16 の Web カラーは名前で指定できます。これらのカラーは、ルールをテストするときに非常に役に立つ可能性があります。

Aqua、Black、Blue、Fuchsia、Gray、Green、Lime、Maroon、Navy、Olive、Purple、Red、Silver、Teal、White、および Yellow

カラーを名前で指定するときは、カラーの前に # 記号を追加しないでください。

次のリストは完全ではありません。エレメントに影響を与える多数の異なる組み合わせ(および使用できる他の多くのプロパティ)があります。これらの推奨事項を使用して開始してください。コードスニペットをダブルクリックして選択し、クリップボードにコピーします。

Muse の使用に関するヒントについては、Muse ヘルプとチュートリアルページを、ライブおよび記録されているウェビナーについては、Muse イベントページを参照してください。

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

法律上の注意   |   プライバシーポリシー