本書の使い方 本書は、巻頭から順に読んでいってもかまいませんが、目的に応じて 章ごとに読み進めていっても大丈夫です。 下記のタイプ別ガイドを参 考にして、効率よく本書を利用してください。
ホームページのことを 基礎から理解したい! Basic
こんな人は ......
B
・ 何から手を付けていいかわからない ・ インターネットについて理解が深くない ・ じっくりと確実にホームページを 作り込みたい
ホームページのデザインを よくしたい! こんな人は ......
Design
D
・さらにこったデザインをしたい ・スタイリッシュにサイトをまとめたい ・オリジナリティを追求したい 第5 章（P.75）へ
第1 章（P.11）へ
素早くホームページを 完成させたい! こんな人は ......
Quick
Q
・まずは 1 つホームページを作ってみたい ・とりいそぎホームページが必要 ・公開して後から完成度を高めたい
最新のウェブサービスを 利用したい! こんな人は ......
こんな人は ......
Customize
C
・細かくページを作り込みたい ・サイト全体をカスタマイズしたい ・脱「テンプレートのまま」を果たしたい 第3 章（P.45）へ、第4 章（P.59）へ、第7 章（P.139）へ
4
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
W
・さまざまな機能をホームページに追加したい ・多くの人にホームページを知ってもらいたい ・最新のウェブ技術を取り入れたい
第2 章（P.23）へ
ホームページを より作り込みたい!
Web Service
第6 章（P.103）へ
詳細な設定や使い方について 知りたい! Tips T こんな人は ......
・さらにホームページを改善したい ・作業効率をあげたい ・BiND3 の機能を知り尽くしたい 第8 章（P.145）へ
タイプ別 本書の読み方ガイド 豊富なコンテンツ／インタラクティブな仕掛けなどを盛り込む
リッチなページを目指す
W
Web Service
最近のホームページのトレンドを取り入れたページを作ってみたいと いう方は、第 6 章（P.103）をチェックしてみてください。各種ブログ やTwitter、YouTubeといったサービスを取り入れたページが作れます。
Basic
B
インターネットや WWW についてよくわか っていないという方や、じっくりと構えて確 実にホームページを作り込んでいきたい方は、 第 1 章（P.11）から順に読み進めてください。 この章の内容を理解することで、他の章での 習得の効率も高まるはずです。
Design
Q
Quick
まずはホームページを完成させ てみたいという方は、まず第 2 章 （P.23）を読んで1つサイトを作り 上げてみましょう。BiND3 ならで はの、スタイリッシュなホームペ ージがあっという間に作れます。
D
Tips
T
第 8 章 (P.145) で は、BiND3 を使っていく中で、より詳細 な設定を施すことでさらに ホームページを改善したり、 作業の効率を良くする方法 をご紹介します。ひと通りの 作業を覚えてから読むほう が効率がよくおすすめです。
より優れたデザイン性とオリ ジナリティを追求したい方は 第 5 章（P.75）を読んでくださ い。イメージ画像やロゴを効 果的に使った、デザイン性の 高いホームページを簡単に制 作できます。
オリジナリティ重視
第3章（P.45） 、第4章（P.59） 、第7章（P.139）では、各ページを細かく作り込んでいくテクニックや、 サイト全体をカスタマイズする方法などを解説しています。テンプレートを基にホームページを作 ったら次のステップとしてこれらの章をお勧めします。
カスタマイズによって独自のデザインを追求する
素 早 く 効 率 よく
テンプレートを活用して効率よくサイトをまとめあげる
C
Customize
シンプルにまとめる
見やすさを重視、 絞り込んだコンテンツをすっきりとまとめる
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
5
第
1 章 ホームページを作る前に
インターネットの仕組み いまや当たり前に利用しているインターネットですが、その背 後にある技術は複雑で多岐にわたります。ここではわかりやす く、ごく簡単にインターネットの概念や仕組みを解説します。
インターネットとは ?
-1-
インターネットとは、世界規模でお互いに接続さ
が存在しません。巨大なネットワークの中に、さ
れたコンピュータのネットワークです。ここで
まざまな役割のサーバーが設置されていて、デー
言うコンピュータとは、パソコンだけでなく巨大
タを相互に伝達し合うことで多種多様な情報や
サーバーや携帯電話なども含めた広い意味での機
サービスを提供しています。皆さんが、Internet
器の総称です。
Explorer や Safari などのウェブブラウザで見てい
インターネットには、中心となるコンピュータ
るウェブページもそうしたサービスの 1 つです。
インターネットの仕組み PC 携帯電話
携帯電話
携帯電話
サーバー
ゲーム機
サーバー
PC
サーバー サーバー
サーバー
PC
サーバー PC
PC
サーバー
PC サーバー ゲーム機
サーバー 携帯電話
PC
PC PC 携帯電話
100
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
携帯電話
インターネットには中心 となるサーバーは存在し ない。多くのコンピュー タがお互いにデータをや り取りして情報やサービ スを提供している
インターネット上のデータのやり取り index.html というファイルをください」とリクエ
ことを例にして、インターネット上でコンピュー
ストします。サーバーが公開されていれば、そ
タ同士がどのようなやり取りをしているのか、説
の「index.html」というファイルがダウンロードさ
明しましょう。
れてウェブブラウザでそのファイルを表示しま
まずインターネットにつながったパソコンで
す。この URL については、自分のホームページ
ウェブブラウザを立ち上げます。ウェブブラウ
を公開する際にも役に立つ知識ですので憶えて
ザに「URL」を入力します。URL というのは、イ
おいてください。
ンターネット上にあるサーバーの名前とその
このように、インターネットにつながったコン
サーバーのどの場所にあるファイルかを示した、
ピュータはお互いにやり取りをして、情報やサー
おなじみの「http://」で始まる文字列です。例え
ビスを提供しているのです。この「サーバーを指
ば、 「http://www.digitalstage.jp/support/index.
定してリクエストを送る」「リクエストを受けた
html」と URL を 入 れ る と、 「www.digitalstage.
サーバーがデータを送る」という仕組みは、基本
jp」という名前のサーバーがどこにあるのか調べ
的にインターネット全体で共通して行われている
てから、その番地へ「support という場所にある
ことです。
-1-
さてそれでは「パソコンでホームページを開く」
インターネットでのデータのやり取り URL http://www.digitalstage.jp/support/index.htmlを入力 リクエストに応じて データを送信
受け取ったindex.htmlを表示
index.html
index.html
ウェブブラウザ
index.html
PC
index.html
フォルダ （support） サーバーの「support」 フォ ルダにある「index.html」 というファイル
双方にやり取りする URL
URL URL
URL URL
リクエストをサーバーへ送信
インターネット
PC
携帯電話
携帯電話
サーバー
www.digitalstage.jp
PC から送られたリクエ ストに応じて、サーバー がデータを送り返すこと で情報をやり取りする
101
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド URL （http://www.digitalstage.jp/sup
第
2 章 実際にホームページを作る
BiND3 での ホームページ制作の流れ いよいよBiND3でのホームページ作成の作業に進みます。こ こではおおまかな流れを紹介します。まずはこの流れを理解し て、ホームページの完成を目指しましょう。 を表したのものです。まずはこの作業が BiND3
まずは基本の作業を押さえよう !
でのホームページ作成のベースとなりますので、
BiND3 のホームページを作成して公開するまで
これを理解した上でより高度なページ作りにチャ
の基本的な流れは下の図のようになります。この
レンジすると、スムーズに習得できるはずです。
流れは、ごくシンプルなホームページ作りの作業
まず仕組みとしては、サイトのテンプレート選び
-2-
ホームページ作成の基本的な作業の流れ
1
サイトシアター
・ サイトのテンプレートを選ぶ
スタート !
起動すると表示される[サイ トシアター ]でテンプレート を選んでサイトの基礎となる 形を構築します。
2
サイトエディタ
・ サイトのページ構成を編集 ・ サイト全体のデザインやレイアウ トの変更
3
ブロックエディタ
・ リンクや画像などのパーツの配置 ・ テキストの編集 ・ 画像の加工・作成
[サイトエディタ]でサイト全体のページ構 成やデザインの変更、さらに各ページ内の 構成、レイアウトやデザインを編集します。 ページ内の各部分（BiND3では[ブロック] と呼びます）を扱う[ブロックエディタ]で、 文字や画像、リンクなどを編集します。
24
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
やサイト管理などを行う［サイトシアター］ 、サ
はおおまかな流れを理解してください。
イト内のページ管理やレイアウト変更などを作業 編集する［ブロックエディタ］という 3 つの画面を
BiND3 のマスターは サイトエディタとブロックエディタから
持っています。それらを切り替えていきながら、
実際の BiND3 でのホームページ作成は、 ［サイト
サイト全体から各ページの細部まで、手を加えて
エディタ］と［ブロックエディタ］ で作業をし、そ
いきます。そのほかに、 画像を作成する［SiGN］ （サ
れを確認するというステップを繰り返していくこ
イン）や、各種ウェブサービスと連携したページ
とで進めていきます。この 2 つの画面に慣れるこ
を作るための［SYNC］ （シンク）などが BiND3 に
とが BiND3 でのホームページ作りの上達のコツ
はありますが、後のページで説明します。
と言えるでしょう。
実際の作業手順も後ほど説明しますので、ここで
参照
P.30 実際にホームページを作ってみよう!
-2-
する［サイトエディタ］ 、ページ内のコンテンツを
2 、 3 、 4 の繰り返し
4
サイトエディタ
・ プレビューで確認
作業が進んだら[サイトエディタ]に戻って [プレビュー ]ボタンを押して、ウェブブラ ウザで確認をします。確認して問題なけれ ば、また次の部分の作業に取りかかり確認、 という流れを繰り返します。
5
サイトエディタ
完成 !
・サーバーの設定
・アップロード
ホームページが出来上がった、と思ったら、[サ イト設定]のアップロードするFTPサーバーの情 報を入力してアップロードすれば完了です。
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
25
第
3 章 画像やリンクでホームページを充実させる
携帯電話で撮った 動画を掲載する 携帯電話やデジカメで撮影した動画をウェブページで公開して みましょう。 動画ファイルさえあれば、動画の掲載も写真の公 開と同様に簡単に行えます。
01
ブロックに［動画パーツ］を挿入 動画を配置するブロックを［ブロックエディタ］で開き、 ［パーツ一覧］から［動画パーツ］をクリックする。
03
機能カテゴリー
ブロックエディタ
パーツ
動画パーツ
公開する動画ファイルを選択する 選択ウィンドウが開いたら、公開する動画ファイルを選 択する。 ［ブロックエディタ］に戻って［適用］をクリック すると、編集ウィンドウに動画のサムネールが表示される。
動画ファイルを選択
-3-
［動画パーツ］ボタンをクリック
02
動画の種類を選択する
［開く］ をクリック
［動画パーツ設定］の［開く］ボタンをクリックし、プル ダウンメニューから、公開する動画のムービー形式を選 択する。 ［開く］ボタンをクリック
ムービー形式を選択
54
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
ヒント！ 掲載したい動画が対応形式（QuickTime、Windows Media、RealMedia、Flash）でなかった場合、Quick TIme Player など他の変換ソフトを使ってあらかじめ 変換しておきましょう。
04
動画の表示サイズを設定する ［ブロックエディタ］で動画パーツのサムネールをクリッ クして ［行の位置］ を中央揃えにする。また ［クリック設定］ タブをクリックして、動画の表示サイズと［自動再生］
ポイント！
動画をボタン形式で組み込むことも可能 動画の表示方法は、 ［通常表示］と［ボタンクリックで
および［ダウンロードリンクを配置］の設定を行う。表
拡大表示］の２種類から選べます。 ［ボタンクリックで 拡大表示］を選択すると、ページ内にボタンが配置され、
示サイズは初期設定（400×300 ピクセル）で問題な ければ特に変更する必要はない。 ［ダウンロードリンクを
画が表示される。
それをクリックするとポップアップウィンドウ内で動
配置］を有効にすると動画の下にリンクが表示され、動 画ファイルをダウンロードできるようになる。
1
［クリック設定］ タブを開く
［ボタンクリックで拡大表示］を選択する
表示サイズを入力する
-3-
［適用］をクリック
2 05
適用してプレビューで確認する 設定が完了したら［ブロックエディタ］で［適用］ボタン をクリック。 ［サイトエディタ］で［プレビュー］ボタン をクリックしてウェブブラウザで動画がページ内に表示 されるのを確認する。 ページに埋め込まれたボタンをクリック
3
動画が配置された 動画ウィンドウがポップアップ され、動画は自動再生される 参照
P.112 YouTube の動画を貼り付ける
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
55
第
4 章 さまざまな種類のページを作る
アコーディオンメニューを作る ウェブページのサイドバーに、アコーディオン形式のメニューを 設置します。ブロックテンプレートを使えば、Ajaxを駆使した 動的なメニューが簡単に追加できます。
01
サイドバーのブロックを編集する
03
サイドバーのブロックを選択し、 ［編集］ボタンで［ブロ
機能カテゴリー
ブロックエディタ
ブロックテンプレート
設定
アコーディオン式のブロックテンプレー トを選ぶ ［ブロックテンプレート］画面で、 ［サイドバー］のカテゴ
ックエディタ］を開く。必要に応じて、新規ブロックを作 成してもいい。
リーから［関連情報（アコーディオン式） 」を選択。 ［適用］ をクリックする。
［標準：09 サイドバー］をクリック ［編集］ボタンをクリック ［関連情報（アコーディオン式） ］を選択
-402
ブロックテンプレートを開く ［ブロックエディタ］の下部にある［ブロックテンプレー トを開く］をクリック。
04
アコーディオンメニューの項目を増やす テンプレートを適用すると、 ［ブロックエディタ］にはダ ミーのテキストが表示される。ひとつの項目を丸ごと選 択してコピー＆ペーストすることで、メニューの項目を 必要に応じて増やすことができる。
項目をコピー＆ペーストして項目数を増やす ［ブロックテンプレートを開く］をクリック
72
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
ブロックテンプレートのテキストを書き 換えて、画像を置き換える ［ブロックエディタ］で、それぞれの項目のタイトル、本 文のテキストを書き換える。さらに画像も配置してから ［適用］ボタンをクリック。 ［サイトエディタ］で［プレビ ュー］ボタンをクリックしてウェブブラウザで確認する。
ポイント！
アコーディオンのアクションを設定する ウェブページを開いたときのアコーディオンの動作を設 定することができます。初期設定では、一番上の項目だ けが開いている状態で表示されます。 ［ブロックエディ タ］の［設定］タブを開き、 ［ブロックレイアウト］のオ プションを使用して、最初に開く項目や、マウスを重ね たときのアクションを設定します。 設定タブを開く
画像を組み込む テキストを書き換える
-4-
05
［すべてを選ぶ（ロールオーバー） ］を選ぶ
クリックで順番に開くアコーディオンメニューの完成
項目がすべて開いた状態で表示された
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
73
第
5 章 デザインに磨きをかける
レイアウトを変更して サイドバーを追加する サイドバーのないページにも、簡単にサイドバーを追加できま す。 ［レイアウト］ボタンでレイアウトの変更を実行すればそれ で完了です。
01
機能カテゴリー
サイトエディタ
レイアウト
サイトエディタでページを選択 ［サイトエディタ］でサイドバーを追加するページを選 択し、画面下の［レイアウト］ボタンをクリックする。
-5-
［レイアウト］ ボタンをクリック
サイドバーが追加された
ヒント！
02
レイアウトの種類を選択して サイドバーを追加 ［レイアウト］メニューから、サイドバーがあるレイア ウトを選ぶ。ここでは、メインブロックの右側にサイ ドバーが配置される［A-2 I 型 ビルボード＋メイン＋サ イド］を選択する。
［A-2 I型 ビルボード＋メイン＋サイド］ を選択
94
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
サイドバーを表示しない状態に戻したい場合は、 ［レ イアウト］ボタンをクリックして、 ［A1 I 型ビルボー ド＋メイン］を選びましょう。
03
レイアウトを確認する
05
画像の出力サイズを調整する
ページの右側、ビルボードの下にサイドバーが配置さ
サイズを変更したいバナーを選択し、 ［出力サイズ］を
れる。サイドバーを追加しても全体の横幅は変化しな いため、メインコンテンツの幅は縮小される。このた
表示幅に合うように調整する。ここでは、 「260」と入 力（単位はピクセル）。横幅を入力すると、縦のピクセ
め、それまで配置されていた写真や見出しなどの画像
ル数も自動的に縦横比を固定したサイズに縮小される。
が、表示可能領域内に収まりきらなくなる。
ほかの画像サイズも同様に調整する。
表示領域に対して画像が大きすぎる
バナーを選択
画像が重なって表示されている ［出力サイズ］ を入力
04
調整したい画像を ブロックエディタで開く はみ出してしまったバナーや画像が配置されているブ ロックを選択し、 ［編集］ボタンをクリックしてブロッ クエディタで開く。
-5-
［適用］ をクリック
06
適用してウェブブラウザで確認する 画像サイズを調整したら［ブロックエディタ］で［適用］ ボタンをクリック。 ［サイトエディタ］で［プレビュー］ボ タンを押して、ウェブブラウザで仕上がりを確認する。
ブロックを選択する ［編集］ ボタンをクリックする
画像やバナーが収まったレイアウトの完成
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
95
第
6 章 ウェブサービスと連携したページを作る
ホームページに ブログを組み込む 各種ブログサービスで作ったブログをBiNDで作ったウェブペ ージに組み込みます。 現在、Blogger や Yahoo!、Ameba、 livedoorといったブログサービスをサポートしています。
01
あらかじめ、ブログを開設しておく
02
機能カテゴリー
ブロックエディタ
パーツ
ブログ
ブロックエディタの パーツ一覧から［ブログ］を選ぶ
BiND がサポートする各種ブログサービスで、アカウン
ブログを配置したいブロックを［ブロックエディタ］で開
トを登録してブログを作成する。
いて、 ［ブログ］ボタンをクリック。
［ブログ］ ボタンをクリック
-6Bloggerで作成したブログの管理画面
03
ブログサービスを選択する ［SYNC］が起動したら利用しているブログサービスを選 択して、 ［次へ］ボタンをクリックする。
ヒント！ BiNDがサポートしているブログサービスは、下記の 8 種類（2009年10月現在） 。 ・Blogger
・FC2 ブログ
・Yahoo!ブログ
・JUGEM
・Amebaブログ
・livedoor ブログ
・ココログ
・goo ブログ
利用しているブログサービスを選択する
104
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
ブログのURLを入力する
05
掲載するデザインを選択する
01 で作ったブログを開いて URL を確認し、 ［SYNC］の
［デザインの選択］画面で、ウェブページの中でブログを
［ブログの設定］画面に入力。さらに、表示するエントリ ー（記事）の数と、ブログサービスのウェブページへのリ
どのように表示するか、デザインを選択して、 ［次へ］ボ タンをクリックする。
ンクの文字も設定して、 ［次へ］ボタンをクリックする。
ブログサービスのURLを確認
ブログのデザインを選択
参照
P.106 ブログのデザインバリエーション
ブログのURLを入力
06
設定を確認して適用する ［設定の確認］画面で各種設定項目を確認したら、 ［適用］ ボタンをクリック。ブロックエディタに戻ったら、さら に［適用］ボタンを押して保存する。
ブログへのリンクの文字を入力
-6-
04
設定がOKなら ［適用］ボ タンをクリック 設定を変更したい場合は ［前へ］ ボタンで戻る
表示するエントリーの数を設定
ブロックエディタでも ［適用］ ボタンをクリック
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
105
第
6 章 ウェブサービスと連携したページを作る
ニュースティッカーを ホームページに組み込む BiND3を使えば、 サイトの更新情報を読み込んで表示する 「ニュースティッカー」をホームページに組み込むことができま す。ここでは、asahi.com の RSS 情報を例にします。
01
掲載するRSS 情報のURLをコピーする
機能カテゴリー
ブロックエディタ
パーツ
ニュース
ブロックエディタで
02 ［ニュース］パーツを選択
掲載するサイトの更新情報（RSS）をウェブブラウザなど
ニュースティッカーを組み込むブロックを［ブロックエデ
で開き、URLをコピーする。
ィタ］で開いたら、パーツ一覧にある［ニュース］をクリ ックする。
RSSを開いてURLをコピー
-6-
［ニュース］ をクリック
ヒント！ RSSのURLは、ウェブブラウザでフィードを読み込ん だ状態にすれば確認できます。主なウェブブラウザでの RSSの表示方法の通りです。 FireFox
03 URL 欄の右端にあるRSSアイコンをクリック
アイテムの選択で ニュースティッカーを選択 ［SYNC］が開いたら、 ［BiNDニュースティッカーを設置 する］をクリックして、 ［次へ］ボタンをクリック。
Internet Explorer ［BiNDニュースティッカーを設置する］ をクリック
コマンドバーのRSSアイコンをクリック
Safari
［次へ］ボタンを押す URL 欄の右端にあるRSSボタンをクリック
128
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
04
ニュースティッカーのデザインを選択 ［デザインの選択］画面で、ニュースティッカー表示のデ
06
設定を適用してプレビューで確認 ［設定の確認］画面で、各種設定が問題なければ［適用］
ザインを選択する。見出しが一覧で表示されるもの （標準） と、見出しが右から左に流れて表示されるもの（ミニ）の
ボタンをクリック。さらに［ブロックエディタ］の［適 用］ボタンもクリック。 ［サイトエディタ］の［プレビュー］
いずれかを選んだら、 ［次へ］ボタンをクリック。
をクリックしてウェブブラウザで確認する。
［適用］ ボタンをクリック
ニュースティッカーのデザインを選ぶ
［次へ］ボタンを押す
元となる情報のRSSを入力 ［ニュースソースの選択］ 画面で、 ［RSSのURLを直接入力］ を選択。 ［RSSのURL］ 欄に01でコピーしたURLを入力し、 ［次へ］ボタンをクリック。
-6-
05
ニュースティッカーが組み込まれたページが完成
ヒント！ RSSのURLをペーストする
デザインが［ミニ］タイプのニュースティッカーは、見 出しが10秒おきに右から左に流れるように切り替わっ て表示されます。見出しの文字をクリックすると、元 となった記事へジャンプします。ニュースティッカー のタイトル（上の例では、asahi.com）は、RSS で指定 されている発行元のページへのリンクになっています。
［次へ］ボタンを押す 参照
P.134 独自のRSSを設置する
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
129
第
8 章 さらに BiND3 を使いこなす
よく使うレイアウトを テンプレートとして保存する 自分で編集したブロックの内容をテンプレートとして保存して、 ［ブロックテンプレート］から呼び出すことができます。
01
編集済の保存したいブロックを開く ［サイトエディタ］で保存したいレイアウトを含むブロッ クを選択して［編集］ボタンをクリックする。
機能カテゴリー
ブロックエディタ
ブロックテンプレート
03 ［ユーザー設定］をクリックして保存 ブロックテンプレート画面左側のリストから［ユーザー設 定］をクリックする。画面に表示される［現在の設定を 保存］ボタンをクリック。ダイアログで［テンプレート名］ と［説明］を入力して［OK］ボタンをクリックする。
-8-
［編集］ボタンをクリック ［現在の設定を保存］ボタンをクリック
ヒント！
［ユーザー設定］をクリック
保存したいレイアウトがブロックの中の一部の場合、ブ ロックを複製してからその中の不要部分を削除して02 以下の作業をしましょう。保存が済んだら、不要になっ た元の複製したブロックを削除します。
02
ブロックテンプレートを開く ［ブロックエディタ］の下部にある［ブロックテンプレー トを開く］ボタンをクリックする。 ［テンプレート名］を入力
［説明］を入力 ［ブロックテンプレートを開く］ボタンをクリック
146
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
04
保存したレイアウトを挿入したいブロック を選択して開く 同じレイアウトにしたいブロックを選択して［ブロックエ ディタ］で開く。
06
適用してプレビュー ［ブロックエディタ］の［適用］ボタンを押してから、 ［サ イトエディタ］の「プレビュー」ボタンをクリック。ウェ ブブラウザで確認する。
同じレイアウトにするブロックを開く
同じサイト内の別ページだけでなく、別のサイトで同じ レイアウトを適用したい場合にも、ブロックの保存は利 用できます。逆に、同じページの同じエリア内であれば ブロックを選択して［複製］ボタンをクリックしたほう が素早く作業できます。
05
ブロックテンプレートで保存したテンプ レートを選択して適用 ［ブロックエディタ］で［ブロックテンプレートを開く］ ボタンをクリック。 ［ユーザー設定］から保存したブロッ クテンプレートを選択して適用する。
同じレイアウトにするブロックを開く
ポイント！ テンプレート保存の活用法 ブロックにブロックテンプレートを適用すると、元の内 容は消去され、選んだブロックテンプレートの内容に差 し替わります。テキストやパーツが配置されているブロ ックでブロックテンプレートを適用するときに、適用前 に［ユーザー設定］で元のブロックの内容を保存してお けば、後から簡単に戻せるようになります。試行錯誤し たい場合、活用してみましょう。
-8-
ヒント！
保存したブロックテンプレートを選択 ［適用］ボタンをクリック
BiND for WebLiFE* 3 ではじめるホームページ公式完全ガイド
147