bind4 textbook

002

・本書に記載された内容は、情報の提供のみを目的としており、本書にあるプログラムの利用などによる、あらゆる障害（直接、間接を問わず、第三者に対する損害も含む）について、当社、著者、プログラムの著作権者、配布元、販売店などでは別途明示する場合を除き、一切の責任を負いません。本書をご購入いただいたお客様ご自身の責任においてご利用ください。

・当社、著者、プログラムの著作権者、配布元、販売店などは、プログラムなどのサポートは、別途明示する場合を除き、一切対応しておりません。

・本書は、2010年8月段階での情報に基づいて制作されております。・本書中の会社名や商品名は、該当各社の商標、または登録商標です。本書中では、TM、©®の表示を明記しておりません。

003

　BiND for WebLiFE*のバージョン１がリリースされたのは2007年９月。それから３年

間、ウェブの世界は大きな変革期であった。FacebookやTwitterといったウェブサービス

が盛り上がりを見せ、iPhoneやAndroid携帯などの新しいデバイスが次々と登場してきた。

これまではPCを使ってウェブブラウザで閲覧していた情報がiPhoneのアプリから得られる

ようになったり、発信側から利用者が一方通行に情報を得るだけでなく、双方向にコミュ

ニケーションを取るソーシャルなメディアがより重視されるようになってきた。

　そんな中、従来からあるウェブページの役割は、どのようになってきているのだろうか。

筆者は、インターネットのサービスが多様で複雑になればなるほど、あらゆるフォーマッ

トの情報の受け皿として、ウェブページが今後ますます重要になることは間違いないと考

えている。

　2010年９月に新たにリリースされたBiND for WebLiFE* 4は、新機能の１つとして

TwitterやUSTREAMなどの新しいメディアをページに簡単に組み込めるようになってい

る。また携帯サイトやiPhoneへの最適化などの機能も備えている。“情報のハブ（集中して

中継される地点）”としてのウェブページを作ることのできるツールとしてBiNDは進化し

続けている。

　BiNDは特にトレーニングをしなくても、優れたデザインのウェブサイトを作ることがで

きるソフトだが、本書ではあえて「教科書」というタイトルにして、「少し操作を覚えること

で、さらにBiNDの機能を使いこなしていこう」というスタンスを打ち出してみた。

　ぜひ本書を読み、BiNDの機能をフルに引き出す方法を「学んで」、新しいウェブの世界を

楽しんでいただきたいと思う。

2010年９月

ウェブコンポーザー・プロジェクト

まえがき

004

○本書の狙いと仕組み

本書は、ウェブ制作ソフト「BiND for WebLiFE* 4」

（以下、BiND4）の使用方法を、基本から応用まで解

説した内容になっている。初心者から上級者まで役に

立つ、BiNDの使いこなしに関する情報を集めた。こ

の本は、以下のような人たちに利用していただきたい

と考えている。

・BiNDを初めて使う、あるいは使い出して間もない、

まだ使いこなせていないと思っている人。

・BiNDは以前のバージョンから利用していて基本的

な操作はわかっているが、より詳細な設定や使い方

を知りたい人。

・ウェブページのデザインをよくしたい人。

・ウェブページをなるべく短期間で完成させたい人。

・新しいウェブサービスを組み込んだウェブを作りた

い人。

・ショッピングサイトを作ってみたいが、どこから始

めたらいいかわからないという人。

　以上は一例であるが、このような「ウェブでこんな

ことをしてみたい」という人の要望にダイレクトに応

えるために、この本の目次は、マニュアルのような機

能による分類ではなく、ユーザーがやりたいことを

テーマに挙げ、そのジャンルで分類して紹介してい

る。また2010年９月に発売のBiND4の新機能に関し

ても、ユーザーの要望を反映したものが多数組み込ま

れている。それらに関しても、いち早くテストして使

い方を解説しているのでぜひ試していただきたい。

　BiNDを使用している際に、わからない機能などが

あるという場合は、巻末の索引を機能名でひいてその

ページを見れば、具体例に沿ってその機能の使い方が

説明されている、という仕組みなっている。

○BiND4に関する情報

　BiND4に関して、機能、動作環境、購入などにつ

いての情報は、ソフト開発元であるデジタルステージ

のウェブサイトで確認できる。

BiND公式ウェブサイト

http://www.digitalstage.jp/bind/

　なお、BiND4を購入していないが、本書を手にし

たという方は体験版の利用をお勧めする。機能制限な

しで14日間使用できるので、試しながら本書を読ん

でみてほしい。体験版はデジタルステージのウェブサ

イト（http://www.digitalstage.jp/dl/）からダウン

ロード可能だ。

本書の使い方

○作例の入手先

本書で作業を紹介している作例データは、以下の

URLからダウンロードできる。

http://bind4.md-life.net/book_support/bind4/

download/

作例データは、BiNDのサイトデータの保存先フォル

ダへコピーする。BiNDを起動して［サイトシアター］

の［マイサイトを編集する］をクリックすると、作例

データのサイトが登録されているので、選択して［決

定］ボタンを押し、さらに［編集］ボタンをクリック。

以上で、作例データを確認・編集できるようになる。

保存先フォルダは、初期設定の状態であれば、以下の

場所にある。

●Mac：

　［書類］ → ［DIGITALSTAGE］

　→ ［MyBiND4_Sites］

●Windows：

　［ドキュメント］（［マイドキュメント］）

　→ ［digitalstage］ → ［MyBiND4_Sites］

○お断り

　なお、本書執筆時（2010年８月）で使用したBiND4

は開発途上版のため、正式版とはユーザーインター

フェースが異なっている可能性がある。特にSYNC

やショッピングカートについては、ネット上で提供さ

れるサービスという性質上、常に更新・改良が施され

ていく。そのため、ソフトの画面と紙面と若干の違い

はご容赦いただきたい。ただし、内容に関してはデジ

タルステージの監修のもと、BiNDの習得に大きな問

題が生じないないように考慮しているので安心して読

み進めることができるはずだ。また本書サポートの

ページなどで、情報のアップデートなど、お知らせす

ることも予定している。

本書の作例データのダウンロードについて

005

※権利や動作の関係で、配布することができない作例も一部あり

ます。また、一部の作例データは、本書掲載のものと若干の変更

がある場合がありますのでご了承ください。

※作例データは、本書解説の習得用途にのみご利用いただけま

す。データに含まれる画像やテキストは著作権によって保護され

ておりますので、それらの一部、または全部を無断複写・複製・

転載することはできません。

※ダウンロードしたデータの使用により発生した、いかなる損害

についても、著者および株式会社メディアライフ、株式会社デジ

タルステージは一切の責任を負いかねますのでご了承ください。

006

c o n t e n t s

Lesson 1　基本操作 11 -1 BiNDによるウェブ作りとは 12

-2 ウェブページの構造とBiNDの仕組み 14

-3 BiNDで実際にウェブサイトを作る 16

-4 ユーザーインターフェース解説 32

Lesson 2　レイアウト＆コンテンツ 47 -1 リンク付きの画像を配置する 48

-2 表をページに配置する 50

-3 アコーディオンメニューを作成する 52

-4 新規にページを作成する 54

-5 レイアウトにサイドバーを追加する 56

-6 背景に画像を使ったページを作る 58

-7 タブでコンテンツの表示が切り替わるページを作る 60

-8 リンクを追加する 62

-9 ページ全体とサイドバーの幅を変更する 63

-10 画像や文字のずれや隙間を直す 64

-11 ファイルダウンロード用のページを作る 65

Column サイトのコンテンツとSEO対策 66

Lesson 3　グラフィック＆デザイン 67 -1 トップページのイメージ画像を作る 68

-2 スライドショーが表示されるトップページを作成する 70

007

-3 背景にスライドショーが流れるページを作る 72

-4 サイドバーにスライドショーを設置する 74

-5 ウェブサイトのタイトルロゴをデザインする 76

Column 素材を使ってサイトをデザインする 79

-6 見出しを画像化してデザインする 80

-7 サイトのデザインをまとめて変更する 82

-8 メニューのデザインを変更する 86

-9 リンクボタンをデザインする 88

-10 画像を加工してページに配置する 92

-11 ロールオーバーでリンク画像を変化させる 94

-12 ロールオーバーで色が変化するリンク画像を作る 96

-13 文字の色を指定のコーポレートカラーにする 98

Lesson 4　ウェブサービスとの連携 99 -1 ウェブサイトにブログを組み込む 100

-2 アンケートフォームをページに組み込む 104

-3 USTREAMが閲覧できるページを作る 106

-4 オリジナルアイコンを配置した地図をページに埋め込む 108

-5 YouTubeの動画を貼り付ける 110

Column YouTubeの再生リストを作る 112

-6 画像共有サービス上の写真をページに貼り付ける 113

-7 Google Mapをページに埋め込む 114

-8 ブログパーツをページに埋め込む 116

008

c o n t e n t s

-9 ニュース情報をウェブページに組み込む 118

-10 ソーシャルブックマークへの登録ボタンを組み込む 120

-11 RSS購読ボタンをウェブページに配置する 122

-12 グループで作業可能な表を挿入する 124

-13 独自のRSSを設置する 126

Column RSSについて 129

-14 Twitterへの登録ボタンとタイムラインを組み込む 130

Column Twitterrというウェブサービスの可能性 132

-15 サイトの内容を検索可能にする 133

-16 サイトを自動翻訳して表示させる 134

Lesson 5　ナビゲーション＆ユーザビリティー 135 -1 パンくずリストを設置する 136

Column BDタグの使い方 137

-2 アンカーを設定してページ内で移動する 138

-3 ページの自動転送を設定する 139

-4 サイトやページの名前をウィンドウタイトルに表示する 140

-5 文字サイズ変更ボタンを日本語表記にする 141

Column テキストのスタイルを設定する 142

Lesson 6　応用＆運用 143 -1 GoogleやYahoo!に登録される情報を設定する 144

Column リスティング広告について 146

009

-2 ウェブサイトのアクセス解析を設定する 147

-3 アクセスカウンターを設置する 150

-4 ウェブページで音楽を再生する 152

-5 サーバーに自動でデータをバックアップする 154

-6 ウェブページの公開・非公開を管理する 156

-7 サイトデータのバックアップを取る 158

-8 テストサーバーと正式サーバーを切り替える 160

-9 画像に著作権情報の表示を加える 161

-10 サイトを分割して管理する 162

-11 サイトにパスワードをかける 164

Lesson 7　モバイル＆ショッピングサイト 165 -1 サイトにショッピングカートを組み込む 166

-2 受けた注文の内容を管理する 171

-3 独自ドメインを使ったサーバーを用意する 172

-4 携帯電話からの閲覧に対応する 173

-5 オリジナルデザインの携帯サイトを公開する 174

-6 QRコードを使って携帯サイトへ誘導する 176

付録１ BiND4の標準テンプレート一覧 177

付録２ SiGNのエフェクト一覧 181

索引 185

011

基本操作CONTENTS

-1 BiNDによるウェブ作りとは 12

-2 ウェブページの構造とBiNDの仕組み 14

-3 BiNDで実際にウェブサイトを作る 16

-4 ユーザーインターフェース解説 32

Lesson1

1-1 基本操作Lesson

012

BiNDによるウェブ作りは、ほかのさまざまなソフトやサービスと比べてどこが違うのか？　これを紐解くことで、BiNDの上手な使い方が見えてくるはずだ。

テンプレートをカスタマイズするのがベース

　「BiND for WebLiFE* 4（以下、BiND4）」でウェブサイトを作る作業は、基本的にすべての行程が「テンプレートを基にそれをカスタマイズしていくことでオリジナルのサイトを構築していく」という流れで行っていく。　まず最初は［カートリッジ］と呼ばれるサイト全体のテンプレートを選んでウェブを構築する。［カートリッジ］の中には、ウェブサイトを構成するひと通りのページが用意されている。これらのページを削ったり追加したりすることで自分のコンテンツに応じたサイトを構築する。ページの中身に関しても、［カートリッジ］の各ページには最初からダミーの写真やテキストが配置されている。それらの写真やテキストを自分のものに置き換えていくことでページが出来上がっていく。ページの中身を入れ替えたい場合も［ブロックテンプレート］というコンテンツのパターンに応じて用意されたテンプレートから選んで挿入することができる。サイトを飾るイメージやロゴ、見出しなどの画像も［SiGN for WebLiFE* 3（以下、SiGN）］に用意されたテンプレートの

文字を置き換えることで出来上がっていく。　テンプレートを基にすることで、BiND以外のウェブサイト制作ソフトであれば数日から数週間はかかっていた作業がほんの数時間で完了する。そこから、じっくり自分好みのカスタマイズに時間をかけるのもよし、サイトに掲載するコンテンツそのものの制作に時間をかけるのもよし、という考えがBiNDというソフトの設計思想の根底にある。　BiNDで用意されているテンプレートは、もともとのデザインが非常に優れているうえに汎用的な用途を意識して作られているので、それをカスタマイズしていけば、苦労せずにスタイリッシュなオリジナルデザインのウェブサイトが完成するという仕組みだ。

自由度が高いBiNDによるウェブデザイン

　「テンプレートから作っていく」というと、デザインのバリエーションや配置できるコンテンツに制限があるようにイメージするかもしれない。実際にブログサービスによるウェブページなどは選んだデザインテンプレートにテキストや写

BiND4で新しく搭載された［SHiFT］を使ったページ。FLASH技術を使わずに、写真を動かす仕掛けをウェブに組み込める。技術に詳しくなくてもすぐにこうしたページを作ることができるのもBiNDの特徴だ。

新しい技術を簡単に提供

［カートリッジ］というサイトのテンプレートを基にウェブを作っていく。［カートリッジ］の種類はBiND4標準で96種類。別売りのテンプレート集を追加することも可能だ。

豊富なテンプレート

BiNDによるウェブ作りとは

013

1基本操作

2レイアウト＆コンテンツ

3グラフィック＆デザイン

4ウェブサービスとの連携

5ナビゲーション＆ユーザビリティー

6応用＆運用

7モバイルサイト＆ショッピングサイト

a付録

真などのコンテンツを流し込むだけで簡単に構築できるが、どれも見た目は似たり寄ったりなものになりがちだ。しかしBiNDの場合、テンプレートを基にしつつも、そこからカスタマイズしていく機能が非常に充実しているので、デザインの自由度が低いということはまったくない。コンテンツもテキスト、写真、動画など種類を問わず配置できる。［テーマ］と呼ばれる背景や文字の色、装飾などの設定をまとめたデザインセットを切り替えれば、サイトの印象をがらりと変えることも可能だ。レイアウトのバリエーションも用意されており、サイドバーの有無や横幅の固定・可変といった変更がワンタッチで行える。また、最近のウェブの傾向である各種ネットサービスとの連携も［SYNC for WebLiFE* 3］を使えば、技術的な知識がなくても簡単にページに埋め込むことができる。さらにBiND4では、最新のウェブ技術であるHTML5を取り入れて動きのあるページを作る新機能［SHiFT for WebLiFE*］を搭載している。　日々進化していくウェブの技術を追いかけ続けたり、面倒な画像形式の変換やブラウザの違いによる表示の崩れの修正に腐心するより、もっとウェブサイトの中身のことに時間をかけたい。そんな人のために、面倒なことはまとめて引き受

column BiNDが必要な人とは？

　以上のようなソフトがBiNDだ。これをふまえてBiNDの利用法を考えると、「自分でコンテンツを持っている人」や「自らがウェブのデザイン、構築、更新、管理までをする人」という人物像が浮かび上がってくる。クリエイター、店主などの個人事業主、アマチュアスポーツチームのメンバー、小さな会社のIT係、NPOの広報担当者などなど。とはいえ規模の小さなサイトだけではない。BiNDは大企業のウェブページ制作に利用された実績もある。ただし、その場合もウェブ制作を外注するのではなく、社内で作って運用していくという方針に適うソフトとして選定されている。　こうした「自分たちのウェブをクリエイトしていく情熱を持った人たち」をBiNDの開発元であるデジタルステージでは「ウェブコンポーザー」と呼び、支援していくことを表明している。2010年８月からは、BiNDの使い方を含めた、ウェブ作りのさまざまなレクチャーを行うネット上のフリースクール「ウェブコンポーザー学校」を

開設している。Twitterアカウント@webcomposerと@dsHiranoをフォローすることで無料で参加できる。

けてくれるツールがBiNDと言える。

本当に必要なのは「コンテンツ」

　実際にBiNDでウェブを制作するとなると、必要になるのは、「コンテンツ」「パソコンとインターネット接続環境」「BiND4」、以上だ。　もう少し詳しく言うと、コンテンツとは、すなわち自分がウェブで公開したいと思っているものやこと。これがなければ始まらない。パソコンおよびインターネット接続環境もウェブサイトを作るのだから必要となる。　そしてBiND4。BiND4には、ウェブページ作成機能、画像編集機能、FTP機能、そして「BiND Server」というBiNDに最適化されたサーバーも用意されている（もちろん一般的なウェブページ用サーバーにも対応している）。必要なほかのソフトといえばウェブブラウザぐらいだが、これは誰でも無料で利用できるのはご存知の通りだ。　こうした「オールインワン」で「シームレス」な作業環境は、ウェブ制作を行う上で時間やコストを有効に使うのに大きく役立つはずだ。

「ウェブコンポーザー学校」のサイト（http://www.digitalstage.jp/wcs/）。

1 基本操作Lesson

014

-2

ここでは、ウェブページの構造をBiNDではどのように扱っているかを説明する。入れ子構造の要素にして扱うことで、カスタマイズが簡単にできるようになっている仕組みを確認したい。

サイトの構造はサイトマップで編集

　ウェブサイトは、もともと階層になった構造を持っているので、BiNDでも当然ウェブサイトを階層化して扱っている。その構造は［サイトシアター］の［サイトマップ］で確認できる。サイトの下には［コーナー］があり、その中に［ページ］があるという構造になっている。この［コーナー］は、ウェブサーバー上での「ディレクトリ」という階層に相当するものだ。このサイトの構造は、BiNDの［サイトマップ］を使えば、ドラッグ＆ドロップやボタンクリックといった簡単な操作で追加や削除、順番の変更ができる。

エリアにブロックを配置してページを編集

　BiNDのページの中身を編集するツールの１つ［サイトエディタ］では、［ページ］の中を［エリア］と呼ばれる部分に分けている。［エリア］には、［ヘッダ］［ビルボード］［メイン］［サイドバー］［フッタ］といった種類がある。現在のウェブページの要素を分析すると、ページの最上部（［ヘッダ］）には、サイトのロゴやトップページへのリンクなどを置くといったように、「場所」によってページ内での役割がおよそ決まっている。BiNDは、テンプレートによって、そうしたエリアに入れる要素をあらかじめ用意して、そうした「作法」に沿ったウェブ作りをガイドするようになっている。ただし、BiNDはあくまでガイドに留まる。［ヘッダ］の部分にロゴしか配置できないということはなく、写真や長い文章などを置くこともユーザーは自由にできる。　そのようにページの中身を自由にカスタマイズできるのは、BiNDが［ブロック］という仕掛けを備えているからだ。［ブロック］とは、テキストや画像などのウェブで表示する要素をひと固まりにまとめたもので、BiNDではこの［ブロック］を単位にしてコンテンツを編集していく。［サイトエディタ］では、［エリア］に１つあるいは複数の［ブロック］を配置できる。［ブロック］は、順番を入れ替えるだけでコンテンツ

の並びを変えたり、ひとまとめに追加・削除したり、配置する［エリア］を変えることが簡単にできる。

パーツを使って充実したコンテンツを実現

　［ブロック］の内容は、［ブロックエディタ］というツールで編集する。［ブロック］には、テキストと、BiNDが用意している［パーツ］という要素を配置していく。［パーツ］は、画像、動画、リンク、見出し、スライドショー、ブログ、地図、ショッピングカートとさまざまなものがある。通常のウェブ制作では、ページにさまざまな要素を組み込むのにHTMLコードの記述などの技術的な知識が要求される。それがBiNDならば、［ブロックエディタ］の［パーツ一覧］からボタンをクリックするだけで、簡単に自分のウェブページのコンテンツにできる。このパーツの種類の豊富さが、BiNDで作るページのコンテンツのリッチさを生んでいると言っていいだろう。

複雑なウェブの構造をBiNDがわかりやすく変換

　以上のようなBiNDのウェブ作りの仕組みは一見すると独自なものに思えるかもしれないが、実はウェブの標準的な技術から専門的な難しさを取り除いて、理解しやすくした結果であって、特殊な処理をしているわけではない。その証としては、BiNDで作ったウェブページは、何も設定しなくてもウェブの標準化団体W3Cが策定した基準「XHTML 1.0 Transitional」に合格するような設計になっている。またInternet ExplorerやFireFox、Safariなどの主要なウェブブラウザで読み込んで比べても、フォントなどの違いはあれど、大きなレイアウトや見た目が異ならないように工夫されている。　部分部分に応じた操作を繰り返していくだけで、業界標準のウェブを作ることができるというのが、BiNDの最大の特徴と言えるだろう。

ウェブページの構造とBiNDの仕組み

015

1基本操作





6応用＆運用


a付録

●サイトエディタ

［サイトマップ］：サイトの構造を編集する

［ヘッダ］：タイトルロゴやメニューなどを配置する［エリア］。各ページ共通の要素を配置する

［ビルボード］：ページのメインビジュアルを配置する［エリア］

［コンテンツ：メイン］：記事など、ページの主なコンテンツを配置する［エリア］

［フッタ］：コピーライト表記などを挿入。各ページ共通の要素を配置する［エリア］

［コンテンツ：サイド］：記事の見出しリスト、リンク集、メニューなど補助的な用途に使う［エリア］

●ブロックエディタ

［テキスト］と［パーツ］：文字とさまざまな要素を組み合わせてブロックの中身を構成していく

［パーツ一覧］：豊富な［パーツ］群によって、さまざまなコンテンツを簡単な手順で作成できる

016

基本操作Lesson1-3

完成

BiNDでのウェブ制作の一連の作業を覚えるには、とにかく1つウェブサイトを作ってみるのが、最も速い方法だ。手順は決して難しくないので、まずはここでの説明をなぞりつつ作り始めてみてほしい。

BiNDで実際にウェブサイトを作る

ここでは、BiNDによるウェブ制作に実際に取りかかる。必要なのは、ウェブサイトのテキストや写真といったコンテンツの素材だが、まずは手近にある材料を使って作り始めて、手順を覚えていってもいいだろう。BiNDは、あとから素材などを入れ替える作業も、簡単に行えるからだ。作業は、ま

ずテンプレート選びから始める。まったくの空白のページから作り出すことも可能だが、BiNDにあらかじめ用意されたテンプレートから作り出すほうが作業効率がずっといいはずだ。今回は、左下のテンプレートを選んでから、右下のサイトを作るまでの流れをたどっていく。

テンプレートからウェブサイトを作る

テンプレート

テンプレートから作り替えていく箇所・タイトルロゴをオリジナルにする・トップページ用のスライドショーを作る・記事のコンテンツを作成する・サイトの背景色などのデザインを変更する

017





6応用＆運用


a付録

基本操作

1

テンプレートのカテゴリーを選択する

［新規サイトを作る］の［カテゴリーエリア］ボタンをクリックするなどして、テンプレートのカテゴリーを選択する。BiND4では標準で、4種類のカテゴリーが用意されている。

Step 2

サイトシアターの［新規サイトを作る］を開く

BiND4を起動すると表示される［サイトシアター］で、画面上段にある［新規サイトを作る］ボタンをクリック。

Step 1各カテゴリーごとに色や飾りが異なるバリエーションが用意されているので、その中から好みのテンプレートを選び、［作成］ボタンをクリック。

バリエーションの中からテンプレートを選ぶ

Step 3

サイト作成の処理が完了すると、ひと通りの要素がそろったウェブサイトが出来上がる。これを基に、自分のサイトを作成していく。

テンプレートサイトの完成

①テンプレートを選択

②［作成］ボタンをクリック

Step 4

［新規サイトを作る］ボタンをクリック

①［カテゴリーエリア］ボタンを選ぶ

②カテゴリーを決める

③［決定］ボタンをクリック



①サイト作成の処理が行われる

②テンプレートを基にしたサイトの完成

サイトの基になるテンプレートを選択〈サイトシアター〉1 next step

018

Lesson1-3 基本操作

サイトの名前を設定する

［設定］画面が表示されたら、［サイト設定］を押して、［サイト名］を入力。［OK］ボタンをクリック。

Step 2

サイトの設定画面を開く

まず、サイト全体の名称を設定する。［サイトエディタ］画面下部にある［設定］ボタンをクリック。

Step 1

［設定］ボタンをクリック

サイトの構成を考えてページを追加/削除する〈サイトエディタ〉2

テンプレートの中で必要のないページを、［サイトエディタ］左側の［サイトマップ］で選択。画面左下にある［削除］ボタンをクリックすると表示される確認ダイアログで［OK］ボタンを押す。

不要なページを削除するStep 3

①必要のないページを選択

②［削除］ボタンをクリック

コンテンツを数ページに分けるなど、同じレイアウトのページが複数必要になる場合はテンプレートのページをコピーする。複製元のページを［サイトマップ］で選択し、画面左下の［複製］ボタンをクリックする。

増やしたいページを複製するStep 4

①複製元のページを選択

②［複製］ボタンをクリック

Step4で作ったページ名は「xxxxxxx Copy」（×xxxxxxxは元となったページの名前）となっているので、変更する。［サイトエディタ］の［設定］の［ページ設定］で［ページ名］を入力。また［ファイル名］もわかりやすいものに変更する。入力したら［OK］ボタンをクリック。

複製したページのタイトルを設定する

Step 5

①［サイト設定］をクリック

②［サイト名］を入力

③［OK］ボタンをクリック


③［ページ名］を入力 ④［ファイル名］を入力

①［設定］ボタンをクリック ⑤［OK］ボタンを押す

②［ページ設定］をクリック

019





6応用＆運用


a付録

基本操作

1

選択したブロックと同じブロックを追加したい場合は、［複製］ボタンをクリック。すると、複製元のブロックの下に、コピーされたブロックが挿入される。

point

必要のないブロックを削除

テンプレートで用意されたブロックの中で必要のないものを削除する。不要なブロックをクリックして［削除］ボタンを押す。確認ダイアログで［OK］をクリックする。

Step 2

サイトエディタを編集モードに切り替える

［サイトエディタ］の画面下部にある［このページを編集する］ボタンをクリックして編集モードに切り替える。すると、ページのプレビューが、ブロック単位がわかる点線の囲みとブロックのエリア名が表示される。

Step 1コンテンツを加えたい部分などにブロックを追加する方法は、そのエリアのブロックを選択し、［追加］ボタンをクリック。すると選択したブロックの下に、何も入っていない新しいブロックが作られる。

ブロックを追加するStep 3

追加されたブロックを選択して、［上へ］／［下へ］ボタンをクリックしてブロックの順番を入れ替える。

ブロックを移動させるStep 4

③［OK］をクリック

コンテンツに応じてブロックを追加/削除する〈サイトエディタ〉3 next step

［このページを編集する］ボタンをクリック

①不必要なブロックを選択 ②［削除］ボタンをクリック

②［追加］ボタンをクリック

①ブロックを追加したいエリアのブロックを選択

①追加されたブロックを選択

②［上へ］ボタンをクリック

③ブロックが上に移動する

ブロックのエリア名の表示

ブロック単位がわかる点線の囲み

020


ブロックテンプレート画面を開く

［ブロックエディタ］でブロックを開いたら、編集画面の下部にある［ブロックテンプレートを開く］をクリックする。

Step 2

コンテンツを挿入するブロックを開く

［サイトエディタ］の［サイトマップ］で編集したいブロックを選択して［編集］ボタンをクリック。

Step 1

①ブロックを選択

ブロックにテンプレートを挿入する〈ブロックエディタ〉4

［ブロックエディタ］に戻って、編集画面に記事のテキストや画像が挿入されているのを確認する。

ブロックエディタに記事の要素が挿入されたのを確認

Step 4

テンプレートによって挿入されたテキストや画像

［ブロックテンプレートを開く］をクリック

［ブロックテンプレート］画面の左側のジャンルリストから［標準:02 記事］をクリック。記事のテンプレートが表示されたら、好みの記事レイアウトを選択。［適用］ボタンをクリックすると表示される確認ダイアログで［OK］ボタンをクリック。

コンテンツのテンプレートを選ぶStep 3

①［標準:02 記事］をクリック

③［適用］ボタンをクリック②［編集］ボタンをクリック

②［ノーマル記事（1段）］を選ぶ

④［OK］ボタンをクリック

021





6応用＆運用


a付録

基本操作

1

テキストを入力する

［ブロックエディタ］で、タイトルや見出し、本文などのテンプレートに用意されている仮テキストを書き換える。不要なテキストは削除する。

Step 1［アイテムブラウザ］が表示されたら、［フォルダの選択］ボタンをクリックして使用する画像が保存されているフォルダを指定。さらに使用する画像を選んで［適用］ボタンをクリックする。ほかの画像も同様に選択する。

配置する画像を指定するStep 3

ブロックの中にコンテンツを組み込む〈ブロックエディタ〉5 next step

［ブロックエディタ］でテンプレートで用意された画像のサムネールをクリック。すると画面右側が［画像パーツ設定］に切り替わるので、［開く］ボタンをクリックする。

画像の設定を行うStep 2テキストの編集と画像の割り当てが終わったら、［ブロックエディタ］の［適用］ボタンをクリックして［サイトエディタ］で編集結果を確認する。これらの作業を各ブロックで繰り返していくことでコンテンツが出来上がる。

［適用］ボタンをクリックして変更を保存する

Step 4

テキストを入力する

②［開く］ボタンをクリック

①画像のサムネールをクリック

①［フォルダの選択］ボタンをクリックしてフォルダを選ぶ

②画像を選択

③［適用］ボタンをクリック

記事の出来上がり

022


SHiFTスライドショーパーツを挿入する

［ブロックエディタ］でブロックを開いたら不要なコンテンツを削除。次に、画面右側の［パーツ一覧］から［SHiFTスライドショーパーツ］ボタンをクリックする。

Step 2

トップページのビルボードにあるブロックを開く

［サイトマップ］でトップページを選択。編集モードで、［ビルボード］エリアのブロックを選択し、［編集］ボタンをクリックする。

Step 1［SHiFT］が開き、［SHiFTテンプレート］を選択する画面になったら、画面左側のカテゴリーリストから［ビルボード用（825px／HTML5専用）］を選択。［ポラロイド（コルクボード）］をクリックして［OK］ボタンを押す。

SHiFTのテンプレートを選択するStep 3

トップページに写真を見せる仕掛けを配置する〈SHiFT for WebLiFE*〉6

②［編集］ボタンをクリック


［SHiFTスライドショーパーツ］ボタンをクリック

Finder（Mac）やエクスプローラ（Windows）でトップページに掲載したい写真を選択。［SHiFT］画面左側のエリアにドラッグ＆ドロップすると、写真が登録される。

挿入する画像を登録するStep 4

①［ビルボード用（825px／HTML5専用）］をクリック

③［OK］ボタンを押す

②［ポラロイド（コルクボード）］をクリック

①画像をドラッグ＆ドロップ

②画像が登録された

023





6応用＆運用


a付録

基本操作

1画像の大きさや切り取り位置を調整する

画像を表示する大きさや切り抜き位置が適切でない場合は、［SHiFT］画面の［画像編集］ボタンをクリック。［画像エディタ］画面が開いたら、画面の下部にあるスライダーを使って画像の表示倍率を変更したり、写真をドラッグして切り取る部分を調整する。

Step 5各画像をチェック、調整が完了したら［保存］ボタンをクリック。

すべての画像を調整して、保存する

Step 6

next step

［ブロックエディタ］で［適用］ボタンをクリック。［サイトエディタ］で［ページの編集を終える］ボタンをクリックしてプレビュー表示にして確認する。インスタント写真風のフレームに収められた写真が表示される。写真１枚１枚はドラッグで移動させることができ、ダブルクリックするとまっすぐに向きを変える、といった仕掛けのトップページができた。

適用してプレビューStep 7

①［画像編集］ボタンをクリック

②拡大率を変更

③画像をドラッグして切り取る位置を調整

［保存］ボタンをクリック

①［適用］ボタンをクリック

②［ページの編集を終える］ボタンをクリックしてプレビュー

③インスタント写真風のフレームの写真が表示される

024


ロゴの画像を選択してSiGNを起動

［ブロックエディタ］が開いたら、ロゴ画像のパーツを選択。画面右側の設定エリアにある［SiGNを起動する］ボタンをクリック。

Step 2

サイトのロゴを作る〈SiGN for WebLiFE* 3〉7

［SiGN］が起動したら、画面上部にある［テンプレートを選ぶ］をクリック。［テンプレート一覧］が表示されたら、画面左側の［カテゴリー］から［タイトル］をクリック、ロゴの基になるテンプレート（［Trip:サイトタイトル］）を選択。［作成］ボタンをクリックする。

SiGNのテンプレートを選ぶStep 3ロゴのあるブロックを選択

［サイトエディタ］を編集モードに切り替えて、［ヘッダ］エリアにある、ロゴが配置されたブロックを選択。［編集］ボタンをクリック。

Step 1

①ロゴのあるブロックを選択


①ロゴ画像のパーツを選択

②［SiGNを起動する］ボタンをクリック

①［テンプレートを選ぶ］をクリック

②［タイトル］をクリック ③［Trip:サイトタイトル］を選択

④［作成］ボタンをクリックする

025





6応用＆運用


a付録

1基本操作

ロゴの編集が完了したら［SiGN］で［保存］ボタンをクリック。［ブロックエディタ］の［適用］ボタンをクリックしてから、［サイトエディタ］の［ページの編集を終える］ボタンを押してプレビューする。

ロゴを保存してプレビューStep 7

next step

テンプレートが開いたら、［TEXT］枠をクリック。テンプレートのテキストを自分のサイトのタイトルに書き換える。

テキストを編集するStep 4

文字の色を変更する

テキストを選択した状態で、カラーパレットボタンをクリックして、色を選ぶ。これで文字の色が変更される。

Step 5

［TEXT］枠をクリックし、画面下部の［位置］十字ボタンを操作して、ロゴの配置を調整する。配置が決まったら［OK］ボタンをクリック。

テキストの位置を調整するStep 6

①［TEXT］枠をクリック

②タイトルを入力

②カラーパレットボタンをクリック

③色を選択

①テキストを選択

［位置］十字ボタンで、ロゴの位置を調整する

［ブロックエディタ］で［適用］した後、［サイトエディタ］でプレビューする

026


テーマの変更だけで、以下のようないろいろなデザインのページを作り出せる。デザインのバリエーション例memo

［テーマ］には、BiNDに登録されているテンプレートのデザインが用意されている。P.177～180のテンプレート集に掲載されているサイトのデザインが利用可能だ。

［テーマ］を変更すると、同じコーナーのすべてのページのデザインが変わる。コーナーが違うと変更の対象にならない。

point

デザインを変更してバリエーションを作る〈サイトエディタ〉8

デザイン変更の確認ダイアログが表示されるので［OK］をクリック。［閉じる］ボタンをクリックして、［サイトエディタ］で変更を確認する。コンテンツは元のままで、背景の色や画像、スキンおよび余白項目が一括で変更されている。

デザインの変更を確認するStep 2テーマを選択する

［サイトエディタ］の下部にある［テーマ］ボタンをクリックすると、プレビュー画面の下半分に、サイトデザインがサムネールになった［テーマ］の一覧が表示される。カテゴリーを選んでから、テーマを選択して［適用］ボタンをクリックする。

Step 1

①［テーマ］ボタンをクリック

②［カテゴリー］の［Preset B2］を選択

③［Camera［Green］］を選択

④［適用］ボタンをクリック［閉じる］ボタンをクリック

027

1基本操作





6応用＆運用


a付録

基本操作

1

［サイトエディタ］の［サイトマップ］でページを選択したら、画面下部にある［レイアウト］ボタンをクリック。表示されるメニューからレイアウトを選択。

ページを選択してレイアウトを選択Step 1［サイトエディタ］のプレビューモードで、レイアウトの変更を確認する。

レイアウトの変更を確認するStep 2

ページのレイアウトを変更する〈サイトエディタ〉9 next step

①ページを選択 ②［レイアウト］ボタンをクリック

③［A-3 I型ビルボード+サイド+メイン］を選択

右側にあったサイドバーが左側に移動している

BiNDでは、［レイアウト］ボタンのメニューから選ぶだけのワンタッチで、ページレイアウトを変更することができる。

レイアウトのバリエーション全パターン

memo

A-1 I型ビルボード+メイン

B-2 横可変型ビルボード+サイド+メイン+サイド

コンテンツの左右両側にサイド

バーあり。ブラウザの表示幅に

合わせてメインコンテンツの幅

が広がる。

コンテンツにサイドバーなし。

ブラウザの表示幅を広げても

コンテンツの幅は変わらず、中

央に配置される。

A-2 I型ビルボード+メイン+サイド

B-3 横可変型ビルボード+メイン+サイド

コンテンツの右側にサイドバー

あり。ブラウザの表示幅に合わ

せてメインコンテンツの幅が広

がる。


あり。ブラウザの表示幅を広

げてもコンテンツの幅は変わら

ず、中央に配置される。

A-3 I型ビルボード+サイド+メイン

C-1 左寄せ型ビルボード+サイド+メイン

コンテンツの左側にサイドバー

あり。ページが左寄せに固定さ

れる。ブラウザの表示幅を広

げても横幅は変化しない。


あり。ブラウザの表示幅を広

げてもコンテンツの幅は変わら

ず、中央に配置される。

B-1 横可変型ビルボード+サイド+メイン

C-2 左寄せ型ビルボード+メイン+サイド


あり。ページが左寄せに固定さ

れる。ブラウザの表示幅を広

げても横幅は変化しない。


あり。ブラウザの表示幅に合わ

せてメインコンテンツの幅が広

がる。

028


ウェブ上のサービスをページに組み込む〈SYNC for WebLiFE* 3〉10

ウェブサービスを組み込むブロックを開く

ウェブサービスを組み込みたいブロックを［ブロックエディタ］で開く。画面右側の［パーツ一覧］の下段にある［ウェブサービス系パーツ］のいずれかをクリックする。

Step 1

②［ウェブサービス系パーツ］を選択

ウェブサービスとの連携を提供する［SYNC］を初めて起動した場合、［ようこそSYNCへ!］という概要を説明する画面が表示される。［次へ］ボタンをクリック。

［SYNC］を開くStep 2

［利用規約］が表示されたら、最後まで読んで［同意する］にチェックを入れて［次へ］ボタンをクリックする。初期設定が完了となる。

利用規約に同意するStep 3

組み込み可能なサービス一覧

初期設定が完了の表示が出たら［次へ］ボタンをクリック。すると、各サービスの概要が表示される。そこから選んでページに組み込む作業を進めることができる。参照 Lesson 4

組み込むサービスを選択するStep 4

①［同意する］にチェックを入れる ②［次へ］ボタンをクリック

①［ウェブサービス系パーツ］一覧をクリック

［次へ］ボタンをクリック

029

1基本操作





6応用＆運用

7モバイルサイト &ショッピングサイト

a付録

基本操作

1

完成したウェブページをウェブブラウザで確認する〈サイトエディタ〉11 next step

複数のウェブブラウザで同じページを読み込んだ結果。フォントの種類や空白スペースの幅以外に大きな差は見られなかった。

ブラウザが違っても表示は変わらない

memo

［サイトエディタ］の下部にある［▼］ボタンをクリックしてメニューを表示する。メニューには、初期設定のウェブブラウザ(MacならSafari、WindowsならInternet Explorer)が登録されている。［ブラウザを登録する］を選択すると、標準以外のウェブブラウザを登録することができる。

確認に使用するブラウザを登録するStep 1

［ブラウザを登録する］を選択

［▼］ボタンをクリックすると表示されるメニューから、ウェブブラウザを選択する。

ブラウザを選択するStep 2

ウェブブラウザを選択

［プレビュー］ボタンをクリック。これを繰り返して、複数のウェブブラウザでの表示を見比べて確認する。

ブラウザでプレビューするStep 3

［プレビュー］ボタンをクリック

●Safari 5（Mac）

●FireFox 3.6（Mac）

●Internet Explorer（Windows）

030


サーバーを設定してアップロード〈サイトエディタ〉12

サイトエディタのサーバー設定を開く

［サイトエディタ］の［設定］ボタンを押して、［設定］画面上部の［サイト設定］をクリックし、［サーバー設定］を選ぶ。さらに［サーバーの種類］から［BiNDサーバー］を選択したら、［BiNDサーバーって何？もしくは新規入会する］をクリックする。

Step 1

ウェブブラウザが起動して［BiND Server｜BiND for WebLiFE* 4］というウェブページが開くので［新規会員登録］をクリックする。

ブラウザでBiND Server申し込みの手続きを始める

Step 2

［新規会員登録｜BiND Server Control Panel］というページが開いたら、ここでも［新規会員登録］をクリックする。

新規会員登録ページを開くStep 3

続いて「BiND Server使用許諾契約書」が表示されるので［同意する］にチェックを入れ、デジタルステージID（デジタルステージのMyPage ServiceのアカウントID）とパスワード、BiNDのパッケージに入っていた用紙に記載されている「BiND Server シリアルNo」を入力して［入力内容を確認する］ボタンをクリックする。

デジタルステージIDなどの情報を入力

Step 4


④［BiNDサーバーって何？もしくは新規入会する］をクリック

［新規会員登録］をクリック

②［サーバー設定］を開く

③［サーバーの種類］で［BiNDサーバー］を選択

［新規会員登録］をクリック

デジタルステージIDを入力

パスワードを入力

BiND Server シリアルNoを入力［入力内容を確認する］ボタンをクリック

031

1





6応用＆運用


a付録

1基本操作

次にデジタルステージのユーザー登録に基づく情報が表示されるので、内容に間違いがないことを確認。「FTPログインID」と「FTPパスワード」が未設定の場合は、それらを入力。入力した内容を確認して［次へ］をクリックする。

入力した内容を確認Step 5

登録が完了したら［BiND Server Control Panel］でログインする。［BiND Server Control Panel］画面の左側にある［FTPアカウント情報］をクリックして、アップロードするサーバーのコースを選択。サーバー設定に関する情報が表示されるので確認する。

BiND ServerにログインしてFTPサーバーの情報を確認

Step 6

［サイトエディタ］の［サーバー設定］で［サイトURL］、［FTPホスト］、［ユーザー ID］と［パスワード］を入力。ディレクトリを指定する場合は、［サーバーディレクトリ］欄に入力し、［サイトURL］の後ろにディレクトリ名を加えておく。入力し終わったら［テスト開始］をクリックして問題がなければ［OK］ボタンをクリック。

サーバーの設定を行うStep 7

［サイトエディタ］で［アップロード］ボタンをクリックして、サーバーにデータをアップロード。アップロード完了後、ウェブブラウザでウェブページを開いて確認。これでウェブページの完成だ。

アップロードを実行Step 8

［次へ］をクリック

［FTPアカウント情報］をクリック

アップロードするサーバーのコースを選択

①［サイトURL］を入力

②［FTPホスト］を入力

③［ユーザーID］を入力

⑤ディレクトリを指定

④［パスワード］を入力

⑤［テスト開始］をクリック

⑥［OK］ボタンをクリック

①［アップロード］ボタンをクリック

②ウェブブラウザで確認

032

基本操作Lesson1-4

［サイトシアター］

ユーザーインターフェース解説

［ヘルプ］ボタンクリックするとウェブブラウザが開いて、オンラインマニュアルのページが表示される

［サポート］ボタンクリックするとウェブブラウザが開いて、BiNDのサポート情報のページが表示される

［チュートリアルビデオ］ボタンBiND4に関する情報やチュートリアルのビデオが閲覧できる

［マイサイトを編集する］ボタン保存済みのサイトを［サイトエディタ］で開く場合、ここをクリックして選択して［決定］ボタンを押す

［新規サイトを作る］ボタンテンプレートから選んで新規サイトを作成する際にクリックする（P.17）

［カテゴリーエリア］ボタンテンプレートのジャンルを切り替える。インストールされているテンプレートによってボタンの数は変化する

033





6応用＆運用


a付録

1基本操作

ここでは、BiND4の操作を解説するうえで頻出するボタン類などの名称を示して、それぞれについて簡単に説明していく。

［マイサイトを編集する］画面

［マイサイト一覧］自分で作ったサイトが、トップページのサムネールで一覧表示される

［決定］ボタン編集するサイトの選択を決定する

［削除］ボタンサイトのデータを削除する

［一覧に戻る］ボタン［マイサイト一覧］に表示を戻す

［編集］ボタンサイトデータを［ブロックエディタ］で開く

［サイトフォルダを開く］ボタンサイトのデータが保存されているデータのフォルダを開く

［バックアップを作成する］サイトのデータのバックアップを作成する。バックアップしたデータは、右側の［▼］ボタンをクリックすると表示されるメニューから呼び出す

［複製］ボタンサイトのデータの複製を作る。作られた複製サイトは

［マイサイト一覧］に登録される

034

1Lesson基本操作

Lesson1-4ユーザーインターフェース解説

［サイトエディタ］［ホーム］ボタンサイトのトップページに移動する

[◀]/[▶]ボタン[サイトエディタ]の表示を、1つ前または1つ後のページに移動する

［サイトシアターに戻る］ボタン［サイトシアター］に戻る際にクリックする

［サイトマップ］サイトのページ構成を確認。ページやコーナーの公開／非公開の設定も行う

［レイアウト］ボタンクリックすると表示されるメニューで、ページのレイアウトを変更する（P.56）

［削除］ボタンサイトマップで選択したコーナーまたはページを削除する際にクリック（P.18）

［追加ページ］ボタンクリックすると表示されるメニューから、タイプを選んで新しいページを追加する（P.54）

［新規コーナー］ボタン［コーナー］（ディレクトリ）を追加する際にクリックする

［複製］ボタンクリックすると、サイトマップで選択したコーナーやページを複製する（P.18）

［テーマ］ボタンクリックすると、サイト全体のデザイン（テーマ）を選択する画面が開く（P.82）

［設定］ボタンクリックすると設定ウィンドウが開く。［サイト設定］［コーナー設定］［ページ設定］の画面を切り替えて設定する

035





6応用＆運用


a付録

1基本操作

［サイトエディタ］

［ページタイトル］［ページ設定］で設定したページタイトルが表示される

［更新］ボタンクリックすると、［サイトエディタ］で開いているページをリロードする

［このページを編集する］／［ページ編集を終える］ボタンプレビューモードで［このページを編集する］をクリックすると、ページの編集モードに切り替わり、またボタン名が［ページの編集を終える］に変わる。さらに［ページの編集を終える］をクリックすると元のプレビューモードに戻る（P.23）

［モバイルプレビュー］ボタンモバイルサイトを簡易的にシミュレートする

［モバイルシミュレーター］が起動する（P.173）

［プレビュー］ボタンクリックするとウェブブラウザが起動し、［サイトエディタ］で開いているページが表示される。プレビューに使用するウェブブラウザは、このボタンの横の［▼］ボタンをクリックして変更する

［アップロード］ボタン作成したサイトをアップロードする（P.31）

036

1Lesson基本操作-4


［サイト設定］（サイトエディタ）

［コーナー設定］（サイトエディタ）

［自動バックアップ設定］タブサーバーにサイトのBiNDデータを自動的にアップロードしてバックアップする機能を設定する（P.154）

［サイト情報］サイトの制作が開始された日時、最後の更新がアップロードされた日時、アップロードされた回数が表示される

［サーバー設定］タブサイトをアップロードするサーバーの情報を入力する（P.31）

［アクセス解析設定］タブGoogle Analyticsの解析用コードを入力する（P.147）

［コーナー名］欄コーナーの名前を設定する

［コーナー全体を公開する／公開しない］コーナー単位で公開／非公開を設定する。コーナーがない場合は、サイト全体の設定を変更する（P.156）

［ラベル］ページの制作状況を示すラベルアイコンを設定する（P.157）

［コーナーのフォントの設定］コーナー内のページで表示に使用するフォントサイズと書体を設定する

［検索ロボット巡回設定］検索エンジンのロボットが巡回して情報を取得する際の設定を行う。コーナー全体に同じ設定を行える（P.144）

［サイト名］欄サイトの名前を設定する（P.18）

［Favicon］ファビコンを設定する

WebClipアイコンiPhoneや iPad、iPod touchでホーム画面にウェブページへのブックマークボタンを配置したときにアイコンに使われる画像を設定する。

［ディレクトリ名］ディレクトリの名前を設定する。ここで設定した名前は、URLのディレクトリ名に使用される

037

1基本操作





6応用＆運用


a付録

［ページ設定］（サイトエディタ）

［設定］（ブロックエディタ）

［ページタイトル］ウェブブラウザのタイトルバーに表示される名前を入力する（P.18）

［ファイル名］ページのファイル名を指定する。ここで設定した名前は、URLのファイル名に使用される

［ラベル］ページの制作状況を示すラベルアイコンを設定する（P.157）

［ページ名］ページの名前を設定する

［このページを公開する／公開しない］ページ単位で公開／非公開を設定する（P.156）

［ページデザイン］ページ全体やエリアごとに背景色、背景画像、背景スキンを設定する

［ページレイアウト］ページのレイアウト構造を変更する

［スクリプトと詳細設定］ページの［head］タグ内にタグを追加したり、JavaScriptを追加する。また文字コードやリフレッシュ、自動転送などの設定を行う（P.139）

［検索ロボット巡回設定］検索エンジンのロボットが巡回して情報を取得する際の設定をページ単位で行う（P.144）

［ブロックレイアウト］ブロックのレイアウトパターンを設定する（P.52）

［オプション］［ブロックレイアウト］のオプションを設定する。［ブロックレイアウト］の種類に応じて設定内容が変化する

［携帯ではこのブロックを非表示にする］モバイルサイトに変換する際に、ブロックを表示しないように設定する

［ブロックスキン］文字や背景を組み合わせたプリセット［ブロックスキン］を変更する（P.86）

［ブロックフレーム］ブロックの周囲の枠およびその内側の表示スタイルを設定する（P.86）

［背景画像］ブロックの背景画像を設定する

［背景色］ブロックの背景を設定する

［行間＆余白設定］ブロック内のテキストの行間隔の設定、およびブロックの周囲にある余白の幅を設定する（P.64）

038

1Lesson基本操作

Lesson1-4ユーザーインターフェース解説

［ブロックエディタ］［行の位置］テキストや画像の行での配置を、右寄せ、中央揃え、左寄せのいずれかに設定する

［#アンカー名］ページ内を移動するためのアンカーの名前を設定する

［リスト］テキストをリストにする。また、メニューに指定する設定も行う

［見出しパーツ］［SiGN for WebLiFE］で作成された見出しパーツ（P.80）

［フォント］フォントの種類や大きさ、色を設定する

［装飾］フォントをボールドやイタリックにしたり、下線や取り消し線を加える［画像パーツ］

画像を張り込んだパーツ（P.48）

［段落のスタイル］の表示段落にスタイルを設定すると、行頭のマークやカコミや網掛けによってその種類が表示される（P.142）

［段落のスタイル］［本文］［タイトル］［大見出し］［小見出し］などのテキストのスタイルを設定する。スタイルを設定すると、行頭にその種類を表すマークが表示される

［編集］クリックすると「編集モード」に切り替わり、ブロック内のテキストやパーツが編集できるようになる

［リンクパーツ］ほかのページやアンカーへのハイパーリンクのパーツ（P.62）

［ブロックテンプレートを開く］ボタンクリックすると、ブロックのテンプレートを選択する画面が表示される

［エディタの背景を反転］テキストの色を白に指定した場合に文字を見えるようにするために、エディタの背景をグレーにする

039





6応用＆運用


a付録

1基本操作

［ブロックエディタ］

［閉じる］ボタンブロックエディタを終了して閉じる

［適用］ボタンクリックすると、編集内容を保存してページに反映させる。適用せずに［閉じる］ボタンをクリックすると、編集内容は破棄される

［パーツ一覧］（設定エリア）画像やリンクなどのパーツがカーソル位置に挿入される。パーツ一覧が表示されるのは何も選択していないときか、テキスト選択時。編集画面で何らかのパーツを選択すると、その設定を行う画面に切り替わる

［区切線］ブロック内のテキストや画像の間を区切る線を挿入する

［分割］コンテンツを分割したいときや段組みの区切りを入れいたときに挿入する

［共有］ブロックの共有を有効にする（P.55）

［回込解除］画像に回り込んで配置されているテキストに挿入して、それ以降のテキストを回り込まないようにする

［元に戻す］左のボタンをクリックすると、直前に行った操作を取り消して元の状態に戻す。右のボタンをクリックすると取り消した操作をやり直す

040



［SiGN］

［PREV］［NEXT］ボタンテンプレートに用意されているバリエーションを切り替える

［SHAPE］枠色を付けることのできるエリアの編集を行う

［テンプレートを選ぶ］クリックすると、SiGNのテンプレート一覧画面を表示する

［IMAGE］枠見出しに配置する画像の選択・編集を行う（P.68）

［TEXT］枠見出しに配置するテキストの入力・編集を行う（P.69）

［ウォーターマーク設定］ボタンSiGNで作った画像に、透かし画像を入れる設定を行う

［透明度］スライダー／［画質］スライダーPNGならば透明度の調整、JPEGならば画質の調整を行う

［バリエーション］バリエーションの総数と、表示しているものが何番目のものかを表示

［ファイル形式］作成した見出し画像の書き出し形式を［JPEG］［PNG］のいずれかを指定する。半透明の画像を作る場合は［PNG］を選ぶ（P.78）

［背景色］背景（画像や文字の配置されない部分）の色を設定する

［キャンセル］ボタン作成した画像を保存せずに

［SiGN］を終了する

［保存］ボタン作成した画像を保存して

［SiGN］を終了する

041

1基本操作





6応用＆運用


a付録

［TEXT］編集画面（SiGN）

［エフェクト］クリックすると、［エフェクト一覧］画面を表示する。40種類のエフェクトから選択できる（P.181）

［回転］文字を傾ける設定をする

［行間］行間を調整する

［文字間隔］文字と文字の間隔を調整する

［ブレンド］文字と画像の合成方法を設定する

［位置］十字ボタン文字の配置を微調整する

042



［拡大／縮小］スライダー画像を拡大／縮小する（P.68）

［フィット］ボタン画像サイズの横幅、あるいは高さでぴったりそろう大きさまで元画像を拡大／縮小する

［回転］画像を傾ける設定をする

［エフェクト］クリックすると、［エフェクト一覧］画面を表示する。96種類のエフェクトから選択できる（P.182）

［位置］十字ボタン画像の配置を微調整する

［IMAGE］編集画面（SiGN）

043

1基本操作





6応用＆運用


a付録

［SHAPE］編集画面（SiGN）

［画像エディタ］

［透明度］スライダー［SHAPE］の透明度を設定する

［シェイプカラー］［SHAPE］の色を設定する

［ヘルプ］ボタンウェブブラウザが開いて、オンラインマニュアルのページが表示される

［比率を固定］画像の縦横比を元画像のまま固定する

［背景色］縮小や移動でエリア内に元画像のない部分の色

［拡大／縮小］スライダー画像を拡大／縮小する（P.71）

［フィット］ボタン画像サイズの横幅、あるいは高さでぴったり合わせて元画像を拡大／縮小する

［画像サイズ］画像のサイズをピクセル数で指定する

［回転］ボタン元画像を右／左に90度回転する

044



［SHiFT］

［テンプレートを選ぶ］ボタン［SHiFT］スライドショーのテンプレートのリストを表示する

［画像編集］ボタン登録したら画像を開いて、表示の拡大／縮小、切り抜きの位置調整などを行う

［コメント］欄スライドショーの際に、画像の下部に挿入される文字を入力する［開く...］ボタン

登録した画像を別の画像に入れ替える

［新規画像］ボタンスライドショー用の画像を登録する

［削除］ボタン登録済のスライドショー用画像を削除する

［サイズ変更...］ボタンスライドショーの表示サイズを変更する

［リンクする］設定スライドショーで表示された画像をクリックすると移動するリンク先を設定する

［自動再生］スライドショーを自動で再生させる。このオプションをオフにした場合、写真の左右端に表示される［＜］［＞］ボタンで写真を切り替える

［ループ］スライドショーをループ再生させる

045

1基本操作





6応用＆運用


a付録

［テーブルパーツ・エディタ］

［テーブル］編集したテーブルが表示される

［テキストの設定］セルの中に入力したテキストの、スタイル、行の位置、フォント、装飾を設定する

［HTMLソース］ボタンテーブルのHTMLソースを表示・編集できるエディターを開く

［行・列の増減］ボタンテーブルに上下に行を、左右に列を追加する

［行の設定］選択した行の、背景色、罫線のタイプ、罫線の色と太さ、罫線を引く場所を設定する

［テーブルの設定］テーブル全体の、縦と横のサイズ（単位：ピクセル）、背景色、罫線のタイプ、罫線の色、罫線を引く場所を設定する

［セルの設定］選択したセルの、縦と横のサイズ（単位：ピクセル）、背景色、罫線のタイプ、罫線の色と太さを設定する

［コピーして追加］ボタン［コピーして追加］オプションを有効にする。これを有効にしてから、［行・列の追加］の下向きのボタンを押すと、選択した行をコピーして追加される

［結合・解除］ボタンセルの結合および解除を行う

［行・列の削除］ボタンテーブルの行および列を削除する

［テンプレートを選ぶ］表のテンプレートを選択する画面が開く

［プレビュー］ボタンテーブルがブラウザで表示された状態をプレビューする

［元に戻す］ボタン作業の取り消し、および取り消した作業を再びやり直す

046



BiNDのさまざまな画面で画像を選択するユーザーインターフェースである［アイテムブラウザ］。この画面の使い方を解説する。

アイテムブラウザの使い方memo

2

［アイテムブラウザ］が開くと、前回開いたフォルダにある画像をサムネール表示する。この中に使用する画像があれば、選択して［適用］ボタンを押す。使いたい画像がない場合は❷へ。

1

3

4

5

サムネールに使いたい画像がない場合、画面の上部にある［フォルダの選択］ボタンをクリックする。表示されたメニューに画像が保存されているフォルダがある場合は選択して、❶と同様にする。ない場合は、❸へ。

［フォルダの選択］ボタンのメニューに開きたいフォルダがない場合、メニューの一番上にある［フォルダの選択...］を選ぶ。

［フォルダを選択］ダイアログが開いたら、目的のフォルダを開く。その状態で［選択］ボタンをクリックする。

［アイテムブラウザ］にフォルダ内の画像のサムネールが表示されるので、❶と同様にサムネールをクリックして選択し、［適用］ボタンを押す。これで、画像の選択が完了する。

［フォルダの選択］ボタンをクリック

［フォルダの選択...］を選ぶ

①目的のフォルダを開く

②［選択］ボタンをクリック

①サムネールをクリックして選択

②［適用］ボタンをクリック

047

レイアウト&コンテンツCONTENTS

-1 リンク付きの画像を配置する 48 -2 表をページに配置する 50 -3 アコーディオンメニューを作成する 52 -4 新規にページを作成する 54 -5 レイアウトにサイドバーを追加する 56 -6 背景に画像を使ったページを作る 58 -7 タブでコンテンツの表示が切り替わるページを作る 60 -8 リンクを追加する 62 -9 ページ全体とサイドバーの幅を変更する 63 -10 画像や文字のずれや隙間を直す 64 -11 ファイルダウンロード用のページを作る 65 Column サイトのコンテンツとSEO対策 66

Lesson2

048

レイアウト＆コンテンツLesson2-1

ここではテンプレート内の画像をオリジナルのものに変更し、さらにその画像にほかのページやサイトへ移動するリンクを埋め込む作業を説明します。

リンク付きの画像を配置する

変更したい画像を含むブロックを［サイトエディタ］で選択して［編集］ボタンをクリック。［ブロックエディタ］が開いたら、画像サムネールをクリック。すると画面右側に［画像パーツ設定］が表示されるので［開く］ボタンをクリックする。

ブロックエディタでブロックを開くStep 1

［アイテムブラウザ］が開いたら、この画面から使用したい画像を選択し、［適用］ボタンをクリック。

アイテムブラウザで写真を選ぶStep 2

②［開く］ボタンをクリック［アイテムブラウザ］を閉じて、［ブロックエディタ］に戻ってから［適用］ボタンをクリックすると、編集画面に読み込んだ画像のサムネールが表示されるので、画像を選択して、［画像パーツ設定］を表示する。

組み込んだ画像を選択Step 3

①［適用］をクリック

②画像のサムネールをクリックして選択

①画像サムネールを選択

①写真をクリックして選択

②［適用］をクリック

［アイテムブラウザ］に目的の写真が表示されない場合は、ウィンドウの右上にある［フォルダの選択］をクリックし、使用したい写真が入っているフォルダを選択しよう。選択したフォルダ内の写真が［アイテムブラウザ］に一覧表示される。

point





6応用＆運用


a付録

049

1基本操作リンク先のページを開くときに、現在開いているウィンド

ウに表示するか、新しいウィンドウを開くかといった設定は［クリック設定］で行う。［通常］の場合：初期設定では、リンクをクリックすると同じウィンドウにリンク先のページが開く。新しいウィンドウにリンク先のページを開きたい場合は、［設定する］ボタンをクリックし、ターゲットメニューから［_blank］を選択。これの設定は、外部のウェブサイトへリンクする際によく用いられる手法だ。また、リンク先をポップアップウィンドウとして開く場合は、ウィンドウサイズを指定する。［その場でポップアップ表示］の場合：親ページの中にリンク先の内容をポップアップ表示するため、別ウィンドウで表示されるポップアップウィンドウと異なり、親ページを閉じると同時に、表示されたリンク先ページの内容も閉じる。

リンク先を開くときのアクションの設定

memo

［ブロックエディタ］ → ［画像パーツ］

Featured Function

リンク先を設定する

［画像パーツ設定］で［クリック設定］タブを表示して、まず［リンクする］をクリック。サイト内のほかのページにリンクする場合は、その下のプルダウンメニューから移動したいページを選択する。別のウェブサイトへ移動するときは、メニューの下の入力欄にサイトのURLを入力する。

Step 4

①［リンクする］をクリック

②［SHOPPING GUIDE］を選択

適用してサイトエディタで確認

［ブロックエディタ］の［適用］ボタンもクリック。［サイトエディタ］の［プレビュー］ボタンをクリックして確認する。

Step 5

画像をクリックするとページを移動する

［ブロックエディタ］で［適用］をクリックせずに［閉じる］をクリックすると、設定した内容は保存されない。逆に間違った操作でブロックの内容を消してしまったりしたときは、［適用］せずに［閉じる］ボタンを押すと元の状態に戻せる。これはBiND4の作業全般に当てはまる注意事項なので覚えておこう。

point

②［_blank］を選択

①［設定する］をクリック

［その場でポップアップ表示］を有効にする

Lesson

050

2-2 レイアウト＆コンテンツ

［ブロックエディタ］で表を組み込むブロックを開いたら、［パーツ一覧］の［テーブルパーツ］ボタンをクリック。

ブロックにテーブルパーツを挿入Step 1

表をページに配置するページにリストやカレンダーなどを挿入する場合に便利なのが表（テーブル）だ。BiNDの［テーブルパーツ］を使えば、直感的に表を作ることができる。罫線や背景の色なども自在に設定可能だ。

［テーブルパーツ・エディタ］の［テンプレート一覧］が開いたら、作りたい表に近いテンプレートを選択。［作成］ボタンをクリックする。

表のテンプレートを選択Step 2

表が作成されたら、表をクリックして選択。次に［テーブルの設定］で、ブロックの横幅「100％」になっていることを確認。

表の横幅を設定するStep 3

テーブルの設定を横幅100％にしておけば、ブロックの幅に合わせた大きさで表示される。

point

［テーブルパーツ・エディタ］の画面右側の［行や列の増減］にあるボタンをクリックして列や行を追加・削除する。

表の行・列を追加・削除するStep 4

①表をクリック

②テーブルの横幅を設定

クリックして、行・列を追加・削除

［テーブルパーツ］ボタンをクリック



［ブロックエディタ］ → ［テーブルパーツ］

Featured Function

051

1基本操作





6応用＆運用


a付録

表の内容のテキストを入力する。テキストに対しては、［テーブルパーツ・エディタ］上部にあるバーでスタイルや大きさ、色などを指定できる。

表にテキストを入力してスタイルなどを決める

Step 5

画面右側の［セルの設定］で、セルの横幅を設定する。ピクセルか、全体に対する割合（％）で指定できる。各列のセルを選択して、それぞれで横幅を設定する。

列の横幅を設定するStep 6

表でセルを選択してから、［テーブルパーツ・エディタ］画面右側の［行の設定］で、罫線の色と種類を設定。各行に対して設定を行う。

行の罫線を設定するStep 7

②テキストのスタイルや色などを設定する

①各セルにテキストを入力

②横幅を設定する

①セルを選択

表の編集が終わったら［テーブルパーツ・エディタ］の［適用］ボタンをクリック。さらに［ブロックエディタ］でも［適用］ボタンをクリックしてから、［サイトエディタ］で［プレビュー］ボタンを押して、ブラウザで確認する。

ブラウザでプレビューして確認Step 8

表の完成

①セルを選択

②罫線の色を指定する

③罫線の種類を選択する

052


ウェブページのサイドバーに、アコーディオン形式のメニューを設置する。ブロックテンプレートを使えば、Ajaxを駆使した動的なメニューが簡単に追加できる。

アコーディオンメニューを作成する

①［追加］ボタンをクリック

サイドバーのブロックを選択し、［追加］ボタンをクリックしてブロックを追加。追加したブロックを選択し、［編集］ボタンで［ブロックエディタ］を開く。

サイドバーにブロックを追加して編集する

Step 1［ブロックテンプレート］画面で、［標準：09 サイドバー］のカテゴリーから［関連情報（アコーディオン式）」を選択。［適用］をクリックすると、［ブロックエディタ］にテンプレートの文字や画像が組み込まれる。

アコーディオン式のブロックテンプレートを選ぶ

Step 3


①［標準：09 サイドバー］をクリック

［ブロックエディタ］の下部にある［ブロックテンプレートを開く］をクリック。

ブロックテンプレートを開くStep 2

［ブロックテンプレートを開く］をクリック

④アコーディオンメニューのテンプレートが入る

③［適用］ボタンをクリック②［関連情報（アコーディオン式）］を選択

053





6応用＆運用


a付録

1基本操作

［ブロックエディタ］ → ［ブロックテンプレート］

Featured Function

アコーディオンメニューの項目を増やす

テンプレートを適用すると、［ブロックエディタ］にはダミーのテキストが表示される。ひとつの項目を丸ごと選択してコピー＆ペーストすることで、メニューの項目を必要に応じて増やすことができる。

Step 4

項目をコピー＆ペーストして項目数を増やす

ブロックテンプレートのテキストを書き換えて、画像を置き換える

［ブロックエディタ］で、それぞれの項目の見出し、本文のテキストを書き換える。さらに画像も配置してから［適用］ボタンをクリック。［サイトエディタ］で［プレビュー］ボタンをクリックしてウェブブラウザで確認する。

Step 5


①見出しや本文のテキストを書き換える

②画像を組み込む

④クリックで順番に開くアコーディオンメニューの完成

memo アコーディオンをマウスオーバーで開くようにする

アコーディオンの動作を設定は、［ブロックエディタ］の［設定］で行う。初期設定では、ウェブページを開いたときに一番上の項目だけが表示されている状態で、項目名をクリックすると内容が表示されるようになっている。これを、ポインターを重ねると自動で開くように変更するには、［ブロックエディタ］の［設定］タブを開き、［ブロックレイアウト］の［オプション］の項目を変更する。

①［設定］タブを開く

②［一番上を開く（ロールオーバー）］を選ぶ

③マウスを重ねるとその項目が開いて表示される

054


BiNDではあらかじめ用意されたページを基に、ページの削除や追加を行ってサイトを構築する。ここでは新規ページを追加し、サイトの共通要素であるヘッダをそろえる作業を説明する。

新規にページを作成する

［追加ページ］メニューの、［ベース］と［コンテンツ］というサブメニューの違いは、［ベース］はトップページや、連絡先、アクセスマップなどページの種類別のテンプレートを集めたもので、［コンテンツ］はブログやフォトアルバムなど、サイトのメイン記事となるページに適したテンプレートになっている。

point

［サイトエディタ］の［サイトマップ］の下にある［追加ページ］ボタンをクリック。メニューの中から追加したい種類のページを選択する。

サイトにページを追加するStep 1新しく追加したページを既存のページと比較してみると、ページの右上の「印刷」と「文字拡大」ボタンが、新規ページに引き継がれていないことがわかる。また、新規ページにはグローバルメニューが追加されている。

追加したページをほかのページと比較する

Step 2

追加したページを開いて［このページを編集する］をクリック。追加したページに配置されている、ほかのページにはないグローバルメニューのブロックを削除する。

追加したページの不要なブロックを削除する

Step 3

②［ベース］の［Access］を追加する

①［追加ページ］ボタンをクリック

③新規にページが追加された

●既存のページ

●追加したページ「印刷」と「文字拡大」ボタンがない

不要なグローバルメニューが配置されている

ほかのページにはないブロックを削除

055





6応用＆運用


a付録

1基本操作

［サイトエディタ］ → ［サイトマップ］ → ［追加ページ］

ページ作成には、［追加］ではなく、ページの「複製」を利用する方法もある。複製した場合は、メニューなどを整える必要はないが、コンテンツに応じたブロックを自分で並べていかなければならない。似た内容のページであれば［複製］、テンプレートにある内容のページであれば［追加］といったように使い分けるといい。

複製でページを作るmemo

ブロックの共有を設定する

追加したブロックを［ブロックエディタ］で開いたら、画面上部の［共有］をクリックして［_ユーザビリティー］を選択する。これで、ほかのページと同じヘッダになる。

Step 5

Featured Function

［ブロックエディタ］で［適用］ボタンをクリック。［サイトエディタ］で［プレビュー］ボタンを押して、ウェブブラウザでチェック。既存ページと同じ状態になったことを確認する。

適用してプレビューで確認するStep 6ブロックを追加する

追加ページの［ヘッダ］エリアにブロックを追加。新しいブロックで［上へ］ボタンをクリックして、一番上にブロックを移動する。

Step 4

［追加］ボタンをクリック

①［共有］をクリック

②［_ユーザビリティー］を選択

③ブロックの内容が挿入された

①複製したいページを選択

②［複製］ボタンをクリック

●既存のページ

●追加したページ

既存のページと同じデザインが完成

［共有］には、ほかのページで共有されている項目が表示されるため、カートリッジによって内容は異なる。

point

056


レイアウトの変更の容易さもBiNDの特徴の１つだ。サイドバーのないページにも、［レイアウト］ボタンでレイアウトの変更を実行すれば、サイドバーを追加できる。

レイアウトにサイドバーを追加する

［サイトエディタ］でサイドバーを追加するページを選択し、画面下の［レイアウト］ボタンをクリックする。

サイトエディタでページを選択Step 1

［レイアウト］メニューから、サイドバーがあるレイアウトを選ぶ。ここでは、メインブロックの右側にサイドバーが配置される［A-2 I型ビルボード＋メイン＋サイド］を選択する。ページの右側、ビルボードの下にサイドバーが配置される。

レイアウトの種類を選択してサイドバーを追加

Step 2

サイドバーを追加しても全体の横幅は変化しないため、メインコンテンツの幅は縮小される。このため、それまで配置されていた写真や見出しなどの画像が重なったり、すき間ができたりする。

レイアウトを確認するStep 3

調整したいブロックをブロックエディタで開く

調整したい写真が配置されているブロックを選択し、［編集］ボタンをクリック。［ブロックエディタ］で開く。

Step 4

①ページを選択する

②［レイアウト］ボタンをクリック

①［A-2 I型ビルボード＋メイン＋サイド］を選択

②サイドバーが追加された

表示領域に対して画像が小さい

画像が重なって表示されている

①ブロックを選択する

②［編集］ボタンをクリックする

057





6応用＆運用


a付録

1基本操作

［サイトエディタ］ → ［レイアウト］

写真のサイズを変更する

サイズを変更したい画像を選択し、［画像編集］ボタンをクリックする。［画像エディタ］が開いたら、画面左下の［画像サイズ］で、数値を変更する。ここでは横幅だけを広げるため、横幅の数値を「260」と入力（単位はピクセル）し、［比率を固定］のチェックを外して［OK］ボタンをクリック。ほかの画像も同様に適切な数値に調整したら、［ブロックエディタ］の［適用］ボタンをクリック。

Step 5

Featured Function

リンクボタンのサイズを変更する

重なってしまったリンクボタンのあるブロックを選択。［編集］ボタンをクリックし、［ブロックエディタ］を開く。調整したいボタンのパーツを選択してから、［ブロックエディタ］の［出力サイズ］で表示幅に合うように調整。［－］ボタンをクリックすると縮小する。この際、横幅と縦の高さのピクセル数が自動的に縦横比を固定したサイズに縮小される。画像サイズを調整したら［適用］ボタンをクリック。

Step 6

サイドバーにコンテンツを追加してから、［サイトエディタ］で［プレビュー］ボタンを押して、ウェブブラウザで仕上がりを確認する。

適用してウェブブラウザで確認するStep 7

⑤［OK］ボタンをクリック

①画像を選択

②［画像編集］ボタンをクリック

③［画像サイズ］を入力

④［比率を固定］のチェックを外す

①［編集］ボタンをクリック

②ボタンのパーツを選択

③［－］ボタンをクリックして縮小

画像やボタンが収まったレイアウトの完成

058


ウェブページの背景は、単色を選ぶだけでなく画像を使用することができる。パターン画像をタイル状に敷き詰めたり、ワンポイントとして一部に配置するといった設定も可能だ。

背景に画像を使ったページを作る

①［設定］ボタンをクリック

背景を変更したいページを開いた状態で［設定］ボタンをクリックし、設定ウィンドウを開く。さらに［ページ設定］を選択し、［ページデザイン］を開く。

背景に画像を置きたいページで［設定］を開く

Step 1はじめに［ページ全体］の［背景画像］チェックボックスにチェックマークを入れる。次に右側の長方形のボタンをクリックし［アイテムブラウザ］が開いたら、背景に配置したい画像を選択する。

［背景画像］を有効にして画像を選択する

Step 2

②［ページ設定］ボタンをクリック

③［ページデザイン］を選択

①［背景画像］にチェックを入れる

②ブランクボタンをクリック

③画像を選択する

④［適用］をクリック

059





6応用＆運用


a付録

1基本操作

［サイトエディタ］ → ［ページ設定］

Featured Function

背景画像の配置を決める

背景画像の配置方法をメニューから選択する。ここで選択する［右中央］は、画像を右側、天地を中央に配置する。ほかにも、1枚の小さな画像を画面全体にタイル状に配置する［タイリング］などさまざまな配置方法が選べる。

Step 3 memo BiNDのフリー素材を利用する

BiND4には、ウェブサイトを彩る写真やアイコン、背景画像などのフリー素材が同梱されている。背景画像を利用する場合は、アイテムブラウザで［BiND for WebLiFE* 4］フォルダ内にある［My Sources］から［Background］フォルダを選択し、背景画像を配置できる。細長い画像は、［縦リピート］あるいは［横リピート］の配置を選択すると、指定した方向に画像が繰り返し表示され、ページ全体を覆う。画像のファイルサイズが軽い分、大きな1枚の画像を張り込むよりも表示が速い場合がある。

②［右中央］を選択

背景が適用された

ページの背景に花の画像が配置された。ここでは、ページ全体に背景画像を適用したが、ヘッダ部分やコンテンツのパートだけに背景を設定することもできる。

Step 4

①画像のサムネールが表示された

③［サイトエディタ］に戻って［プレビューボタン］をクリック

背景画像が配置された

060


「Ajax」という技術を使ったウェブページを作るのには、通常は専門知識が要求されるが、BiNDを使えば簡単に作成可能だ。ここでは、タブをクリックすると記事が切り替わるページを作ってみる。

タブでコンテンツの表示が切り替わるページを作る

タブの位置（左／右）やマウスアクション（クリック／ロールオーバー）の設定は、［ブロックエディタ］の［設定］の［オプション］メニューで変更可能だ。

point


［サイトエディタ］で、タブ切り替え表示にしたい記事のブロックを選択。［編集］ボタンをクリックする。

タブ形式に変更したいブロックを選ぶ

Step 1現在選択中のレイアウトが表示されている［ブロックレイアウト］ボタンをクリックして、メニューを開く。ここでは、［タブ］のレイアウトを選択する。選択したレイアウトに対応するオプションが表示されるので、オプションメニューでレイアウトの詳細を設定する。設定が済んだら［適用］して、［編集］タブで編集画面に戻る。

ブロックレイアウトを選択するStep 3

［ブロックエディタ］が開いたら、［設定］をクリックする。

ブロックエディタの［設定］を開くStep 2

①表示を変更する記事のブロックを選択

［設定］をクリック

①［ブロックレイアウト］ボタンをクリック

②メニューから［タブ］を選択

⑤［適用］をクリック

③オプションメニューをクリック

④［左寄せメニュー形式（クリック）］を選択

061





6応用＆運用


a付録

1基本操作［ブロックレイアウト］で［タブ］を選択したブロックを、

［ブロックエディタ］の［設定］で開き、［ブロックスキン］を変更すると、タブのデザインを変更できる。

タブのデザインの変更memo

［ブロックエディタ］ → ［設定］ → ［ブロックレイアウト］

Featured Function

テキストを入力してスタイルを変更する

［編集］ボタンをクリックして編集画面に戻る。［タブ］のレイアウトでは、［タイトル］がタブの見出しにあたるので、見出しのテキストを入力して、［段落のスタイル］で［タイトル］を選択する。各見出しのスタイルを設定したら、記事と記事の間を区切っている［分割］は不要になるので、これを削除。［適用］ボタンをクリックする。

Step 4

タブを利用したレイアウトが完成

［サイトエディタ］の［プレビュー］ボタンをクリック。タブをクリックすると該当項目が開く記事が完成しているのを確認。

Step 5

タブで項目が切り替わる記事が完成

⑤最後に［適用］ボタンをクリック

②［段落のスタイル］をクリック

③スタイルを［タイトル］に変更する

①各見出しのテキストを入力する

④［分割］を削除する

①［ブロックスキン］で「リッチ（白）」を選択

②タブのデザインが変更

③ブロックの枠が角Rになった

062


リンクタグを使って文字列やアイコン、画像などにリンクを追加する。リンクはサイト内のほかのページや外部サイトへ移動するための宛て先の役割をする。

リンクを追加する

リンクを挿入したいブロックを［ブロックエディタ］で開き、［リンクパーツ］ボタンをクリック。［リンクパーツ設定］が表示されたら［テキスト］欄に、ウェブページで表示する文字列を入力する。

［リンクパーツ］を開いてリンクにしたい文字列を入力する

Step 1 memo メールアドレスへのリンクを設定する

文字列やアイコンなどに、メールアドレスへのリンクを追加します。メールアドレスのリンクをクリックするとメールソフトが起動して、リンク先のメールアドレスを宛先とした新規メールウィンドウが開く。設定は［リンク先］欄に「mailto:」という文字列に続けてメールアドレスを入力する。URLへのリンクの応用になるが、覚えておくと便利なリンクタグだ。

①［リンクパーツ］をクリック

サイト内のほかのページにリンクする場合は、［リンク先］のすぐ下にあるプルダウンメニューから移動したいページ（ここでは［商品ページ］）を選択する。外部のウェブサイトへ移動するときは、メニューの下の入力欄に「http」で始まるURLを入力する。

リンク先を指定するStep 2

インターネット上にメールアドレスを公開すると、悪意あるプログラムなどでアドレスを収集されることがある。こうしたトラブルを防ぐには、メールアドレスを収集可能な文字列として表示しないことや、メッセージ・フォームを利用するなどの対策を心がける必要がある。

point

②リンクを埋め込む文字列を入力する

メニューから［商品ページ］を選択

URLを入力

mailto: という文字列に続けてメールアドレスを入力

Lesson

063





6応用＆運用


a付録

2 レイアウト＆コンテンツLesson

ページ全体とサイドバーの幅を変更するBiND4のテンプレートは横幅825ピクセルを標準として作られているが、この横幅や、サイドバーの幅は変更することができる。このカスタマイズで文字通り、デザインの幅を広げてみよう。

-9

1基本操作

①［レイアウト］ボタンをクリック

横幅の変更を有効にして数値を入力する

［ページレイアウト］設定画面で［ページ全体］にチェックを入れて、横幅の数値を入力。また、160ピクセルだった［サイトA］の幅も240ピクセルに変更してみよう。単位はいずれも［ピクセル］を選択し、［OK］ボタンをクリックする。

Step 2

②［ページやエリアの横幅をカスタマイズする］を選択

①［ページ全体］にチェックして数値を入力

②［サイドA］にも数値を入力

③単位は［ピクセル］を選択

［サイトエディタ］の［プレビュー］ボタンをクリックして、ウェブブラウザで確認する。図やテキストにずれが生じている場合は、必要に応じて［ブロックエディタ］で修正する。

プレビューで確認するStep 3［サイトエディタ］で横幅を変更したいページを選び、［レイアウト］ボタンをクリック。表示されるメニューで［ページやエリアの横幅をカスタマイズする］を選ぶ。

サイトエディタのページ設定でページレイアウトを開く

Step 1

すでに出来上がったページの横幅を変更すると、レイアウトが大きく変化する。テンプレートに含まれる多くのページでも配置した画像のサイズが合わなくなるなどデザインが崩れることがあり、大幅な修正が必要だ。横幅を変更する場合は、ページを作り始める前に行うようにする。

横幅の変更は一番最初に！memo

825ピクセル160ピクセル

960ピクセル240ピクセル

●変更前

●変更後

064

レイアウト＆コンテンツLesson -102

BiNDで写真やテキストをレイアウトしていくと、意図しない隙間やずれが生じることがある。設定を変更することでこのずれは解消できる場合があるので、次の方法で試してみるといい。

画像や文字のずれや隙間を直す

ずれがあるブロックを選択して［編集］ボタンをクリック。ここでは、ブロックの幅と同じピクセルで作った地図が、ぴったり収まっていない。

ずれがあるブロックを選択Step 1

［ブロックエディタ］が開いたら［設定］をクリック。画面右下にある［行間＆余白設定］の［設定する...］ボタンを押す。

ブロックエディタの設定を開くStep 2

地図の配置にずれがある

設定のダイアログが開いたら、［余白］の［プリセット］にある［普通］と表示されたボタンをクリック。メニューから［ゼロ］を選択。［OK］ボタンをクリックして［適用］ボタンを押す。

余白の設定をゼロにするStep 3

①［設定］をクリック

②［設定する...］ボタンをクリック

余白の設定は、数値を入力して設定することも可能だ。ただし、レイアウトの構造によっては数値が反映されない場合もある。

point

次に［サイトエディタ］の［設定］で［ページ設定］を開く。［ページデザイン］にある、［メイン］の［余白なし］にチェックを入れて有効にする。［OK］ボタンをクリックしたら、［プレビュー］ボタンを押してブラウザで確認すれば完了。

サイトエディタでエリアの余白を設定

Step 4

①［ページデザイン］を開く



①［ゼロ］を選択 ②［OK］ボタン

②［余白なし］にチェックを入れる


④［プレビュー］ボタンをクリック

Lesson

065





6応用＆運用


a付録

2-11 レイアウト＆コンテンツLesson

ファイルダウンロード用のページを作るファイルを公開する場合に必ず必要になるのが、ダウンロードページ。BiNDなら、リンクの指定など面倒な作業はなく、ファイルを選択するだけで、ダウンロードリンクが出来上がる。

1基本操作

①リンクを挿入する位置を指定

パーツが挿入されたら、［設定エリア］で、リンクのテキストを入力。また［リンクアイコン］の［アイコン画像］をクリックして、［アイテムブラウザ］で［Link_Icon］フォルダから画像を選択して設定。設定が完了したら、［適用］ボタンを押す。

ダウンロードリンクの各種設定を行う

Step 3［ブロックエディタ］でダウンロードリンクを配置するブロックを開いたら、リンクを挿入する位置を指定してから［パーツ一覧］の［ダウンロード］をクリックする。

ダウンロードパーツを挿入Step 1

公開するデータを指定する

ファイルを選択するダイアログが開いたら、ダウンロードさせるデータを選択。［開く］ボタンをクリックする。

Step 2［設定エリア］の下部に［トラッキングID］という設定項目がある。「Google Analytics」を設定している場合、仮想的なディレクトリを設定してファイルのダウンロード数を計測できる。その仮想的なディレクトリを指定するのが「トラッキングID」項目で、実際にあるディレクトリ名とかぶらないように入力する必要がある。

トラッキングIDについてmemo

②［ダウンロード］をクリック

②［開く］ボタンをクリック

①データを選択

①テキストを入力

③［適用］ボタンを押す

②画像を［アイテムブラウザ］で選択して設定

［サイトエディタ］で［アップロード］ボタンをクリックして実行。実際のサイトでデータがダウンロードできることを確認する。

アップロードしてブラウザで確認Step 4

ダウンロードのリンクボタン

066

サイトのコンテンツとSEO対策

Column

　「SEO」とは「Search Engine Optimization」の略で「検索エンジン最適化」のことだ。現在、ウェブ上で何かの情報を得ようと思ったら、多くの人はまずGoogleやYahoo!などの検索サービスを利用する。これらの検索エンジンの検索結果で上位（1ページ目）にリストアップされるためにウェブページに施す対策をSEOと言う。　一口に「SEO」と言っても、小手先のテクニックから、サイトのコンテンツの改善まで、その内容は幅が広い。　小手先のテクニックとは、例えば、サイトの内容と関係がないが一般に検索の対象になりやすいキーワード（例としては、芸能人の名前や人気商品の名称、地名など）を、ウェブページの文章に挿入しておくような行為だ。このような対策を施したページが検索結果の上位に表示されると、利用者が混乱したり、不快に思ったりするという事態が発生する。　一方、検索エンジンサービスにとっては、検索結果にそのような不適切なウェブへの誘導のリンクが出てきてしまうのは、サービスの品質低下になるので、当然、それを修正・排除する対策を取っている。そのため、かつてはSEO対策と言われていた手法を用いることが、かえって検索エンジンの結果を下げてしまうことがある。それだけならばいいが、完全に検索結果から取り除かれてしまう、いわゆる「Google八分」という状態になってしまう。　BiNDで行う、SEO対策とは基本的なものだ。サイトのメタデータ（データのためのデータ。データを参照したり、検索するための情報）に、コンテンツの説明文と、関連するキーワードを設定することができる（P.144参照）。検索エンジンの“ロボット（検索データベースを構築するために、ウェブサイトから自動的

に情報を収集しているプログラム）”が集めている情報をきちんと提供するための機能だ。この情報が欠けていると、検索の対象になりづらいことがある。ただし、必ず検索結果に反映されるというわけではない。Googleは、メタデータのキーワードは無視するが、説明文は影響するという説もある。どういった要素が、検索の結果に影響しているかは、それぞれの検索エンジンによって方針が異なり、その方針は企業秘密になっている。　結局のところ、SEOとしては有効なのは、自分のサイトへ誘導したい人が、どういったキーワードで検索をしているかを分析し、そのキーワードを絡めたコンテンツを充実させて、タイトルや説明文に組み込んでいくことが無理のない方法と言える。

「最適化」にならない「検索エンジン最適化」対策●キーワードの挿入コンテンツに無関係なものを入れたり、そのキーワードを背景と同色で表示したりする「隠し文字」をウェブページに入れることはNG。

●外部へのリンクコンテンツに無関係のリンクをページに設置する。リンクのみのページを作ったりする。また不必要に自動転送するページも検索の結果に悪影響を与えるとされている。

●リンクの獲得有料サービスによって、外部からのリンクの大量取得や、不自然な相互リンクなどは逆効果となることがある。

これらのキーワードやリンクに関する対策は、適切に行えば、SEOとしては効果があるとされているものだが、上記のようなやり方は逆効果になると思って間違いない。

067

グラフィック&デザインCONTENTS

-1 トップページのイメージ画像を作る 68 -2 スライドショーが表示されるトップページを作成する 70 -3 背景にスライドショーが流れるページを作る 72 -4 サイドバーにスライドショーを設置する 74 -5 ウェブサイトのタイトルロゴをデザインする 76 Column 素材を使ってサイトをデザインする 79 -6 見出しを画像化してデザインする 80 -7 サイトのデザインをまとめて変更する 82 -8 メニューのデザインを変更する 86 -9 リンクボタンをデザインする 88 -10 画像を加工してページに配置する 92 -11 ロールオーバーでリンク画像を変化させる 94 -12 ロールオーバーで色が変化するリンク画像を作る 96 -13 文字の色を指定のコーポレートカラーにする 98

Lesson3

068

グラフィック＆デザインLesson3-1

ホームページの顔となるイメージ画像「ビルボード」を作る。ここではSiGNを使ったビルボードの作成方法を紹介する。

トップページのイメージ画像を作る

BiNDでは、トップページの上部に配置した大きめの看板画像を［ビルボード］と呼ぶ。まずは、この［ビルボード］を［ブロックエディタ］で開き、［SiGN］を起動する。

ブロックエディタからSiGNを起動する

Step 1

画像の見せたい部分が［ビルボード］の表示領域内に収まるように、［拡大／縮小］スライダーでサイズを変更する。また、画像上で手の形になったマウスポインタをプレス＆ドラッグして画像の配置を調整できる。

画像のサイズを変更するStep 3

画面下部にある［エフェクト］ボタンをクリックして表示されたウィンドウ内の［エフェクト一覧］から［彩度］を選ぶ。効果を選択したら［OK］ボタンをクリックして効果を確定する。

画像にエフェクトを加えるStep 4［ビルボード］は、［SHAPE］［IMAGE］［TEXT］の３つの要素をそれぞれ編集できる。ここでは［IMAGE］を選択し、［画像ファイルを選択］をクリックしてテンプレートのサンプルイメージを任意の画像に差し替える。

イメージ画像を選択するStep 2

①［ビルボード］のサムネールを選択

②［SiGNを起動する］をクリック

①［IMAGE］をクリック

②［画像ファイルを選択］をクリック

③画像を選択する

画像ファイルは、ファインダーやフォルダから［SiGN］の編集画面に直接ドラッグ＆ドロップで読み込むこともできる。

point


①［彩度］をクリック ②［彩度５］を選択

①サイズを調整する ②ドラッグして移動する

069





6応用＆運用


a付録

1基本操作

［ブロックエディタ］→ ［SiGN］

Featured Function

テキストの内容を変更する

［SiGN］のメイン画面に戻ったら、今度は［TEXT］エリアを選択して編集画面を開く。文字列を選択し、内容を自分のサイトに合ったものに書き替える。

Step 5 ビルボードが完成した

［SiGN］での編集作業が終わったら［保存］をクリックして終了する。［ブロックエディタ］に戻り［適用］をクリックして完了だ。

Step 7

①［TEXT］をクリック

②文字列を書き替える

フォントを変更する

文字列を選択した状態で、［フォントメニュー］から使いたいフォントを選択する。


①［フォントメニュー］をクリック

②フォントを選択

Step 6

SiGNには、ウェブページに使用できるライセンスフリーのフォントが用意されている。［フォントメニュー］左側にある［OSのフォントを利用］を有効にすれば、お手持ちのフォントが使用可能になる。また、フォントサイズの変更や行揃えの指定も上部のツールバーから行う。

point

［ビルボード］がないタイプのテーマに、独自の［ビルボード］を追加したいときは、新しいブロックを作成し［ブロックエディタ］から［ブロックテンプレート］を使用して［ビルボード］を追加することができる。また、［ブロックエディタ］から直接［SiGN］を起動して［テンプレート］から［ビルボード］を作成することも可能だ。

新たにビルボードを作成するmemo

①［保存］をクリック

②［ブロックエディタ］で［適用］をクリック

070


BiND4では、選んだ写真をスライドショー形式で切り替えて表示させる機能［SHiFT］を利用できる。ここでは、各写真がコンテンツへのリンクになっているスライドショーをトップページに作ってみる。

スライドショーが表示されるトップページを作成する

スライドショーを配置したいブロックを選択。［編集］ボタンをクリック。

スライドショーを配置するブロックを選択

Step 1［SHiFT］画面が表示されたら、画面左側にある［ビルボード用（825px）］をクリック。スライドショーのテンプレート一覧から、好みのものを選んで［OK］ボタンをクリック。

スライドショーのテンプレートを選択Step 3

①スライドショーを配置したいブロックを選択


［ブロックエディタ］が表示されたら、［パーツ一覧］で［SHiFTスライドショーパーツ］ボタンをクリックする。

SHiFTパーツを挿入するStep 2


①［ビルボード用（825px）］をクリック

②スライドショーのテンプレートを選択


［SHiFT］画面の左下にある［新規画像］ボタンをクリック。［アイテムブラウザ］で写真を選択して［適用］ボタンを押す。この手順を繰り返して画像を追加していく。

画像を挿入するStep 4

①［新規画像］ボタンをクリック


②写真を選択

071





6応用＆運用


a付録

1基本操作

［ブロックエディタ］ → ［SHiFT］パーツ

［適用］してプレビューする

［ブロックエディタ］で［適用］ボタンをクリック。［サイトエディタ］で［プレビュー］ボタンをクリックしてブラウザで表示を確認する。

Step 7

Featured Function

画像の大きさや配置を調整する

読み込んだ画像の配置を調整したい場合は、［SHiFT］画面の［画像編集］ボタンをクリック。［画像エディタ］が開いたら、画像の倍率や配置を調整。

Step 5

画像にコメントとリンクを設定する

［SHiFT］画面左側の一覧から登録した画像を選択。コメントを入力後、［リンクする］をクリックして［リンク先］を設定する。この作業を各画像に行う。完了したら［保存］ボタンをクリック。

Step 6




④［リンク先］を選択する

②コメントを入力

③［リンクする］をクリック

①画像を選択

［コメント］は写真の下部に表示される

切り替わりの効果はテンプレートによって異なる

それぞれの画像がコンテンツへの移動するリンクになっている

072


ページの背景に敷いた写真が時間とともに切り替わるという凝った仕掛けのページも、BiNDなら［SHiFT］のスライドショー機能を使って簡単に作ることができる。

背景にスライドショーが流れるページを作る

背景画像をスライドショーにしたいページのブロックを選択。選ぶのはページ内のいずれのブロックでもかまわない。次に［編集］ボタンをクリック。

ブロックを選択Step 1［SHiFT］画面が表示されたら、画面左側にある［ページ背景］をクリック。スライドショーのテンプレート欄で［背景がスライドショー（センタリング）］を選んで［OK］ボタンをクリック。






①［ページ背景］をクリック

②［背景がスライドショー（センタリング）］を選択


［SHiFT］画面の左下にある［新規画像］ボタンをクリック。［アイテムブラウザ］で写真を選択して［適用］ボタンを押す。

スライドショーの画像を登録するStep 4

①［新規画像］ボタンをクリック


②写真を選択


073





6応用＆運用


a付録

1基本操作


Featured Function

背景のスライドショーをチェックする

Step４を繰り返して画像を登録し終わったら、［SHiFT］画面で［保存］ボタンをクリック。［ブロックエディタ］で［適用］ボタンをクリックし、［サイトエディタ］で［プレビュー］ボタンを押してブラウザで表示。スライドショーの画像と文字の色などの組み合わせで見づらい部分がないかを確認する。

Step 5

コンテンツの背景に半透明の白地を敷く

［サイトエディタ］の［設定］ボタンをクリック。［ページ設定］の［ページデザイン］で、［メイン：］の［背景スキン］メニューから［B-半透明ホワイト角R］を選択して変更。［OK］ボタンをクリック。

Step 7


ロゴに白い縁をつける

見えづらくなっていたロゴのブロックを［ブロックエディタ］で開いて、ロゴ画像を選択。［SiGN］を起動して、［TEXT］枠をクリック。画面下部にある［エフェクト］で［縁取り（白）］を選ぶ。

Step 6

［保存］ボタンをクリックして背景のスライドショーの完成

写真の暗い部分と、黒い色のロゴやテキストが重なって、見えづらくなっている

①ロゴ画像を選択

②［SiGNを起動する］ボタンをクリック

③［TEXT］枠を選んで［縁取り（白）］のエフェクトをかける

プレビューして確認

再び［サイトエディタ］で［プレビュー］ボタンをクリック。ブラウザで表示を確認する。

Step 8

②［メイン：］の［背景スキン］を［B-半透明ホワイト角R］に変更

ロゴが白縁取りになって見やすくなった

テキストの背景に白い半透明の地が敷かれて読めるようになった

074


サイドバーにスライドショーを配置すると、写真などのページへ誘導するのに有効なリンクになる。［SHiFT］を使えば、サイドバーに収まるスライドショーも簡単に作ることができる。

サイドバーにスライドショーを設置する

スライドショーを配置したい、サイドバーのブロックを選択。［編集］ボタンをクリック。このときに、ブロックのサイズを確認しておく。

スライドショーを配置するブロックを選択

Step 1［SHiFT］画面が表示されたら、画面左側にある［サイド用（210×210px）］をクリック。スライドショーのテンプレート一覧から、好みのものを選んで［OK］ボタンをクリック。


①スライドショーを配置したいブロックを選択

③［編集］ボタンをクリック




①［サイド用（210×210px）］をクリック

②スライドショーのテンプレートを選択


［サイズ変更］ボタンをクリックして、スライドショーに書き出す画像のサイズを、Step１で確認したサイドバーのブロックの大きさに合わせて横幅を調整する。

スライドショーのサイズを設定するStep 4

①［サイズ変更］ボタンをクリック

②ブロックのサイズを確認

②サイズをピクセルで指定する③［OK］ボタンをクリック

075





6応用＆運用


a付録

1基本操作


［適用］してプレビュー

［ブロックエディタ］で［適用］ボタンをクリック。［サイトエディタ］で［プレビュー］ボタンをクリックしてブラウザで表示を確認する。

Step 7

Featured Function

画像を挿入する

Finder（Mac）やエクスプローラ（Windows）で選択した画像を［SHiFT］画面左側のエリアにドラッグ＆ドロップすると、画像をまとめて登録することができる。

Step 5

画像の大きさや配置を調整する

読み込んだ画像の配置が適切でない場合は、［SHiFT］画面の［画像編集］ボタンをクリック。［画像エディタ］が開いたら、画像の倍率や配置を調整。完了したら［保存］ボタンをクリック。

Step 6


画像をドラッグ＆ドロップ


サイドバーにぴったり収まるスライドショーの完成


076


サイトのタイトルを図案化したり少し凝った書体でドレスアップしたロゴを［SiGN］を使って作る。ここでは、テンプレートを基にロゴを作成しよう。

ウェブサイトのタイトルロゴをデザインする

［編集］ボタンをクリック

ロゴを配置するブロックを選択して［編集］ボタンをクリック。

ヘッダ部分をブロックエディタで開くStep 1［SiGN］が起動してテンプレートの選択ウィンドウが開いたら、［テンプレートの種類］の一番上にある［デザインテンプレート］をクリック。表示されるプルダウンメニューから白紙のテンプレート［ブランクテンプレート］を選択。［バナー］カテゴリーをクリックし、作成したいロゴに最適なサイズのテンプレートを選ぶ。

テンプレートを選ぶStep 3

元のテンプレートに配置されているロゴを削除。同じ場所にカーソルを置いて［SiGN］ボタンをクリックする。

［SiGN］パーツを挿入するStep 2

あらかじめ配置されているロゴをアレンジして利用する場合は、ロゴのサムネールを選択して［SiGNを起動する］ボタンをクリックする。

point登録されている［デザインテンプレート］から選択したロゴをアレンジして利用してもいい。

point

①ブロックに配置されているロゴのサムネールを消去する

②［SiGN］ボタンをクリック

①［デザインテンプレート］ボタンをクリック

②［ブランクテンプレート］を選択

④［バナー］を選択

⑤［200_80_01］というテンプレートを選択

③［作成ボタン］をクリック

077




6応用＆運用


a付録

1基本操作


［ブロックエディタ］ → ［SiGN］パーツ

テキストの位置を調整する

画面下部の［位置］ボタンで文字を移動させる。

Step 5

Featured Function

文字を選択してから、画面上部にあるカラー選択ボックスをクリックして色を選ぶ。また、画面下部にある［エフェクト］ボタンをクリックして［影］カテゴリーの［ドロップシャドー（黒）1］を文字に加える。

テキストに色を付け、エフェクトをかける

Step 6テキストを入力してフォントを選択

［SiGN］の編集画面が開いたら、［ブランクテンプレート］の［TEXT］枠をクリックしてテキストを入力。さらにテキストを選択した状態で、画面上部のメニューからフォントを選択する。

Step 4

①左上の［TEXT］枠をクリック

③フォントを変更する

②文字を入力する

テキストが移動させたい場所に到達するまで［位置］ボタンをクリックする

①文字を選択して色を変更する

②［エフェクト］ボタンをクリック

④［ドロップシャドー（黒）1］を選択

③［影］を選択

0-0

078

Lesson3-5 グラフィック＆デザイン

ウェブサイトのタイトルロゴをデザインする

別の［テキスト］枠にテキストを入力

別の［テキスト］枠にもテキストを入れる。Step5と同様に位置を決め、さらに［回転］ボタンで角度を設定して、テキストを傾ける。

複数のテキスト枠を組み合わせるStep 7

文字やイメージ画像の背景を透明にしたいときは、［SiGN］で保存するファイル形式を初期設定の［JPEG］から［PNG］に変更し、スライダーで透明度を［０］にする。

ロゴ画像の背景が透過するように設定する

Step 8

「GRAND MOTHER'S FOOD」（フォント：EuroStileTBlaExt 14 回転0［ドロップシャドー（黒）1］適用）を配置

「Delicious」（フォント：CandiceD 15 回転 21［縁取り/縁取り（シロ）］適用）を配置

①［SiGN］の画面下に表示される［ファイル形式］で［PNG］を選択

②スライダーを左に移動し、透明度を［０］にする

背景の色を付けて残したい場合は［JPEG］のままでいい。

point

［SiGN］で［保存］を実行。［ブロックエディタ］で［適用］ボタンを押してから、［サイトエディタ］で［プレビュー］を実行して確認をする。

サイトロゴの完成Step 9

ロゴが挿入された

079

1基本操作





6応用＆運用


a付録

素材を使ってサイトをデザインする

Column

　ウェブサイトのデザインで重要なのは、そのサイトのコンテンツにマッチした写真やイラスト、飾り、アイコンなどを使うことだ。きちんとデザインされたページは、利用者がひと目で何のサイトなのかが理解できるデザインが施されているものだ。BiNDのカートリッジ（テンプレート）には、さまざまなジャンルの素材があらかじめ組み込まれているが、どちらかというと汎用的なものが多いため、作りたいウェブすべてにマッチするわけではない。しかし、自分で写真を撮ったり、イラストを描いたりするのは技術的にも時間的にも難しいという人もいるだろう。かといって、プロのカメラマンやイラストレーターに発注するとなると相当なコストがかかってしまい、個人には負担が大きすぎる。　そこでお勧めなのが、写真やイラストなどをダウンロードで提供するネットサービスだ。かつては雑誌や広告向けに提供されていたサービスだったため、利用料が非常に高額であったが、最近はウェブでの使用を前提として、個人でも利用可能な価格で提供されるようになってきた。「iStockphoto」（http://nihongo.istock photo.com/）は、そうした低価格での素材ダウンロードサービスとしては先駆的な存在で、現在全世界で400万人の会員が利用しているということだ。低価格の素材ダウンロードサービスの中には「安かろう、悪かろう」的なものも見られる。しかしiStockphotoで提供されている写真やイラストなどは、現在、６万7000人ほどのクリエイターが提供している素材からiStockphotoの審査スタッフが品質や権利などに問題がないかを確認して提供されているので、全体のクオリティーが高

い。例えば、「自転車」をキーワードに検索すると、写真素材は約１万7000点、イラスト素材は約1700点ヒットする。同サービスのサイトでは、さらに好みのキーワードなどで絞り込みをかけることができるので探しやすい。イラストの素材の中には、アイコン集なども登録されているので、サイトのリンクや見出しなどを飾るのに役に立ちそうだ。　iStockphoto以外にも同様のサービスを提供している業者はあるので、自分の好みに合ったものを利用してみるといいだろう。利用料は素材によるが、ウェブで使うサイズであれば数百円～数千円ほどですむものが多い（正確な利用料および使用条件についてはそれぞれの場合で異なるので、サービスのライセンスについての説明をよく読むこと）。たった数百円で、自分のウェブページがグレードアップできるのであれば、試してみる価値はあるだろう。

「iStockphoto」で「自転車」をキーワードに検索した結果。BiND4のプロフェッショナル版には、「iStockphoto」の素材を10点まで無料でダウンロードでき、それ以外にも15％引きでサービスを利用できるクーポンが付いている。

080


テキスト主体のページデザインでは、見出しや小見出しを効果的に入れることで読みやすくなる。画像の見出しを作ってデザインにアクセントを付けてみよう。

見出しを画像化してデザインする

［編集］ボタンをクリックし、小見出しを編集したいブロックを［ブロックエディタ］で開く。

ブロックエディタでブロックを開くStep 1［SiGN］が起動すると、テンプレート一覧が開く。［テンプレートの種類］から［ブランクテンプレート］を選び、ここでは［225-115-01］のテンプレートを選択する。

タイトルテンプレートを選ぶStep 3

［ブロックエディタ］が開いたら、［パーツ一覧］から［SiGN］ボタンをクリックして［SiGN］を呼び出す。

SiGNを起動するStep 2

見出しやタイトルの文字列に特定のフォントを指定しても、ウェブブラウザでの表示は、閲覧するユーザーのフォント環境によるため、多くの場合想定通りには反映されない。見出しや小見出しなど、通常の文字列を太字にしたりイタリックにしたりと変化をつけるのが一般的だが、どうしても使用したいフォントがあるときは、画像化したものを貼り付けることになる。SiGNを活用してイメージ通りの見出しを作成しよう。

point



［SiGN］ボタンをクリック

①［ブランクテンプレート］をクリック

②テンプレートを選択 ③［作成］をクリック

081





6応用＆運用


a付録

1基本操作


Featured Function

見出しテキストを入力する

テンプレートを［作成］すると、［SiGN］の編集画面に移動する。テンプレートの［TEXT］枠をクリックして編集を開始する。テキスト枠には見出しとなる文字を入力し、必要に応じて色やフォントを設定する。

Step 4 背景を透明にして書き出す

画像ファイルの形式を［PNG］に設定し、スライダーで［透明度］を「0」にする。これによって、背景の色に左右されずに見出しを配置することができる。最後に［保存］ボタンをクリック。

Step 6

文字にエフェクトを適用する

画面下部にある［エフェクト］をクリックし、文字に［グロー］効果を加える。

Step 5

プレビューで画像を確認する

［サイトエディタ］の［プレビュー］ボタンをクリックして、完成したページをウェブブラウザで確認する。デザインや本文の内容に合った見出しにすることで、統一感を損なわずに印象を変えることができる。

Step 7


①［グロー］タブをクリック ②［グロー２］を選択


②見出しを入力する

③文字の色を指定する②スライダーを左端まで動かす

③［保存］をクリック

①［PNG］を選択する

エレガントなデザインの見出しが完成

082

グラフィック&デザインLesson3-7

［テーマ］機能を使えば、ウェブサイトの内容を変えずに、ページの背景や装飾のデザインを変えることができ、手軽にサイトのイメージチェンジを図れる。

サイトのデザインをまとめて変更する

テーマの切り替えによるデザインの変更は、コーナー内のすべてのページに適用されるので注意が必要だ。

point

デザインを変更するサイトを［サイトエディタ］で開く。サイト内に複数のコーナーがある場合、デザインを変更したいコーナーの中のいずれかのページを選択する。

デザインを変更するサイトを選択Step 1

デザインを変更したいコーナーのページを選択

［テーマ］ボタンをクリックし、表示された一覧からテーマを選択する。ウィンドウ左側の［カテゴリー］をクリックすると一覧が切り替わるので、好みのテーマを選ぼう。

テーマ一覧からテーマを選ぶStep 2

①［テーマ］ボタンをクリック

②カテゴリーを選ぶ ③テーマを選択

BiNDに収録されているテーマカートリッジのデザインは、BiND上では細かい変更ができない仕様になっている。たとえば、見出しの文字の色や、本文の行間をどうしても変更したいというユーザーのために、「CSS改造キット」が配布されている（デジタルステージのウェブサイトからダウンロード可能）。その名の通り、テーマカートリッジのCSS（スタイルシート）を書き替えてデザインを変更するためのツールだ。「CSS改造キット」は、Adobe Dreamweaver CS4以上と併用することで、スタイルをカスタマイズしやすくなる。これを利用すれば、独自のテーマを作ることも夢ではない。ただし、DreamweaverとCSSを熟知しているユーザーでないとテーマの改造は難しく、またCSSを書き替えたテーマはサポート対象外となるので注意が必要だ。

CSS改造キットを使ってテーマを変更する

memo




6応用＆運用


a付録

1基本操作


083

［サイトエディタ］ → ［テーマ］

Featured Function

テーマを適用する

［適用］ボタンをクリックするとコーナー全体にテーマを変更を確認するダイアログが表示されるので、ここでは［OK］ボタンをクリック。元のレイアウトが保持された状態で、背景など全体のテーマが切り替わる。変更を確認したら［閉じる］ボタンをクリックする。

Step 3テーマを変更したものの、やっぱり前のデザインに戻したいというときは、サイド［テーマ］ボタンをクリックして元のテーマを適用すればいい。ただし、自分で背景などをカスタマイズしている場合は、元通りに戻らないことがあるので注意しよう。

point

①元のテーマを選択 ②［適用］をクリック

修正が必要な箇所を確認する

テーマを変更したことで背景の色などが変わると、初期状態の文字色では見づらくなることがある。［サイトエディタ］での［プレビュー］ボタンをクリックして確認する。作例では、ヘッダに配置してあるタイトルが背景に沈んでしまった。

Step 4

オレンジの文字が見づらくなった

②［OK］をクリック


③［閉じる］をクリック

④背景などの設定が変更された状態

084

Lesson3-7 グラフィック&デザイン


①［ページ設定］を開く

ここでは、ヘッダ部分のタイトル表示を改善するために、ヘッダエリアの背景を修正する。［サイトエディタ］で［設定］ボタンをクリックして［ページ設定］を開く。［ヘッダ］の［背景スキン］をクリックしてプルダウンメニューから［F-半透明ブラック角R］を選択して［ページ設定］の［OK］ボタンをクリックする。

ヘッダの背景を変更するStep 5

背景を変更したデザインを、オリジナルのテーマとして保存する。まず［テーマ］ボタンをクリックし、次にカテゴリーの［ユーザー設定］を選択して［＋］ボタンをクリック。表示されるダイアログにテーマの名前と保存先となるフォルダ名を入力して［OK］ボタンをクリックする。

テーマを保存するStep 6

背景と同系色になってしまった文字は、［ブロックエディタ］の［ブロックスキン］やフォントの色を変更することでも見やすくなる。

point

④［フォルダ名］を入力


①テーマ一覧で［ユーザー設定］を選択

②［＋］ボタンをクリック

③［コーナースキン名］を入力

⑥背景が変わり、タイトルが際立つようになった

②［ヘッダ］の［背景スキン］をクリック

④スキンの種類を選択する

③ブランクアイコンをクリック

Lesson3-7 グラフィック&デザイン


□□□□□□□□□■

1

3□□□□□□□□□■




6応用＆運用


a付録

1基本操作


085

［ユーザー設定］として保存された自作のテーマは、再利用が可能になる。Step6で保存したテーマを別のコーナーに適用することで、そのコーナー内のほかのページにもデザインの修正が反映される。

自作のテーマを適用するStep 7

テーマの変更は、変更を適用したときに開いていたページから見て第一階層（同じディレクトリ）内にあるファイルに適用する。ほかのコーナー（別のディレクトリ）に格納されているファイルには適用されないので注意が必要だ。逆にこの特性を活かして、テーマを変更したくないページを下層ディレクトリに移動させてからテーマの変更を施行したり、一部のコーナーだけにテーマの変更を適用することも可能だ。

テーマの変更をコーナーで管理する

memo

①変更したテーマが反映されている

②元のデザインのままで、テーマの変更は反映されない

③ほかのページにも背景の修正が反映される

①［ユーザー設定］のテーマを選ぶ


⑥保存したテーマが表示される

086

グラフィック&デザインLesson3-8

［ブロックスキン］は、ブロックのデザインを手軽に変更でき、ページの印象をガラリと変えるのに役立つ機能だ。これを利用して、メニューのデザインを変更する。

メニューのデザインを変更する

［サイトエディタ］でメニューのブロックを選択し、［編集］ボタンをクリックする。

サイトエディタでブロックを選択して開く

Step 1［設定］画面の［ブロックスキン］で［シンプル（白）］から［スタンダード（黒）］へ変更。さらに［ブロックフレーム］を［なし］から［ベタ塗りの枠］に変える。

ブロックスキンを選択するStep 3

［ブロックエディタ］でブロックを開いたら、画面上部の［設定］タブをクリックして画面を切り替える。

ブロックエディタの［設定］を開くStep 2

［ブロックフレーム］を適用しない場合は、右側の［ブランク］ボタンをクリックする。

point［設定］をクリック

②［編集］ボタンをクリック①［スタンダード（黒）］を選択

［ブランク］ボタンをクリック


②［ベタ塗りの枠］を選択





6応用＆運用


a付録

1基本操作


087

●変更前

［ブロックエディタ］→ ［設定］ → ［ブロックスキン］

［ブロックスキン］は、本来見出しや小見出しのデザイン周りにアクセントを付ける機能で、カラーバリエーションも用意されている。また、ブロックフレームや背景色などを組み合わせることで、このページで紹介したようなさまざまなスタイルが実行できるので、いろいろ試してみよう。

ブロックスキンのバリエーション

memo

［カラー（オレンジ）］を選択

Featured Function

サイトエディタで確認

［ブロックエディタ］を閉じて、［サイトエディタ］で［プレビューボタン］をクリック。デザインの変更を確認する。

Step 4

①［プレビュー］をクリック

●オレンジ

●オリーブ

●レッド

元のテーマやデザインによって［ブロックスキン］の反映は異なる。

point

●変更後

②メニューのデザインが変わった

088


さまざまなコンテンツへの入り口となるリンクボタンは、デザインの重要な要素だ。ブランクテンプレートを使って、オリジナルデザインのボタンを作ってみよう。

リンクボタンをデザインする

はじめにリンクボタンを配置したいブロックを［ブロックエディタ］で開き、次に［パーツ一覧］から［SiGN］を起動する。

SiGNを起動するStep 1

まず画面上部にある［テンプレートを選ぶ］をクリックしてテンプレート一覧を開く。初期状態では［デザインテンプレート］の一覧が開くので、ここでは［テンプレートの種類］から［ブランクテンプレート］を選ぶ。次に［カテゴリー］から［ジョイント01］をクリックして開き、ボタン用のテンプレート［172-52-01］を選択後、［作成］ボタンをクリックする。

［ブランクテンプレート］からボタン用のテンプレートを選択する

Step 2

［SiGN］ボタンをクリック

①［テンプレートを選ぶ］をクリック

あらかじめ画像やテキストを配置した［デザインテンプレート］に対し、［ブランクテンプレート］は白紙の状態のテンプレートだ。テンプレート名からもわかるように［ブランクテンプレート］はそれぞれ縦横の幅が固定されているので、イメージするボタンのサイズに合うテンプレートを選ぼう。

point

②［ブランクテンプレート］を選択する

③［ジョイント01］をクリック

④［172-52-01］を選択

⑤［作成］ボタンをクリック

089





6応用＆運用


a付録

1基本操作


Featured Function

読み込んだ画像全体が表示領域に収まるように、［フィット］ボタンを利用して画像のサイズを調整する。ここでは、画像が表示可能領域の天地に合わせて縮小した。

画像を表示領域に収めるStep 4アイコン画像を配置する

［SiGN］の画面に戻ったら、［IMAGE］枠をクリックして編集画面を開く。編集画面で［画像ファイルを選択］ボタンをクリックして、画像を選択する。

Step 3

ハイライトの範囲を超えた画像は、切り取られて表示される。写真を使う場合は見せたい部分が上手く切り取られるように配置しよう。

point

①大きい方の［IMAGE］タブをクリック

②［画像ファイルを選択］ボタンをクリック

④［選択］ボタンをクリック

③ボタンに使用する画像を選ぶ

①画像が表示可能領域を大幅に超えている

②右側の［フィット］ボタンをクリック

③画像をドラッグして左端まで移動する

④画像を移動したら［OK］をクリック

090

Lesson3 グラフィック＆デザイン-9

リンクボタンをデザインする

［TEXT］枠をクリックしてボタンに表示したい文字を入力する。テキストの編集画面で、文字のサイズや色、配置などを調整する。

テキストを追加するStep 5

［SiGN3］では、文字に色を付けることも可能です。また、画面下部にある［エフェクト］の［無し］と表示されている部分をクリックするとエフェクトを選択する画面になり、さまざまな加工を施せるので試してみましょう。

point

ブロックエディタに戻り［ボタン］パーツを選択。［見出しパーツ作成設定］で［クリック設定］タブをクリックする。

［クリック設定］を開くStep 6

サイト内のほかのページへのリンク先は［リンクする］のメニューから選択。外部ウェブサイトへのリンクは、URLを入力する。リンクを新しいウィンドウで開きたい場合は、［ページ遷移］で［ターゲット：設定する］ボタンをクリックし、ターゲットのメニューから「_blank」を選択する。

リンク先を設定するStep 7


②任意の文字を入力する

③フォントを選択

④文字を移動する

①［ボタン］パーツを選択

②［クリック設定］を開く

①移動先のページのURLを入力する

②［設定する］をクリック

⑤［OK］をクリック

091




6応用＆運用


a付録


基本操作

1

Featured Function


リンクボタンは［ブロックテンプレート］でも作成・配置が可能。ナビゲーションメニューのように、複数のリンクボタンをブロック全体に適用したいときなどに利用すると便利だ。なお、すでにコンテンツがあるブロックに［ブロックテンプレート］を適用すると、内容が消えてしまうので注意が必要だ。

ブロックテンプレートでリンクボタンを作成

memo

③「_blank」と入力する

設定が完了したら［適用］ボタンをクリック。［サイトエディタ］で［プレビュー］ボタンをクリックしてウェブブラウザで確認する。

プレビューで確認するStep 8

ページデザインに合ったリンクボタンが完成

［ボタン］単体のテンプレートのほかに、ナビゲーションメニューとして使用できる［目次式］ボタンのテンプレートも用意されている。使用用途によって使い分けるといい。

092


ページのレイアウトに合わせて画像のサイズ変更や、トリミングを行う。BiNDなら画像をウェブページに適切な形式に自動的に変換してくれるので作業は簡単だ。

画像を加工してページに配置する

画像を配置したいブロックを［ブロックエディタ］で開く。画像を配置する箇所をクリックしてカーソルを挿入し、［パーツ一覧］の［画像パーツ］ボタンをクリックする。

ブロックエディタで画像パーツを挿入する

Step 1

［画像パーツ］ボタンをクリック

［ブロックエディタ］に配置されたサムネールを選択して、［画像パーツ設定］の［画像編集］ボタンをクリックする。

画像編集ボタンで画像の加工を開始する

Step 3

横を向いている写真を、［画像エディタ］下部にある［回転］ボタンを使って向きを正す。［回転］ボタンをクリックすると、右回り／左回りにそれぞれ90度ずつ回転する。

回転ボタンで画像の向きを変える

Step 4

①画像のサムネールを選択

②［画像編集］ボタンをクリック

右回りの［回転］ボタンをクリック

［アイテムブラウザ］が開いたら、使用する画像を選択して［適用］ボタンをクリック。

画像を選択してアイテムブラウザを開く

Step 2

①画像を選択


参照 P.46 アイテムブラウザの使い方

093





6応用＆運用


a付録

1基本操作

［ブロックエディタ］ → ［画像］パーツ

Featured Function

［ブロックエディタ］で画像のサムネールを選択し、［画像パーツ設定］の［テキストの回り込み］を［右寄せ］に設定する。

テキストの回り込みを有効にして配置を決める

Step 7

表示サイズを設定する

［画像エディタ］の［画像サイズ］で縦横それぞれのピクセル数を設定。［比率を固定］のチェックを外して、縦横ともに［300］と入力。すると、表示エリアが300ピクセル四方の正方形に変わる。

Step 5

テンプレートのレイアウトや画像のオリジナルサイズの比率を変更したくない場合は、［比率を固定］を有効にする。［比率を固定］が有効な場合、縦・横いずれかに数値を入力すると、もう一方も同じ比率で自動的に拡大／縮小される。

point

［画像エディタ］で［拡大／縮小スライダー］の右側にある［フィット］ボタンは、縦または横の辺を表示領域に合わせて自動で拡大／縮小したいときに便利なツールだ。

point

テキストの回り込みを有効にして配置を決める

［サイトエディタ］で［プレビュー］ボタンをクリックし、ウェブブラウザで内容を確認する。

Step 8画像のトリミング範囲を決定する

［拡大／縮小］スライダーを動かして画像を拡大縮小させながらトリミングする範囲を決める。画面のハイライト部分が表示領域となり、その外側で暗転している部分はウェブページ上では表示されない。画像の見せたい部分が表示領域に入るように、ドラッグして位置を調整する。拡大／縮小と位置が決まったら［OK］ボタンをクリック。

Step 6

②縦横ともに300と入力する

①［比率を固定］のチェックを外す

②ドラッグで画像を移動させる

①［拡大／縮小］スライダーを動かす

①画像のサムネールを選択する

②［テキストの回り込み］メニューで［右寄せ］を選択


画像の周りをテキストが周り込んでいる

094


リンクが付いた画像にポインターを重ねると変化する仕組みを「ロールオーバー」と言う。BiND4では、リンク画像にこのロールオーバーを簡単に設定することができる。

ロールオーバーでリンク画像を変化させる

ロールオーバーは主にリンクが存在していることを示すために使われる仕掛けだ。そのためBiNDでは、ロールオーバー画像を設定するには「リンクする」を選択するようになっている。

point

［サイトエディタ］で、ロールオーバーを設定したい画像があるブロックを選択して、［編集］ボタンをクリックする。

ロールオーバーさせる画像があるブロックを選ぶ

Step 1

［ブロックエディタ］が開いたら、ロールオーバーさせたい画像をクリックして選択。画面右側の［画像パーツ設定］で［クリック設定］をクリック。［リンクする］が選択されていることを確認して、［ロールオーバー画像...］をクリックする。

ロールオーバーさせる画像を選択して［クリック設定］を開く

Step 2



ロールオーバーを設定したい画像を選択

③［ロールオーバー画像...］をクリック

②［リンクする］になっていることを確認

①［クリック設定］をクリック

［ブロックエディタ］画面上部に表示されたダイアログで［ロールオーバー画像を使用する］にチェックを入れる。

ロールオーバーを有効にするStep 3

［ロールオーバー画像を使用する］にチェック

095





6応用＆運用


a付録

1基本操作


ロールオーバー画像の設定を完了する

ロールオーバー画像の設定のダイアログで［OK］ボタンをクリックし、［ブロックエディタ］の［適用］ボタンをクリックする。

Step 5

Featured Function

ロールオーバー画像を設定する

ここでは、ロールオーバーした際に明るくなり、少し浮き上がったように見えるように、画像を設定する。まずダイアログの［明るく＋１］と表示されたボタンをクリック。表示されたメニューから、［明るく＋２］を選択。次に［画像編集］ボタンをクリック。［画像エディタ］が開いたら、画像をドラッグして少しだけ上に移動させる。

Step 4

画像エディタでどれだけ画像をずらすかは好みによる。数ピクセルずらすだけでも十分効果的だ。大きくずらして特殊な効果を狙う設定も試してみていいだろう。

point

①ボタンをクリック

②［明るく＋２］を選択

③［画像編集］ボタンをクリック

④画像をドラッグして上に移動

①［OK］ボタンをクリック


ロールオーバーの効果を確認する

［サイトエディタ］で［プレビュー］ボタンをクリックして、ブラウザでロールオーバーの効果を確認する。

Step 6

ポインターを重ねると、画像が明るくなり少し浮き上がったように見える

⑤［OK］をクリック

096


P.94で紹介したロールオーバーの設定では、画像がずれて、明るく、あるいは暗くなる仕掛けしか、できなかった。しかし［SiGN］で画像を作れば、色が変わるロールオーバーも可能だ。

ロールオーバーで色が変化するリンク画像を作る

ロールオーバーを設定する画像があるブロックを［ブロックエディタ］で開き、画像を選択。［設定エリア］の［SiGNを起動する...］をクリックする。

ブロックエディタでロールオーバーさせる画像を選び、SiGNを起動

Step 1

［SiGN］が起動したら、［別ファイルとして保存］を実行して画像を書き出す。

SiGNで画像を別ファイルとして書き出す

Step 2

［SiGN］の［SHAPE］枠をクリックする。［SHAPE］編集画面になったら、画面左下にある［シェイプカラー］をクリックして色を変更し、［OK］をクリック。Step2と同様に［別ファイルとして保存］を実行して画像を書き出す。

画像の背景の色を変更して書き出すStep 3

SiGNパーツを削除して画像パーツを挿入する

SiGNで［キャンセル］ボタンをクリックして保存せずに終了する。［ブロックエディタ］に戻ったら、SiGNパーツを削除。同じ位置にカーソルを配置して、［パーツ一覧］の［画像パーツ］ボタンをクリック。

Step 4

①ロールオーバーを設定する画像を選択

②［SiGNを起動する...］をクリック

［別ファイルとして保存］を実行して画像ファイルを保存する

②［画像パーツ］ボタンをクリック

①SiGNパーツを削除

①［SHAPE］枠をクリック

②［シェイプカラー］をクリックして色を緑に変更


097





6応用＆運用


a付録

1基本操作


画像を選択してリンクを設定する

［画像パーツ］が挿入されたら、［開く...］ボタンをクリックしてStep２で書き出した画像を選択する。［クリック設定］タブを開いて、［リンクする］を選択してリンクを設定。次に［ロールオーバー画像...］ボタンをクリックする。

Step 5

Featured Function

ロールオーバー画像の設定のダイアログで［OK］ボタンをクリックし、［ブロックエディタ］の［適用］ボタンをクリック。［サイトエディタ］で［プレビュー］ボタンをクリックして、ブラウザでロールオーバーの効果を確認する。

設定を完了してロールオーバーを確認する。

Step 7

①［開く...］ボタンをクリックしてStep２で書き出した画像を選択

②［クリック設定］タブを開く

③［リンクする］を選択してリンクを設定

④［ロールオーバー画像...］をクリック

ロールオーバー画像を設定する

［ブロックエディタ］画面上部に表示されたダイアログで［ロールオーバー画像を使用する］にチェックを入れる。次に［開く］ボタンをクリックしてStep３で書き出した画像を選択する。

Step 6

①［ロールオーバー画像を使用する］にチェック

②［開く］ボタンをクリックしてStep３で書き出した画像を選択

①［OK］ボタンをクリック


①ポインターが重なっていない状態なら黄色

②ポインターが重なると緑になる

098


BiNDで文字に色を付ける場合、カラーパレットなどのユーザーインターフェースから選択するだけでなく、16進法による色情報で設定することもできる。コーポレートカラーなど、規定の色情報が指定されている場合に便利な機能だ。

文字の色を指定のコーポレートカラーにする

［サイトエディタ］の［設定］にある［ページ設定］で、背景などの色も16進法のカラーコードを使って指定できる。

point

文字色を変更したいテキストのあるブロックを選択して、［編集］ボタンをクリック。

ブロックを選択してブロックエディタを開く

Step 1ダイアログの［カラーコード］に、16進法６桁のコードを入力。［OK］ボタンをクリック。［適用］ボタンを押し、［サイトエディタ］で［プレビュー］ボタンをクリックして色が付いたことを確認する。

数値を入力して［適用］ボタンをクリック

Step 3


［ブロックエディタ］が開いたら、色を付けるテキストを選択。フォントの色指定ボタンをクリックして［数値で指定する...］を選ぶ。

色を付ける部分を選択するStep 2


①テキストを選択

②色指定ボタンをクリック

③［数値で指定する...］を選択

①16進法６桁のコードを入力

②［OK］ボタンをクリック

③文字に指定通りの色が付いた

099

ウェブサービスとの連携CONTENTS

-1 ウェブサイトにブログを組み込む 100 -2 アンケートフォームを組み込む 104 -3 USTREAMが閲覧できるページを作る 106 -4 オリジナルアイコンを配置した地図をページに埋め込む 108 -5 YouTubeの動画を貼り付ける 110 Column YouTubeの再生リストを作る 112 -6 画像共有サービス上の写真をページに貼り付ける 113 -7 Google Mapをページに埋め込む 114 -8 ブログパーツをページに埋め込む 116 -9 ニュース情報をウェブページに組み込む 118 -10 ソーシャルブックマークへの登録ボタンをページに組み込む 120 -11 RSS購読ボタンをページに組み込む 122 -12 グループで作業可能な表を挿入する 124 -13 独自のRSSを設置する 126 Column RSSについて 129 -14 Twitterへの登録ボタンとタイムラインを組み込む 130 Column Twitterというウェブサービスの可能性 132 -15 サイトの内容を検索可能にする 133 -16 サイトを自動翻訳して表示させる 134

Lesson4

4Lesson

100

-1

Bloggerで作成したブログの管理画面

BiNDがサポートする各種ブログサービスでアカウントを登録し、ブログを作成する

ブログを開設するStep 1

BiNDがサポートしているブログサービスは、下記の8種類（2010年8月現在）。Blogger　http://www.blogger.com/Yahoo! ブログ http://blogs.yahoo.co.jp/Ameba ブログ　http://ameblo.jp/ココログ http://www.cocolog-nifty.com/FC2ブログ　http://blog.fc2.com/JUGEM　http://jugem.jp/livedoor ブログ　http://blog.livedoor.com/goo ブログ　http://blog.goo.ne.jp/

point

ブログを配置したいブロックを［ブロックエディタ］で開き、［ウェブサービス系パーツ］タブにある［ブログ］ボタンをクリック。

ブロックエディタのパーツ一覧からブログを選ぶ

Step 2

［SYNC］が起動したら、利用しているブログサービスを選び［次へ］ボタンをクリックする。

ブログサービスを選択するStep 3

ウェブサービスとの連携

①［ウェブサービス系パーツ］タブを開く

②［ブログ］ボタンをクリック

①利用しているブログサービスを選択する

②［次へ］ボタンをクリック

各種ブログサービスで公開中のブログをBiNDで作ったウェブページに組み込む方法を紹介する。現在、BloggerやYahoo!、Ameba、livedoorといったブログサービスをサポート。

ウェブサイトにブログを組み込む

101

1基本操作





6応用＆運用


a付録

Step1で作ったブログを開いてURLを確認し、［SYNC］の［ブログの設定］画面に入力。さらに、表示するエントリー（記事）の数と、ブログサービスのウェブページへのリンクの文字も設定して、［次へ］ボタンをクリックする。

ブログのURLを入力するStep 4

［デザインの選択］画面で、ウェブページの中でブログをどのように表示するか、デザインを選択して、［次へ］ボタンをクリックする。

掲載するデザインを選択するStep 5

［設定の確認］画面で各種設定項目を確認したら、［適用］ボタンをクリック。ブロックエディタに戻り、さらに［適用］ボタンを押して保存する。

設定を確認して適用するStep 6

Featured Function

①ブログサービスのURLを確認

②ブログのURLを入力

③表示するエントリーの数を設定 ④ブログへのリンクの文字を入力

①ブログのデザインを選択


①設定を変更したい場合は［前へ］ボタンで戻る

②設定がOKなら［適用］ボタンをクリック

③ブロックエディタでも［適用］ボタンをクリック

［ブロックエディタ］ → ［ウェブサービス系パーツ］ → ［ブログ］パーツ

-0

102

Lesson4-1 ウェブサービスとの連携

リンク付きの画像を配置する

適用したら、サイトエディタの［プレビュー］ボタンをクリックして確認する。

ブログを組み込んだページが完成Step 7

ブログのデザインバリエーション

memo

BiNDで［ブログ］パーツを使ってウェブページにブログを表示させる場合、下記のようなバリエーションが用意されて

いる。ブログのエントリー（記事）をニュースの見出しのようにする場合は［タイトルのみ］、しっかり記事を読ませるページにする場合は［メイン（トップページ＆記事）］といったように用途に応じて選んでみよう。

●スタンダード ●タイトルのみ ●ページ表示

エントリーの見出しと、本文、ブログへのリンクが表示される。

エントリーの登録日時とタイトル、リンクが表示される。

「次の／前のエントリーへ」をクリックすると各エントリーを１つずつ表示する。

●テーブル式表示

［メイン］は、タイトルと記事が表示される。［サイド］は、記事を投稿した日付が示されるカレンダーと、記事に設定したラベルのリストが表示される。［サイド］のデザインはBloggerを利用している場合のみ選択できる。

●メイン（トップページ＆記事）●サイド　（カレンダー＆カテゴリー一覧）

①［プレビュー］ボタンをクリック

サイド

メイン

②ウェブページにブログが組み込まれた

スタンダードと同じ内容がテーブルを使ったデザインで表示される

103

1基本操作





6応用＆運用


a付録

現在、ブログサービスの多くは無料で提供されており、利用者もかなりの数に上る。ここではGoogleが提供している「Blogger」というブログサービスを例に、ブログの作成からエントリー（記事の投稿）までを説明する。いずれのブ

ログサービスでも、ブログ公開までのおおまかな流れは同じような手順（アカウントを用意する→ブログのタイトルとURLを決める→デザインを決める→初エントリーを投稿する→公開）となっているので参考にしてほしい。

Bloggerでのブログの作り方memo

ログインしたら、画面上部に表示される［ダッシュボード］をクリック。次に［ダッシュボード］画面の［今すぐブログを作成］ボタンをクリックする。

2

http://www.blogger.com/startを開く。Googleのアカウントをすでに持っている場合は、右上の［Googleアカウントでログイン］でログイン。持っていない場合は［ブログを作成］をクリックすると表示されるアカウント作成画面でメールアドレス、パスワード、ハンドルネームなどを入力して登録する。

1 4

3

次に［ブログタイトル］と［ブログアドレス］を設定する画面が表示されるので、それぞれ入力する。

デザインのテンプレートを選択し、［次へ］ボタンをクリック。テンプレートの設定はブログを公開した後でも変更可能だ。また、背景や文字の色の設定なども自由に設定できる。

5 表示された画面で［ブログを開始する］をクリック。エントリーの入力画面でタイトルと本文を書き込み、［投稿を公開］する。

6

「ブログの投稿を公開しました。」と表示されたら［投稿を表示］をクリックして、出来上がったブログを確認。これでブログが完成する。

104

4 ウェブサービスとの連携Lesson -2

アンケートフォームを組み込むブロックを［ブロックエディタ］で開く。挿入する位置にカーソルを置き、画面右側の［パーツ一覧］の［ウェブサービス系パーツ］にある［フォーム］をクリック。

ブロックにフォームパーツを組み込む

Step 1

①フォームを挿入する位置を決める

［SYNC］の「ようこそフォームへ」画面で［次へ］をクリック。［Googleアカウントの設定］画面が開いたら、［GoogleアカウントからSYNCへのアクセスを許可する］をクリック。Googleのログイン画面が開くので、ログインしてから［アクセスを許可］をクリックする。Googleアカウントを持っていない場合は、新規アカウントを作成してから、アクセスの許可を有効にする。

Googleアカウントを設定するStep 2

［アクセスを許可］をクリック

続いて、［フォームの種類の選択］画面になったら、用意されているフォームの種類から［お問い合わせフォーム］を選択して［次へ］ボタンをクリックする。

フォームの種類を選択するStep 3

①［お問い合わせフォーム］を選択

次に［項目の設定］画面に切り替わって［お問い合わせフォーム］のフォーム項目がリスト表示される。不要な項目は選択し［削除］を押して消去する。次に項目リストの下部にある［項目を追加］右端の［v］ボタンを押して、アンケートの質問に似た項目を選んで［追加］ボタンをクリックする。追加された項目の見出しをクリックして項目名のテキストを変更。さらに［入力欄を編集］をクリックして、選択肢や入力欄などの設定を行う。この項目の追加作業を繰り返して、アンケートの質問事項を登録し終わったら、［次へ］をクリックする。

フォームをカスタマイズするStep 4

②［ウェブサービス系パーツ］をクリック

③［フォーム］をクリック


アンケートフォームをページに組み込むサイトの閲覧者から問い合わせなどを受け取る場合、フォームを設けてデータベースに登録されるようにしておけば便利だ。ここでは、BiNDのフォーム機能を使って、アンケートをページに組み込んでみる。

105

1基本操作





6応用＆運用


a付録

フォームの見出しや説明文を設定する

Step 5

［設定の確認］画面で［適用］ボタンをクリック。さらに［ブロックエディタ］でも［適用］ボタンをクリックしたら、［サイトエディタ］の［プレビュー］ボタンを押してブラウザで確認する。

内容を確認して適用し、プレビューする

Step 6

フォーム項目のカスタマイズは、既存のものを参考にしながら設定するといい。タイプを変更すると、ラジオボタンやチェックボックス、選択リストをフォームに利用できる。正規表現を使って入力する形式を制限することも可能だ。

point

③追加する項目を選択

④［追加］ボタンをクリック

⑤入力欄の設定を変更する

①［フォーム名称］を設定する

②［説明］を入力

アンケートフォームの完成

②［削除］をクリック①不要な項目を選択

［フォームの設定］画面でフォームの上に表示される名称や説明文などを設定する。またフォームが送信された後にその内容をメールで知らせるなどの設定もこの画面で行う。［次へ］ボタンをクリック。２つ目の［フォームの設定］画面では、Step4でメールアドレスを入力するようにした場合、返信メールを送るように設定できる。送る場合は設定して［次へ］ボタンをクリック。

③フォームの送信後の処理を設定する

［ブロックエディタ］ → ［ウェブサービス系パーツ］ → ［フォーム］パーツ

Featured Function

4Lesson

106

-3

大規模なライブ動画中継を誰でも簡単に実現できるサービス「USTREAM」。このネット放送をウェブページの中で表示させる仕組みがBiNDの［USTREAM］パーツだ。


ページに組み込むUSTREAMをブラウザで開いて、そのURLをコピーする。

USTREAMのURLをコピーStep 1

［USTREAM］パーツを組み込むブロックを［ブロックエディタ］で開いたら、画面右側の［パーツ一覧］の［ウェブサービス系パーツ］にある［USTREAM］をクリックする。

ブロックにUSTREAMパーツを挿入する

Step 2

［SYNC］が立ち上がると、まず［URLの設定］画面が表示される。このURL入力欄に、Step1でコピーしたUSTREAMのURLをペースト。［次へ］ボタンをクリックする。

USTREAMのURLを設定するStep 3

［アイテムの種類の選択］画面が表示されたら、［貼り付けるパーツの種類］から［ライブ番組］を選択。［次へ］ボタンをクリックする。

組み込むUSTREAMの種類を選ぶStep 4

①［ウェブサービス系パーツ］をクリック

②［USTREAM］をクリック


①USTREAMのURLをペースト

①USTREAMをブラウザで開く ②URLをコピー

①［ライブ番組］を選択


USTREAMが閲覧できるページを作る

107

1基本操作





6応用＆運用


a付録

［ブロックエディタ］ → ［ウェブサービス系パーツ］ → ［USTREAM］パーツ

Featured Function

［オプションの設定］画面が開いたら、［プレイヤーの表示サイズ］でUSTREAMを表示する大きさをブロックのサイズに合わせて指定する。［次へ］ボタンをクリックして、［設定の確認］画面で設定内容を確認して問題がなければ、［適用］ボタンをクリックする。

USTREAMを表示するサイズを設定

Step 5

Step2で［ライブ番組］の［USTREAM］パーツを配置したブロックを［ブロックエディタ］で開き、［USTREAM］パーツの下にカーソルを挿入して、再び［パーツ一覧］の［USTREAM］をクリック。

もう１つUSTREAMパーツを挿入する

Step 6

［SYNC］が立ち上がったらStep3、4と同様にして、［アイテムの種類の選択］画面を開いて［ソーシャルストリーム］を選択。［次へ］ボタンをクリックしていき最後に［適用］する。

メディアストリームのUSTREAMパーツを配置

Step 7

［ブロックエディタ］で［適用］ボタンをクリック。［サイトエディタ］で［プレビュー］ボタンをクリック。ブラウザでUSTREAM中継されることを確認する。


サイズ（ピクセル）を指定する

①［ソーシャルストリーム］を選択

ライブ中継が表示される

Twitterなどのメッセージが表示される


①［USTREAM］パーツの下にカーソルを置く

②［USTREAM］をクリック

108


オリジナルアイコンを配置した地図をページに埋め込むウェブではアクセスマップやエリアガイドなど、地図上に情報を置いたコンテンツがよく見られる。BiNDの［Yahoo!地図］パーツを使えば、そうしたコンテンツを簡単に作ることができる。

検索した場所が表示されたら、画面下部にある［地図サイズを数値設定］をクリックして、地図を配置するブロックに合わせた数値を入力して［適用］ボタンをクリックする。

地図の表示サイズを変更するStep 3地図を配置するブロックを［ブロックエディタ］で開く。地図の挿入位置を決めて画面右側の［パーツ一覧］の［ウェブサービス系パーツ］にある［Yahoo!地図］をクリックする。

地図を挿入するブロックを開くStep 1

［SYNC］が立ち上がり、Yahoo!地図の説明が表示されたら［次へ］をクリック。［地図の編集］画面で組み込みたい場所を検索する。

地図を検索するStep 2


②［Yahoo!地図］をクリック

①地名やランドマークの名称などを入力

②［検索］ボタンをクリック

①［地図サイズを数値設定］をクリック

②地図のサイズを入力

③［適用］ボタンをクリックする

109





6応用＆運用


a付録

1基本操作

［Yahoo!地図］では複数のマーカーを配置できる。ガイドマップなど、複数の地点を指し示すコンテンツを作る際に便利だ。

複数の地点を指し示した地図memo

［ブロックエディタ］ → ［ウェブサービス系パーツ］ → ［Yahoo!地図］パーツ

Featured Function

地図にマーカーアイコンを配置する

地図のマーカー（印）を配置したい場所をクリック。すると、赤いピンのアイコンが配置されて［マーカーの説明］画面が表示される。下段にある［＋］ボタンをクリックすると、画像選択ダイアログが開くのでアイコンに使用する画像を選ぶ。［マーカーの説明］画面に選んだ画像が表示されたら、それをクリックする。

Step 4

マーカーの説明を入力する

マーカーの［タイトル］と［説明］を入力し、［更新］ボタンをクリックする。ここで入力した内容が、マーカーの吹き出しに表示される。

Step 5

地図の設定を確認して適用

［SYNC］の［次へ］ボタンをクリック。［設定の確認］画面で表示などをチェックして問題なければ［適用］ボタンを押す。さらに［ブロックエディタ］で［適用］ボタンをクリックする。

Step 6

ブラウザでプレビューする

［サイトエディタ］の［プレビュー］ボタンをクリックして、ブラウザで地図の表示を確認する。

Step 7

①地図をクリック

②［＋］ボタンをクリックして画像を登録

③登録した画像を選択

①［タイトル］を入力

②［説明］を入力

③［更新］ボタンをクリック

①地図の設定や吹き出しの内容などを確認


オリジナルアイコンを使ったマーカーが配置された地図

１枚の地図の上に配置した複数のマーカー

110

ウェブサービスとの連携Lesson4-5

動画共有サイト「YouTube」で公開されている動画をウェブページに組み込んでみよう。SYNCを使えば動画の表示サイズやプレイヤーのデザインの選択が可能だ。

YouTubeの動画を貼り付ける

URLは、掲載したい動画のYouTubeのページに記載されている。説明文の下のURL欄にある文字列をコピーして、BiND4で作ったページに貼り付ける。

point

［選択した動画の確認］画面で、入力したURLの動画のタイトル・サムネール・説明文・最終更新日・リンクが表示されるので、確認して問題がなければ、［次へ］ボタンをクリックする。

選択した動画を確認するStep 3動画を配置したいブロックを［ブロックエディタ］で開いて、［パーツ一覧］から［ウェブサービス系パーツ］を選択。一覧から［YouTube］ボタンをクリックする。

ブロックエディタのパーツ一覧からYouTubeを選択する

Step 1

［SYNC］が起動したら［次へ］ボタンをクリック。［動画ページURL］を入力後、もう一度［次へ］ボタンをクリックする。

動画のURLを入力するStep 2

①［ウェブサービス系パーツ］タブを選択

［動画ページURL］を入力

動画を確認する

［プレイヤーの選択］画面で、プレイヤーのデザインを３種類の中から選んで、［次へ］ボタンをクリックする。

動画を再生するプレイヤーのデザインを選択

Step 4

②［YouTube］ボタンをクリック

プレイヤーのデザインを選ぶ

111

1基本操作





6応用＆運用


a付録

BiNDで作ったウェブページに埋め込みが可能な動画プレイヤーには3種類のデザインが用意されている。それぞれのプレイヤーの特徴を紹介しよう。

プレイヤーのデザインはこうやって使い分けよう！memo

［ブロックエディタ］ → ［ウェブサービス系パーツ］ → ［YouTube］パーツ

●シンプルプレーヤー01

Featured Function

配置する動画の横幅と再生オプションを設定する

［オプションの設定］画面では、まず［プレイヤーのサイズ］で横幅を指定する。次に、［自動で再生開始］、［ループ再生］、［自動で次を再生］など動画再生のオプションを設定して、［次へ］ボタンをクリックする。

Step 5

プレイヤーの表示サイズは、ページのレイアウトに合わせて選択しよう。BiND4のテンプレートの標準的な約825ピクセル、サイドバーありの場合、メインのブロックの幅は約580ピクセルとなることが多い。動画がはみ出さないように、ブロック幅に収まる数値に設定する。

point

横幅を設定

設定を確認して適用する

［設定の確認］画面で各種設定項目を確認したら、［適用］ボタンをクリック。［ブロックエディタ］に戻って、さらに［適用］ボタンで内容を保存する。最後にサイトエディタの「プレビュー」ボタンをクリックして動作を確認する。

Step 6

再生のオプションを設定する


②YouTubeの動画が組み込まれて完成

ポインターを重ねるとコントローラーが表示され、ポインターを外しておけば動画のみが表示される、すっきりしたデザイン。サイズの選択が可能。

YouTubeのサイトでもおなじみの動画の下段にコントローラーが常に表示されているデザイン。サイズの選択が可能。

関連する動画を右側に表示しながら左の画面で動画を再生する。横幅が745ピクセルに固定されているため、配置するブロックのサイズには注意が必要。

●YouTube 標準

●SYNC1 プレイヤー

http://www.youtube.com/watch?v=pZ7hCYtcDHY

112

Column

YouTubeの再生リストを作るウェブページにYouTubeの動画を埋め込むときに、単体の動画ではなく再生リストにすれば、複数の動画を連続再生できる。ここではYouTubeでの再生リストの作り方と、そのリストをページに表示する方法を紹介する。

YouTubeにログインした状態で、YouTubeの動画を再生すると、その画面の下に［保存先］ボタンが表示される。これをクリックしてメニューにある既存リスト、または新規のリストを作成して動画を登録する。これを繰り返してリストを作成しよう。

「マイ動画と再生リスト」のページに切り替わったら、［再生リスト］タブ以下にあるリストからページに埋め込みたいリストを選択する。

［共有］タブをクリックし、表示された［再生リストのURL］をコピーする。

コピーしたURLをP.111のStep2と同じ入力欄にペーストすると、リストに含まれる複数の動画が登録される。 Step3以降の手順を進めてページに配置すれば完了。［自動で次を再生］を設定すれば連続再生になる。［SYNC1 プレイヤー］なら動画の右側にリスト内の動画のサムネールが表示される。

1

画面上部のユーザー名をクリックして［お気に入り］を選択する。

2

3

4

5

113

1





6応用＆運用


a付録

4Lessonウェブサービスとの連携-6

1基本操作

写真の整理やシェアに便利な画像共有サービスにアップロードした画像をBiNDで作成したページに貼り込める。ここでは、Googleが提供する「Picasa ウェブアルバム」を例に説明する。

画像共有サービス上の写真をページに貼り付ける

BiND4を起動して写真を貼り付けるブロックを［ブロックエディタ］で開く。写真を挿入する位置にStep2でコピーしたHTMLをペースト。そのHTML全体を選択し、［段落のスタイル］から［HTMLタグ］を指定する。

ブロックエディタでHTMLをペーストする

Step 3「Picasa Web Album」（http://picasaweb.google.co.jp/）を開いてGoogleのアカウントでログイン。貼り付ける画像を開いて［この写真へのリンク］をクリック。

「Picasa ウェブアルバム」にログインして貼り込む写真を開く

Step 1

［画像を埋め込み］の下にある［サイズの選択］で貼り込む画像の表示サイズを選ぶ。［アルバムリンクを非表示］にチェックを入れて、HTMLをコピーする。

貼り込む画像のサイズを選んでHTMLをコピーする

Step 2

［この写真へのリンク］をクリック

ペーストしたHTMLを選択後、段落スタイルを

［HTMLタグ］に指定する

［ブロックエディタ］で設定を［適用］後、［サイトエディタ］で［プレビュー］を実行し、ウェブブラウザで確認する。

適用後、ウェブブラウザでプレビューして確認

Step 4

画像がページに貼り付けられたのを確認

③サイズやリンク設定後にHTMLをコピー

②［アルバムリンクを非表示］にチェック

①画像の表示サイズを選択

114


［カスタムタグ］パーツを使って、BiND4で作ったページに「Google Map」の地図を組み込んでみよう。お店や会社のアクセスマップなどを簡単にサイトに掲載できる。

Google Mapをページに埋め込む

Google Map（http://maps.google.com/）で住所を検索。地図の右上にある［リンク］をクリックすると表示されるダイアログの「HTML を貼り付けてサイトに地図を埋め込みます」の下のHTMLをコピーする。

Google Mapで住所を検索して、地図を埋め込むHTMLをコピー

Step 1Google Mapを配置したいブロックを［ブロックエディタ］で開き、［カスタムタグ］ボタンをクリックする。

ブロックエディタのパーツ一覧からカスタムタグパーツを選ぶ

Step 2

①［リンク］をクリック

このとき、Google Mapの表示モード（地図／写真（地名を表示）／地形）などを変更しておくと、ウェブページに埋め込んだ地図上でもそのモードが反映される。

point

②HTMLをコピーしておく

［カスタムタグ］パーツの［カスタムタグ設定］画面で、［パーツ名］を入力する。［HTMLソース］の［編集する］ボタンをクリックし、Step1でコピーしたHTMLを［HTMLソースエディタ］にペーストする。

カスタムタグ設定でパーツ名とHTMLソースを入力

Step 3

①［パーツ名］を入力

［カスタムタグ］ボタンをクリック

②［編集する］ボタンをクリック

③地図のHTMLを［HTMLソースエディタ］にペースト

115





6応用＆運用


a付録

1基本操作

［ブロックエディタ］ → ［カスタムタグ］

Featured Function

地図の挿入を適用して、プレビューする

［ブロックエディタ］の［適用］ボタンをクリック。［サイトエディタ］の［プレビュー］ボタンをクリックしてブラウザで確認する。

Step 4貼り付ける地図の大きさはGoogle Mapの初期設定で幅425×縦350ピクセルになっているが、この数値はカスタマイズ可能だ。Google MapのHTMLソースを表示するダイアログで［埋め込み地図のカスタマイズとプレビュー］をクリックすると表示されるウィンドウでサイズを変更できる。レイアウトに合わせたピクセル数を設定してカスタマイズした地図のHTMLソースは、そのページの下部に表示されるので、文字列をコピーしてStep3の手順で［HTMLソースエディタ］にペーストすればいい。

point

②地図を埋め込んだページの完成


例えば、横幅を825ピクセルにすると、BiNDの標準の横幅にぴったりになる。ずれないように収めるには、ブロックの設定とページの設定で余白をなしにする。

①［カスタム］をクリック

②数値を入力

③プレビューで確認

④HTMLソースをコピー

116


［カスタムタグ］は、自由にHTMLソースを貼り付けることができるパーツだ。ここでは、「アフタヌーンティー（http://www.afternoon-tea.net/download/blogparts/）」のブログパーツを例に設定を説明する。

ブログパーツをページに埋め込む

ブログパーツを配置したいブロックを［ブロックエディタ］で開いて、［カスタムタグ］ボタンをクリック。

ブロックエディタのパーツ一覧からカスタムタグパーツを選ぶ

Step 2ブログパーツを提供しているサイト（ここでは「アフタヌーンティー」）で、表示されるHTMLソースコードをコピーする。必要に応じてオプションを選べる場合もある。

組み込むブログパーツのソースコードをコピーする

Step 1

［カスタムタグ］パーツの［カスタムタグ設定］画面で、［パーツ名］を入力する。［HTMLソース］の［編集する］ボタンをクリックし、Step1でコピーしたソースコードを［HTMLソースエディタ］にペーストする。入力後、［OK］ボタンをクリック。

カスタムタグ設定でパーツ名とHTMLソースを入力

Step 3ソースコードをコピーする


BiND4に付属のテーマカートリッジには、サイドバーの横幅が狭く設定されているものも含まれる。[サイトエディタ]でブロックを選択すると、ブロックの右下にそのブロックの縦横のサイズ(単位:ピクセル)を確認できる。ブログパーツのコードを取得する際にオプションで幅が選択できる場合は、はみ出さないサイズに設定する。

point

①［パーツ名］を入力

③ソースコードを［HTMLソースエディタ］にペースト

②［編集する］ボタンをクリック

④［OK］ボタンをクリック

117

1基本操作





6応用＆運用


a付録

［ブロックエディタ］ → ［カスタムタグ］パーツ

ネット上では数多くのブログパーツが提供されている。実用的なものから、コミュニケーションツールや広告、ジョークソフトまでさまざまな種類があるので、サイトのコンテンツに合ったものを探してページに追加してみよう。ちなみに“ブログパーツ”といってもブログ以外のページに埋め込むことも可能だ。ブログパーツをまとめて検索できるようにしているサイトがあるので、そういったサイトで最適なパーツをみつけよう。

主なブログパーツ紹介サイトmemo

Featured Function

ブログパーツの挿入を適用し、結果をプレビューする

［ブロックエディタ］の［適用］ボタンをクリック。［サイトエディタ］の［プレビュー］ボタンをクリックしてブラウザで確認する。

Step 4


②ブログパーツを埋め込んだページの出来上がり

① ウィジェッタウン http://www.widgetown.com/

② ブログパーツ.com http://www.blog-parts.com/

③ ブログパーツ助っ人 http://blogparts.netsket.com/

④ HANATSUKI http://www.hanatsuki.net/

118


RSSのURLは、ブラウザでフィードを読み込んだ状態にすれば確認できる。また、検索エンジンで「RSS ニュース」などと一緒に任意のキーワードを検索すれば、RSSを発信しているサイトが見つかる。そのほかに「Yahoo!ニュース -RSS」（http://public.news.yahoo.co.jp/rss/）には同サイトが配信しているニュースのRSSへのリンクがまとめられているのでチェックするといいだろう。

RSS情報の探し方memo

BiNDを使えば、サイトの更新情報を読み込んで表示する「ニュースティッカー」をウェブページに組み込むことができる。ここでは、goo が提供している天気予報のRSS情報を例にして手順を説明する。

ニュース情報をウェブページに組み込む

掲載するサイトの更新情報（RSS）をウェブブラウザなどで開き、URLをコピーする。

掲載するRSS情報のURLをコピーする

Step 1ニュースティッカーを組み込むブロックを［ブロックエディタ］で開いたら、［パーツ一覧］の［ウェブサービス系パーツ］をクリック。［ニュース］をクリックする。

ブロックエディタで［ニュース］パーツを選択

Step 2

［SYNC］が開いたら、［BiNDニュースティッカーを設置する］をクリックして、［次へ］ボタンをクリック。

アイテムの選択でニュースティッカーを選択

Step 3

①［BiNDニュースティッカーを設置する］をクリック

②［次へ］ボタンを押す


②［ニュース］をクリック

RSSを開いてURLをコピー

119





6応用＆運用


a付録

1基本操作

［ブロックエディタ］ → ［ウェブサービス系パーツ］ → ［ニュース］パーツ

上記のように、［ブロックエディタ］の［フォント］の設定では、ニュースの文字のサイズや書体のゴシック系／明朝系を選択できる。ただし、これはW3C基準に反する設定なので注意が必要。公式にはサポートされていない裏ワザだ。

point

Featured Function

［設定の確認］画面で、各種設定が問題なければ［適用］ボタンをクリック。さらに［ブロックエディタ］で［ニュース］パーツを選択して［フォント］でサイズを［極小］に設定する。

表示する文字のサイズを設定するStep 6ニュースティッカーのデザインを選択

［デザインの選択］画面で、ニュースティッカー表示のデザインを選択する。見出しが一覧で表示されるもの（標準）と、見出しが右から左に流れて表示されるもの（ミニ）のいずれかを選んだら、［次へ］ボタンをクリック。

Step 4

元となる情報のRSSを入力

［ニュースソースの選択］画面で、［RSSのURLを直接入力］を選択。［RSSのURL］ラジオボタンにチェックを入れ、Step１でコピーしたURLを入力し、［次へ］ボタンをクリック。

Step 5

②［フォント］でサイズを［極小］に設定

①［ニュース］パーツを選択

プレビューで確認する

［ブロックエディタ］で［適用］ボタンをクリック。［サイトエディタ］の［プレビュー］をクリックしてウェブブラウザで確認する。

Step 7

設定した［ニュース］パーツを後から再設定するには、［ブロックエディタ］で［ニュース］パーツをクリックし、画面右側の［設定エリア］で［Syncを起動する...］をクリックすれば、Step３からの手順をもう一度やり直せる。

point

ニュースティッカーが組み込まれたページが完成

①ニュースティッカーのデザインを選ぶ


③［次へ］ボタンを押す

②RSSのURLをペーストする

①［RSSのURLを直接入力］を選択

120


ページへのアクセスを誘導することができるウェブサービスの１つ、ソーシャルブックマーク。BiNDでは、ページをソーシャルブックマークに登録させるためのボタンを簡単にサイトに組み込むことができる。

ソーシャルブックマークへの登録ボタンを組み込む

［サイトエディタ］で、ソーシャルブックマーク登録のボタンを組み込むブロックを選択。［編集］ボタンをクリックして［ブロックエディタ］を開いたら、［パーツ一覧］の［ウェブサービス系パーツ］にある［ニュース］をクリックする。

ブロックエディタで［ニュース］パーツを選択

Step 1［SYNC］画面が開いたら、［クチコミ＆RSS購読ボタンを設置する］をクリックして、［次へ］ボタンをクリック。

アイテムの選択でクチコミ＆RSS購読ボタンを選択

Step 2

［表示するボタンの選択］画面になったら、［「ブックマークボタン」を使用する］にチェックを入れて、［次へ］ボタンをクリック。

組み込むボタンの種類を選ぶStep 3



③［ウェブサービス系パーツ］を開く

④［ニュース］をクリック

①［クチコミ＆RSS購読ボタンを設置する］をクリック



①［「ブックマークボタン」を使用する］にチェックを入れる

121





6応用＆運用


a付録

1基本操作


実際のブックマークボタンを使ってのソーシャルブックマークへの登録は、［サイトエディタ］のプレビューモードやブラウザでのプレビューでは実行されないので、アップロードしてから確認する。

point

Featured Function

［設定の確認］画面で、各種設定が問題なければ［適用］ボタンをクリック。さらに［ブロックエディタ］の［適用］ボタンもクリック。

設定を適用してプレビューするStep 6登録するソーシャルブックマークサービスを選択

［サービスの設定］画面でソーシャルブックマークサービスが表示されるので、登録可能にするサービスにチェックを入れ、利用しないサービスのチェックは外す。［次へ］ボタンをクリックする。

Step 4

アップロードして確認

［サイトエディタ］の［アップロード］をクリックして、アップロードが完了したらウェブブラウザで確認する。

Step 7ソーシャルブックマークへ登録するページを設定する

［ブックマークボタンの設定］で、ソーシャルブックマークへの登録の際に登録させるURLを指定する。ボタンを組み込むページのURLのままなら［現在見ているページをブックマークする］を選ぶ。トップページなど別のURLを登録させたい場合は［任意のページをブックマークする］を選択してURLを入力する。設定できたら［次へ］ボタンをクリック。

Step 5

①利用可能にするサービスはチェックを入れる


ソーシャルブックマークへ登録させるURLを設定

［適用］ボタンをクリック

①［アップロード］をクリック

②クリックするとソーシャルブックマークの選択するメニューを表示

122


ウェブサイトの更新情報を配信するRSSは、ウェブへのリピーターを作るために重要な仕掛けだ。ここでは、ブログの更新情報をRSSリーダーサービスに登録する仕掛けをページに設置する。

RSS購読ボタンをウェブページに配置する

ブログのRSSをウェブブラウザなどで開き、URLをコピーする。

ウェブページに組み込んだブログのRSSのURLをコピーする

Step 1［表示するボタンの選択］画面になったら、［「RSS購読ボタン」を使用する］にチェックを入れて、［次へ］ボタンをクリック。

組み込むボタンの種類にRSSを選ぶ

Step 3

RSSを開いてURLをコピー

RSS購読のボタンを組み込むブロックを［ブロックエディタ］で開いたら、パーツ一覧にある［ニュース］をクリックする。［SYNC］が起動したら、［クチコミ&RSS購読ボタンを設置する］をクリックして、［次へ］ボタンをクリック。

ブロックエディタで［ニュース］パーツを配置し、クチコミ&RSS購読を選択

Step 2

［サービスの設定］画面でRSSリーダーサービスが表示されるので、購読登録ボタンに対応させるサービスにチェックを入れて［次へ］ボタンをクリックする。

登録するRSSリーダーサービスを選択

Step 4

①購読登録ボタンに対応させるサービスにはチェックを入れる




①［クチコミ&RSS購読ボタンを設置する］をクリック

①［「RSS購読ボタン」を使用する］にチェック

参照 P.120 ソーシャルブックマークへの登録ボタンを組み込む

123





6応用＆運用


a付録

1基本操作


Featured Function

［サイトエディタ］の［プレビュー］をクリックしてブラウザで確認する。

プレビューで表示して、RSS購読を確認

Step 7RSSリーダーに読み込ませるソースを設定する

RSSボタンの設定］画面で、［RSSのURLを直接入力］を選択。［RSSのURL］欄にStep1でコピーしたURLを入力し、［次へ］ボタンをクリック。

Step 5

設定を確認して適用する

［設定の確認］画面で、各種設定をチェックして［適用］ボタンをクリックする。さらに［ブロックエディタ］の［適用］ボタンもクリック。

Step 6

②RSSのURLをペースト

①［SYNC］の［適用］ボタンをクリック

①［RSSのURLを直接入力］を選択

②［ブロックエディタ］の［適用］ボタンをクリック

①RSS購読ボタンをクリック

②登録するRSSリーダーサービスを選択

③RSSリーダーサービスの登録画面で登録ボタンをクリック

④登録したRSSの新着情報が表示された

③［次へ］ボタンをクリック

124


ウェブページに埋め込みたいスプレッドシートを開き、画面右上の［共有］メニューから［共有設定］を選択する。［ユーザーを追加］欄に共有したい相手のメールアドレスを入力し、「閲覧のみ」または「共同編集」の権限を設定する。

Googleドキュメントの書類をほかのユーザーと共有する

Step 1

①［共有］をクリックして、［共有設定］を選択

Googleドキュメントの書類をBiNDに埋め込む場合は、書類が公開に設定されている必要がある。Step1で選択した［共有］メニューから今度は［ウェブページとして一般公開］を選ぶ。［ウェブに公開］画面が開いたら［公開開始］をクリックする。

スプレッドシートを開いた状態で書類の公開を設定する

Step 2

［ドキュメント］パーツは、Googleドキュメントで管理している書類をBiNDのページに組み込む機能だ。ここでは複数ユーザー間での共有を設定した書類を読み込む方法を紹介する。

グループで作業可能な表を挿入する

②ユーザーを追加する

①［共有］ボタンをクリック

②［ウェブページとして一般公開］を選択

③［公開開始］ボタンをクリック

125





6応用＆運用


a付録

1基本操作

［ブロックエディタ］ → ［ウェブサービス系パーツ］ → ［ドキュメント］パーツ

Featured Function

SYNCを起動してGoogleアカウントを設定する

まず［ブロックエディタ］を開き、パーツ一覧から［ドキュメント］パーツボタンをクリックする。次に［ドキュメント］パーツの説明が表示されたら［次へ］をクリック。続いて［Googleアカウントの設定］画面で［GoogleアカウントからSYNCへのアクセスを許可する］をクリックする。

Step 3

Googleアカウントでログインしてアクセスを許可する

Googleアカウントでログインし、［アクセス要求］の確認画面が表示されたら［アクセスを許可］ボタンをクリックする。

Step 4

ページに組み込むドキュメントを選択

［Googleドキュメントの設定］画面で［はい、すでに持っています］を選択して［次へ］をクリック。ドキュメントを選択する画面で、Step 2で公開したファイルを選び［次へ］ボタンをクリック。

Step 5

［設定の確認］画面で問題がなければ［適用］ボタンをクリック。さらに［ブロックエディタ］でも適用する。［サイトエディタ］の［プレビュー］を実行して、ウェブブラウザで確認する。

設定を適用してウェブブラウザでプレビューする

Step 6

表は、幅620×高さ560ピクセルのフレーム内に表示される。できるだけ指定の範囲に収まるように Googleドキュメントでセルの幅や高さを調整しておくと見やすくなる。

point

①［GoogleアカウントからSYNCへのアクセスを許可する］ボタンをクリック

①Googleアカウントでログインした状態

②［アクセスを許可］ボタンをクリック

①［はい、すでに持っています］を選択

②公開設定したスプレッドシートを選択


ページ内にスプレッドシートの内容が表示された

126


BiND4のニュースティッカーやRSS購読ボタンでは、［BiNDニュース］という特定のページの更新情報を追加できる。ここではニュースティッカーでのRSSを設置してみよう。

独自のRSSを設置する

ニュースティッカーのニュースソースで［BiNDニュース］を選択し、［次へ］ボタンをクリック。

ニュースソースの選択でBiNDニュースを選ぶ

Step 3［ブロックエディタ］を開き、［ウェブサービス系パーツ］タブから［ニュース］ボタンをクリック。［SYNC］が起動したら、［BiNDニュースティッカーを設置する］をクリックし、［次へ］ボタンをクリックする。

SYNCを起動してニュースティッカーを設定する

Step 1

［デザインの選択］画面でニュースティッカーのデザインを選んで［次へ］ボタンをクリックする。

ニュースティッカーのデザインを選択する

Step 2

①［BiNDニュースティッカーを設置する］をクリック

①［BiNDニュース］を選択

［BiNDニュース］の設定は、RSS購読ボタンの設定と同じ手順になる。

point

①［ニュースティッカー（標準）］を選択

参照 P.122 RSS購読ボタンをページに組み込む






6応用＆運用

5□□□□□□□□□■


7□□□□□□□□□■


127


a付録

1基本操作


Featured Function

ログインIDを作成する

BiNDニュースのログインIDの確認画面で、まず［いいえ、持っていません。もしくは複数のログインIDを作成します（無料）］を選択し、［次へ］をクリック。次に、希望するIDとパスワード、メールアドレスを入力して［次へ］ボタンをクリックすると、ログインIDが作成される。

Step 4

①新規にログインIDを作成する

ニュース（RSS）を作成する

ログインIDを登録するとその場でログインした状態になる。そのまま［新しいニュースを作成する］を選択し、タイトルを入力して［次へ］ボタンをクリックする。

Step 5

新しい記事を追加する

［記事の確認と編集］画面に切り替わったら、画面下部にある［＋新しい記事を追加］ボタンをクリック。表示されるダイアログで記事の［タイトル］［URL］［本文］を入力して［更新］ボタンをクリックする。

Step 6

追加した記事の内容を確認する

［記事の確認と編集］画面で記事が追加されたことを確認して［次へ］ボタンをクリックする。

Step 7

②IDとパスワード、メールアドレスを入力


①［新しいニュースを作成する］を選ぶ

②ニュースのタイトルを入力する

①［＋新しい記事を追加］ボタンをクリック

②［タイトル］［URL］［本文］を入力

③［更新］ボタンをクリックする

①記事が追加されたことを確認


128

Lesson4 ウェブサービスとの連携

独自のRSSを設置する

-13

［BiNDニュース］に記事を追加してRSSを更新したい場合は、［ブロックエディタ］の編集画面で［BiNDニュース］パーツを選択し、［SYNCウィジェット設定］の［Syncを起動する］ボタンで［SYNC］を起動する。［SYNC］の画面に表示される［作成済みの「BiNDニュース」の記事を更新する］ボタンをクリックすると記事の追加や更新が可能となる。

［BiNDニュース］に記事を追加する

memo

［設定の確認］画面で［適用］ボタンを押す。さらに［ブロックエディタ］でも［適用］をクリックして、［サイトエディタ］に戻る。［プレビュー］ボタンを押しウェブブラウザで確認する。

適用してプレビューで確認Step 8


②［BiNDニュース］で設定した記事が表示される④登録したIDでログインするとStep7の画面に切り替わる

③［作成済みの「BiNDニュース」の記事を更新する］ボタンをクリック

①［BiNDニュース］パーツのアイコンを選択

②［Syncを起動する］ボタンをクリック

129



6応用＆運用

5□□□□□□□□□■


7□□□□□□□□□■


1基本操作


a付録

RSSについて

Column

　「RSS」とは、ウェブサイトの見出しやサマリーなどを記述したXMLをベースとしたフォーマットで、主にサイトの更新情報の配信などに利用されている。多くのブログエンジンは、記事を更新すると自動的にRSSを書き出す仕組みを持っている。ニュースサイトなどもニュースの更新とともにRSSで情報を配信している。　RSSの購読には、RSSリーダーと呼ばれるソフトを用いて閲覧するのが一般的だ。例えば、ブラウザならばInternet Explorer 7やFirefox、Safari、メーラーならばWindows Live Mail、Thun derbird、Apple MailなどがRSSを読み込む機能を標準で備えている。そのシンプルなフォーマットから、ほかのサイトなどに簡単に取り込んだりと幅広く利用されている。サイトではYahoo!の「My Yahoo!」サービスやGoogleの「Googleリーダー」、ライブドアの「livedoor Reader」などがウェブ型のRSSリーダーとして有名だ。　BiNDのニュースティッカーも、そうした機能の一つと言える。BiNDで作成したページにRSSを読み込んで、そのRSSの記事の内容を表示するニュースを告知する仕掛けだ。　また、「BiNDニュース」のRSSは、埋め込んだURLのページのRSSとして機能することとなり、ウェブブラウザでそのページを開くとRSSマークが表示されるようになる。ブラウザのRSSマークをクリックすれば、登録したBiNDニュースがRSS記事として一覧表示される。　RSSは、さまざまなかたちで流用可能な柔軟なフォーマット。最近は、RSSを自動的にTwitterでツイートするサービスも登場している。こうした機能を使って情報を配信するということは、クチコミ的な情報伝達に役立つだろう。

①BiNDニュースをソースとしたニュースティッカーを埋め込む

②ニュースティッカーを埋め込んだページをウェブブラウザで開くと、RSSが設定されたことがわかる

③RSSボタンをクリックすると、BiNDニュースの一覧が表示される

130


Twitterは、「ツイート」や「つぶやき」と呼ばれる140文字以内のメッセージを公開したり、閲覧したりするサービス。BiNDでは、ツイートをページに表示したり、ウェブの記事をツイートさせるボタンを配置することできる。

Twitterへの登録ボタンとタイムラインを組み込む

［デザインの選択］画面が開いたら、サンプルを参照してタイムラインの文字色と背景色の組み合わせを選択。［次へ］をクリックする。

タイムラインのデザインを選択するStep 3Twitterのタイムライン（ツイートを時系列に並べたリスト）を配置するブロックを［ブロックエディタ］で開き、画面右側の［パーツ一覧］の［ウェブサービス系パーツ］にある［Twitter］をクリックする。

タイムラインを置くブロックを開くStep 1

［オプションの設定］画面が開いたら、必要に応じて各種設定を行う。［自動調整］にチェックを入れて、ブロックの幅に合わせてタイムラインが表示されるようにする。設定が完了したら［次へ］をクリック。

表示するサイズやツイート数などを設定する

Step 4


①デザインを選択する

②［次へ］をクリック

［SYNC］が立ち上がったら、タイムラインを表示するTwitterアカウントを入力して［次へ］をクリック。

Twitterアカウントを入力するStep 2

②［Twitter］をクリック

①Twitterアカウントを入力



①［自動調整］にチェック



6応用＆運用

5□□□□□□□□□■


7□□□□□□□□□■


131


a付録

1基本操作

［ブロックエディタ］ → ［ウェブサービス系パーツ］ → ［Twitter］パーツ

［つぶやくボタン］はプレビューでは動作しないので、一度アップロードしてから動作を確認する必要がある。

point

Featured Function

ニュースパーツを挿入する

さらに［次へ］をクリックして、設定の確認をしたら［適用］ボタンをクリックして［SYNC］を閉じる。［ブロックエディタ］に戻ったら、［Twitter］パーツの下にカーソルを挿入してから［ウェブサービス系パーツ］にある［ニュース］をクリック。

Step 5

Twitterと連携するボタンを選択

P.120のStep2と同様に手順を進めて、［表示するボタンの選択］画面になったら、［「つぶやくボタン」を使用する］にチェックを入れて、［次へ］ボタンをクリック。

Step 6

①［「つぶやくボタン」を使用する］をチェック

Twitterアカウントを入力

［サービスの設定］画面が開いたら、Twitterアカウントを入力。［次へ］ボタンをクリックする。

Step 7

アップロードして確認する

設定を確認して［適用］ボタンをクリックし再び［SYNC］を閉じたら、［ブロックエディタ］で［適用］ボタンを押す。［サイトエディタ］で［アップロード］ボタンをクリックしてページが公開されたら、ブラウザで開いて確認する。ページには、指定したTwitterアカウントの最近のツイートが表示される。また、その下にある［つぶやくボタン］をクリックすると、ツイートにページのリンクを貼る項目と、指定したTwitterアカウントのフォローを設定する画面へ移動する項目が表示される。

Step 8

①パーツを挿入する位置を指定

②［ニュース］をクリック



①Twitterアカウントを入力

指定したTwitterアカウントのタイムライン

Twitterと連携する［つぶやくボタン］

132

Twitterというウェブサービスの可能性

Column

　個々のユーザーが「ツイート」や「つぶやき」と呼ばれるメッセージを投稿するサービス、Twitter。昨年から今年にかけてブームとも言える盛り上がりを見せ、2010年４月には、ユーザー数が全世界で１億人を突破したということだ。　「ミニブログ」や「SNS」と紹介されることが多いTwitterだが、大きな盛り上がりを見せる一方で、「使い方が見当つかない」「やってみたが面白さがわからない」といった声も聞かれる。　その原因の１つともいえるのが、利用方法の自由度が高さだ。仕組みとしては140文字のテキストを送受信するだけのシンプルなもののため、使う人によってツイートの意味が変わってくるのだ。例えば、フォロワー（あるアカウントのツイートを受信する設定をしているユーザー）の数が500万人以上もいるレディー・ガガがつぶやけば、もうそれはテレビや新聞を超える影響力のあるメディアとなる。逆に数名のユーザー同士でお互いに全員がフォローし合っていれば、そのグループのチャットルームのような使われ方になる。そのほかに、自分ではまったくつぶやかず、ニュースなどをツイートするアカウントだけをフォローして情報収集ツールとして使うという方法もある。　このように利用の仕方に幅があるため、世の中のTwitterの解説がどれも今ひとつ当を得ていないように感じられる。しかしこの多様性こそが、Twitterの魅力であり、理解が少し難しい原因でもある。　今年になって、注目を集めているのが、Twitterとほかのメディアの組み合わせだ。まず、2010年6月に開催されたサッカーW杯南ア大会。日本戦が始まるとタイムライン（ユーザーが受信しているツイートを時系列並べた表示）がサッカーの話題一色になり、一人でTV観戦していてもまるでパブリックビューイングしているかのように盛り上がったという人が続出であった。　また、ラジオもTwitterと連動する動きが見られる。ネット経由でラジオを聞くことのできるサービス「radiko.jp」が３月に始まり、ラジオを聴きながら番組のハッシュタグ（ツイートの話題を分類するための「♯」ではじまるキー

ワード）を付けてリスナーが感想やツッコミをつぶやくことで新しいラジオの聞き方が生まれたと言われている。　最後に紹介したいのがUSTREAMだ。USTREAMとは大規模なライブ動画中継を簡単に誰でも実現できるサービスだが、Twitterなどのメッセージとセットで配信されるのが標準となっている。BiNDの開発元であるデジタルステージの平野友康代表も、2010年8月から、USTREAMを使ったフリースクール「ウェブコンポーザー学校」という放送を定期的に配信している。ここで、平野氏は放送中にタイムラインから視聴者のメッセージを拾ってどんどん番組に取り入れていっていき、それに視聴者が反応し、さらに活発にコミュニケーションが生まれるというスタイルが確立している。　このように、視聴している人同士、あるいは発信する側と視聴する側でリアルタイムなコミュニケーションを計ることができるのがTwitterとほかのメディアの組み合わせの大きな特徴だ。こうした、新しい楽しみ方がつぎつぎと発生してくるのもTwitterの魅力の１つ。自分で楽しむツールとしても、ウェブに人を呼び込む仕掛けとしても、目が離せないサービスだ。

上図のような標準の画面が示すように、USTREAMはTwitterとセットで見るメディアとなっている。P.106の作例のようにページに［USTREAM］パーツを配置するときは［ライブ中継］と［メディアストリーム］をセットで組み込むようにしたほうがいいだろう。

1基本操作





6応用＆運用


a付録

4 ウェブサービスとの連携Lesson

133

GoogleやYahoo!といった検索エンジンには、指定したドメインの内容を検索する機能が用意されている。BiNDでは、［サイト内検索］パーツをページに配置するだけでその機能を実現できる。

サイト内検索の検索欄を配置するブロックを［ブロックエディタ］で開き、［パーツ一覧］で［サイト内検索］をクリック。［SYNC］が立ち上がったら、［サービスの選択］画面で使用する検索エンジンを［Google］と［Yahoo!］のいずれかを選ぶ。

検索欄を配置するブロックを開くStep 1


-15

［サイトの設定］画面が開いたら、検索対象にするサイトのドメインを設定。「http://」などは不要で、ドメイン名だけを入力すればいい。入力したら［次へ］ボタンをクリック。

サイトのドメインを設定Step 2

［オプションの設定］画面が開いたら、ヘッダやビルボード、メイン用の［標準サイズ］と、サイドバー用の［サイドバーサイズ］が用意されている。いずれかを選択したら［次へ］ボタンをクリック。設定を確認して［適用］ボタンを押す。

サイズを選択するStep 3

［ブロックエディタ］で［適用］して、［サイトエディタ］の［プレビュー］ボタンをクリック。ブラウザで実際に検索を確認する。

ブラウザでプレビューして確認するStep 4

①サイト内検索の検索窓が挿入された

①検索サービスに［Google］を選択

検索対象にするサイトのドメインを入力

［サイドバーサイズ］を選択

②サイト内限定の検索結果が表示される

サイトの内容を検索可能にする

4Lesson

134


［SYNC］が起動したら、説明を読んで［適用］ボタンをクリック。さらに［ブロックエディタ］でも［適用］ボタンを押す。以上で自動翻訳機能の組み込みは完了。

SYNCで適用するStep 2

［サイトエディタ］の［プレビュー］ボタンをクリック。ブラウザにページが表示されたら、自動翻訳のメニューから言語を選んで翻訳を確認する。

ブラウザでプレビューするStep 3


①メニューで言語を選択

-16

フォーム項目のカスタマイズは、既存のものを参照しながら設定するといい。正規表現を使って入力する形式を制限することも可能だ。

point

②ページのテキストが選んだ言語に自動翻訳された

翻訳機能を組み込むページのブロックを選択。［編集］ボタンをクリックして［ブロックエディタ］を開いたら、［パーツ一覧］の［ウェブサービス系パーツ］の中から［翻訳］をクリックする。

ブロックエディタを開くStep 1


②［翻訳］をクリック

●日本語

●英語

Googleの自動翻訳機能を使えば、ページ全体を自動的に翻訳してくれる。翻訳可能な言語52カ国語をメニューで切り替えて表示する仕組みを、BiNDは提供する。

サイトを自動翻訳して表示させる

135

ナビゲーション&ユーザビリティーCONTENTS

-1 パンくずリストを設置する 136 Column BDタグの使い方 137 -2 アンカーを設定してページ内で移動する 138 -3 ページの自動転送を設定する 139 -4 サイトやページの名前をウィンドウタイトルに表示する 140 -5 文字サイズ変更ボタンを日本語表記にする 141 Column テキストのスタイルを設定する 142

Lesson5

136

ナビゲーション＆ユーザビリティーLesson5-1

［パンくずリスト］は、現在開いているページの場所を階層を追ってリスト表示する機能。コーナーが細かく分かれたサイトでは、親切なナビゲーションの役割を果たす。

パンくずリストを設置する

［パンくずリスト］を配置したいブロックを選択し、［編集］ボタンをクリックして［ブロックエディタ］を開く。必要に応じて新規ブロックを追加してもよい。

ブロックエディタでブロックを開く

Step 1

［編集］ボタンをクリック

［ブロックエディタ］が開いたら、［パーツ一覧］にある［カスタムタグ］ボタンをクリックする。

［カスタムタグ］パーツを開くStep 2


［カスタムタグ設定］にある［セット］をクリックし、［ナビゲーション］メニューから［パンくずリスト１（テキスト）］を選択して［適用］する。

セットを使ってパンくずリストを配置する

Step 3

①［セット］をクリック

［サイトエディタ］で［プレビュー］ボタンをクリックし、ウェブブラウザで確認する。

適用してプレビューで確認Step 4

テキストスタイルの［パンくずリスト］が配置された

［パンくずリスト］のデザインに変化をつけたいときには、［ブロックエディタ］の［設定］にある［ブロックスキン］の変更で、色の付いたものやリッチスタイルなどが試せる。

パンくずリストのデザイン変更memo

②［パンくずリスト１（テキスト）］を選択


137

BDタグの使い方

Column

　BiND4では、「BDタグ」という独自形式のタグが利用できる。これは、BiND4で作成したウェブサイトから自動的に更新日やページの名前などの情報を取り出してページに表示したり、リンクに利用したりする機能だ。利用できる主なBDタグは、下の一覧の通り。　BDタグは［ブロックエディタ］の編集画面で直接入力して、段落のスタイルで［HTMLタグ］に変換することもできるが、［カスタムタグ］パーツを使えばもっと手軽に利用できるようになる。　まず［カスタムタグ］ボタンをクリック、次に［カスタムタグ設定］の［セット］ボタンをクリックして、最

後にサブメニューの［挿入］の中から使用したいBDタグを選択すれば完了だ。例えば、最終更新日のように頻繁に変化する情報は、こうしたタグを使うことで毎回修整する手間が省ける。最終更新日を表示したい箇所にBDタグを配置しておけば、更新のたびに自動的に日付を書き換えてくれる。　こうした日付の情報を抽出するだけでなく、P.136で説明している「パンくずリスト」も［BD:bread _crumb2:HOME］という独自のBDタグが使われている。BDタグをうまく活用して、使い勝手のいいウェブページを効率よく作成しよう。

［カスタムタグ］を配置して［セット］ボタンをクリック。サブメニューの［挿入］から選べば簡単に BDタグを利用できる

主なBDタグ一覧●[BD:site_name]［サイトエディタ］の［サイト設定］で入力したサイト名を表示するタグ。

●[BD:site_createdate]サイトが作成された日付。［サイトエディタ］の［サイト設定］に表示される作成日。

●[BD:site_uploaddate]サイトがアップロードされた最後の日付。［サイトエディタ］の［サイト設定］に表示される更新日。

●[BD:page_title]［サイトエディタ］の［サイト設定］で入力したページタイトル。

●[BD:page_name]［サイトエディタ］の［サイト設定］で入力したページ名。

●[BD:page_modifydate]BiND4でサイトデータを最後に更新した日付。

●[BD:path_userdata]［_userdata］フォルダまでの相対パス。［_userdata］フォルダに保存したファイルへのリンクを貼る場合などに使う。

●[BD:path_root]ルートまでの相対パス。［カスタムタグ］の［セット］から選んだ［パンくずリスト］のソ

ースコードを見ると、[BD:bread_crumb2:HOME]というBDタグが使われているのがわかる

1基本操作





6応用＆運用


a付録

［挿入］から選ぶとBDタグを使ったセットが入力される

パンくずリストも、BDタグを使って表現されている

Lesson

138

5-2 ナビゲーション＆ユーザビリティー

［ブロックエディタ］で移動先に指定したいブロックを開く。

移動先のブロックを開くStep 1

［#アンカー名］欄をクリックする

［アンカー名を入力してください］というダイアログが表示されたら、アンカー名を入力。［OK］ボタンをクリックする。

アンカー名を設定するStep 2

①アンカー名を入力

BiNDの［ブロックエディタ］では、ページの途中へ移動するアンカーを設定して、簡単にリンク先に指定できる。長いページの中でセクションごとに設定すれば、利用者がコンテンツを見るのが楽になる。

アンカーを設定してページ内で移動する

①アンカーの名前が設定された

次に［リンクパーツ］の［リンク先］にアンカーを指定する。［ブロックエディタ］で［リンクパーツ］を選択。画面右側の［設定エリア］の［リンク先］にある［▼］ボタンをクリックして、Step2で設定したアンカー名を選択し、［適用］して完了。

リンクを設定するStep 4

上記の［アンカー名］で指定するアンカーの挿入位置はブロックの先頭だ。ブロックの途中に挿入するには［カスタムダグ］の［セット］から［アンカーを挿入］を選んで設定する必要がある。

point画面上部の［#アンカー名］欄に入力したアンカーの名前が表示されたら、［適用］ボタンをクリック。

適用してブロックエディタを閉じるStep 3



①［リンクパーツ］を選択

②設定したアンカー名を選択


Lesson

139





6応用＆運用


a付録


1基本操作

ページの自動転送を設定するウェブページをほかのアドレスに飛ばす自動転送は、ウェブサイトが別のサーバーに引っ越したときなどに便利な機能だ。 BiNDでは設定ひとつで自動転送が行える。

①［ページ設定］を開く

自動転送が開始されるまでの時間を設定する

［リフレッシュ］チェックボックスにチェックを入れ、ページをリフレッシュする間隔を選択する（単位は秒）。［ＯＫ］をクリックすると、プレビューすると指定した秒数おきにウェブページがリフレッシュされる。

Step 2

転送したいウェブページのアドレスを［URL］欄に入力し、［OK］ボタンをクリックする。［サイトエディタ］の［プレビュー］ボタンをクリックしてページをウェブブラウザで開いたら、［リフレッシュ］で設定した秒数が経過したのちに、指定したURLのページが開くのを確認する。

転送先のURLを設定するStep 3［サイトエディタ］の下部にある［設定］ボタンをクリックして［ページ設定］ウィンドウを開く。［スクリプトと詳細設定］タブをクリックする。

ページ設定ウィンドウを開くStep 1

ウェブサイトの引っ越しなどでページを転送する場合は、元のページに、ほかのURLに自動転送される旨のメッセージなどを残しておくと親切だろう。

移転の案内のページを置くmemo

②［スクリプトと詳細設定］タブをクリック

①［リフレッシュ］にチェックを入れる

②秒数を選択する

①URLを入力する

②［OK］をクリック

140


ウェブブラウザでウェブページを開くと、ウィンドウ上部のタイトルバーにサイト名などが表示される。ここに表示するサイト名やページ名、または独自の文字列を設定する方法を紹介する。

サイトやページの名前をウィンドウタイトルに表示する

［サイトエディタ］の［設定］ボタンで設定画面を開く。画面上部のタブで［サイト設定］が選択されていることを確認する。［サイト名］の右側にある入力エリアに自分のサイトの名前を入力して、［OK］ボタンをクリックする。

サイト名を設定するStep 1

名前を設定するページを［サイトエディタ］の［サイトマップ］から選択する。初期設定のページ名［=TOP=］の右側にある［i］マークをクリック。［ページ名］と［ページタイトル］を書き替える。

ページに名前をつけるStep 2

変更したページをプレビューしてみると、ウェブブラウザのタイトルバーの内容が変更されたのがわかる。また、BiND4の［サイトエディタ］ウィンドウでも確認できる。

ウェブブラウザで確認するStep 3

BiNDには独自のタグが用意されており、［サイト設定］や［ページ設定］で指定したサイト名は［BD:site_name］、ページ名は［BD:page_ name］で置き換えられる。このため、初期設定のように［サイト設定］で［BD:page_name］ of ［BD:site_name］などとしておけば、自動的にページ名やサイト名が読み込まれ、ページごとに表示する名前を設定する手間が省けます。また任意の文字列を［ページタイトル］に設定することも可能だ。

point

①［サイト設定］タブが開いていることを確認

②［サイト名］を入力

①ページを選択する

②［i］（インフォメーション）アイコンをクリック

③［ページ名］に「HOME」と入力

④［ページタイトル］を［サイト名］»［ページ名］に変更

●変更前

●変更後

Lesson5-5

141

ナビゲーション＆ユーザビリティー

1基本操作





6応用＆運用


a付録

［ブロックエディタ］右側の［設定エリア］にある［セット］ボタンをクリックして、［ユーザビリティー］のサブメニューにある［印刷＋文字サイズ１（テキスト）］を選択する。

カスタムタグを変更するStep 2

［ヘッダ］エリアにある、［印刷＋文字サイズ（リッチ）］のカスタムタグが配置されたブロックを［ブロックエディタ］で開いて、その［カスタムタグ］パーツを選択する。

文字サイズ変更ボタンが配置されたブロックを開く

Step 1

［印刷＋文字サイズ（リッチ）］のカスタムタグを選択

一部のテンプレートでヘッダに用意されている文字サイズ変更ボタンは「A」の文字の大きさで、印刷ボタンはプリンタのアイコンで示しているが、これを日本語の表記に変更する。

文字サイズ変更ボタンを日本語表記にする

デザイン的には元の文字サイズ変更ボタンのほうがすっきりとしているが、ウェブの利用者層など意識してわかりやすい表記を心がけるようにする。

point

［ブロックエディタ］で変更した［カスタムタグ］パーツを選択。上部にある［フォント］の設定でサイズを［大］に変更して［適用］ボタンをクリック。

文字の大きさを変更するStep 3

①［セット］ボタンをクリック

②［印刷＋文字サイズ１（テキスト）］を選択

［サイトエディタ］の［プレビュー］ボタンをクリックして、ブラウザでヘッダの変更を確認する。


大きめに表示された日本語による、文字サイズ変更ボタンおよび印刷ボタン


②［フォント］の設定でサイズを［大］に変更

①［カスタムタグ］パーツを選択

142

テキストのスタイルを設定する

Column

［ブロックエディタ］では、テキストにスタイルを設定することができる。設定するテキストの行にカーソルを置き、画面上部の［段落のスタイル］をクリックして、メニューから選択すればいい。段落の左端にスタイルの名称が表示される。スタイルの本来の役割は、下の図のようにテキストの持つ意味を示すものであったが、実際にはその意味とは異なるテキストに設定す

ることもできる。スタイルによって文字の大きさや色などが変化するので、これを利用して文字組みのデザインに利用することが可能だ。　ただしスタイルを設定したからといって、文字の色や飾りなどが常に同じものになるわけではない。BiNDでは、同じスタイルでも［テーマ］や［ブロックスキン］の変更によって色などが変化する。

スタイルの設定は、画面の左側に一目でわかるように表示される

上図のテキストをウェブページで表示した結果。スタイルが同じでもテーマを変えると文字の色や書体などが変わる

テーマによる同一スタイルの文字の変化

スタイルの設定とその役割

［段落のスタイル］ボタン

大見出し：文頭や文中に大きく入れる見出しを設定

リード：文章の導入部分のテキストを指定する

引用：ほかの文章から引用する場合に設定

注釈：記事の注釈や注意書きなど

HTMLタグ：HTMLを編集エリアに入力した場合に設定

コメント：編集エリアだけで表示されるテキストで、ウェブページには表示されない

タイトル：文章のタイトルを設定。最も大きく表示される

小見出し：文頭や文中に小さく入れる見出しを設定

本文：記事の主な部分のテキスト

囲み：補足的なテキストなどを囲む場合

クレジット：著作権表記などを小さな文字で表示する

143

応用＆運用CONTENTS

-1 GoogleやYahoo!に登録される情報を設定する 144 Column リスティング広告について 146 -2 ウェブサイトのアクセス解析を設定する 147 -3 アクセスカウンターを設置する 150 -4 ウェブページで音楽を再生する 152 -5 サーバーに自動でデータをバックアップする 154 -6 ウェブページの公開・非公開を管理する 156 -7 サイトデータのバックアップを取る 158 -8 テストサーバーと正式サーバーを切り替える 160 -9 画像に著作権情報の表示を加える 161 -10 サイトを分割して管理する 162 -11 サイトにパスワードをかける 164

Lesson6

144

応用＆運用Lesson6-1

ウェブページを公開したら、Googleなどの検索エンジンでできるだけ上位の検索結果に反映されるようにしたい。そのため、BiNDでは説明文やキーワードなどを設定できるようになっている。

GoogleやYahoo!に登録される情報を設定する

［サイトエディタ］画面下部にある［設定］ボタンをクリックする。

サイトエディタの設定画面を開くStep 1［設定:これより下位のコーナーで次の設定を使用する］のチェックボックスにチェックを入れて、［検索対象］で［する］を選択する。

検索ロボット巡回設定を有効にするStep 3

コーナーの説明文とキーワードを入力

コーナーの内容を簡単に説明した文章を［説明文］欄へ入力。またサイトと関連するキーワードを［キーワード］欄にそれぞれ入力する。キーワードは、半角のカンマ（,）で区切る。全角の読点（、）などで区切ると検索エンジンのロボットは複数のキーワードと認識せずに１つの長いキーワードとして登録してしまうので注意が必要だ。

Step 4

［説明文］を入力

［キーワード］を入力

①チェックを入れる

②［する］を選択

［設定］ボタンをクリック

設定画面を開いたら、次に設定画面の上部のボタンで［コーナー設定］を選ぶ。

コーナー設定を開くStep 2

［コーナー設定］をクリック

145





6応用＆運用


a付録

1基本操作

［サイトエディタ］ → ［コーナー設定］

アップロードを実行する

説明文とキーワードを設定したら［はい］ボタンをクリック。最後に忘れずに［アップロード］ボタンをクリックして、サイトを更新する。

Step 5

Featured Function

検索ロボット巡回設定はページ単位でも設定できる。［サイトエディタ］でページを選択してから［設定］ボタンをクリック。設定画面上部にある［ページ設定］を選択して、［検索ロボット巡回設定］タブをクリックするとStep2、と同様の設定画面が表示される。［設定:このページでは次の設定を使用する］にチェックを入れると、選択したページで検索対象の可否や説明文、キーワードの設定が個別にできる。この中の［検索対象］で［しない］を選択すれば、サイトの一部を検索対象から外せる。URLを教えた人だけに見せたいページなどを公開するときに便利な機能だ。

特定のページを検索対象から外す

memo

Step4で設定した［説明文］と［キーワード］は、ブラウザで直接見ることはできない。アップロードしてサイトを開いたら、ソースを表示して<meta name="keywords" content="xxxx" /><meta name="description" content="xxxx" />に情報が埋め込まれているのを確認する。ただし検索エンジンの巡回には時間がかかるので、すぐには反映されない。1～数日してから確認する。

ウェブサイトで情報の登録を確認する

Step 6

②［設定］ボタンをクリック

①ページを選択

③［ページ設定］を選択

⑥［しない］にチェックを入れれば検索エンジンの検索対象から外せる

⑤チェックを入れる ④［検索ロボット巡回設定］をクリック

②ソースの中に［説明文］と［キーワード］が埋め込まれているのを確認

②［はい］をクリックしてサイトを更新


146

リスティング広告について

Column

　ウェブサイトを開設したが、利用者が増えない。SEO対策（参照 P.66）も施したが、検索結果が思うように上位にこない……。そんな場合は、「リスティング広告」を検討してもいいだろう。GoogleやYahoo!で検索をすると、検査結果の上や下、あるいはサイドバーに表示される広告リンクのことだ。Googleでは「スポンサーリンク」、Yahoo!では「サポンサードサーチ」と表示されている。これは検索連動型広告とも言われるもので、広告主があらかじめ指定したキーワード、あるいは関連するキーワードが検索された際、その検索結果の画面に設定したタイトルと説明文を表示するという仕組みだ。　「広告」というと、テレビや新聞、雑誌などのマスメディアの広告スペースに掲載するような、非常に料金が高いものというイメージがあるかもしれない。しかしリスティング広告の場合、料金は「指定したキーワードに応じた単価」と「自分のサイトへのリンクが実際にクリックされた回数」によって決まる。　具体的には、次のような手順でリスティング広告を出すことができる。「Yahoo!リスティング広告」を例に説明してみよう。　まず広告主は、「Yahoo!リスティング広告」のページ（http://listing.yahoo.co.jp/）で申し込みをして「Yahoo! JAPANビジネスID」を取得。続いて「スポンサードサーチ」のアカウントを取得したら、同サービスの「クライアントセンター」で前払い広告料金を入金する（3000円以上）。「キーワード」と「広告内容」（タイトル15文字、説明文33文字）を登録。登録すると、Yahoo!の審査があるので、その結果を待つ。問題がなければ、登録した内容に応じて検索結果に広告が表示されるようになる。表示のみでは料金は発生せず、クリックに応じて広告主に課金される（前払いの分から差し引かれる）。

　重要なのは、クリックの単価と、キーワードに対して複数のスポンサーがいる場合の掲載順位だが、単価は広告主が入札した価格によって決まる。複数の広告主が指定するキーワードだと、競合して入札価格が上昇する。ただし、掲載の順位は入札価格だけでは決まらない。Yahoo!リスティング広告では、広告の内容（リンク先の内容）に応じた「品質インデックス」という評価値を持っている。品質インデックスはクリック率などによって変化するが、どのように計算されているかは公開されていない。この品質インデックスが高い広告は、入札価格が低くても上位に掲載されることがある。　以上のような仕組みがリスティング広告だが、キーワードの選択と入札価格の設定をうまくやれば、費用をそれほどかけなくても個人のサイトでも訪問者を呼び込める可能性がある。しっかりと効果を見極めつつ試してみるといいだろう。

Yahoo!の検索結果に表示された「スポンサードサーチ」（赤線の囲みの部分）。「BiND for WebLiFE* 4 プロフェッショナル版」に付属する「ビジネス・パス」には「Yahoo!リスティング広告」の「スポンサードサーチ」広告費5000円分（ただし初期の前払いには利用不可）のクーポンが含まれている

147





6応用＆運用


a付録

Lesson6-2 応用＆運用

基本操作

1

Googleのアクセス解析サービス「Google Analytics（アナリティクス）」を使えば、サイトへの訪問者の動向を調べることができる。BiNDで作ったサイトもこの解析の対象になる。

ウェブサイトのアクセス解析を設定する

［新しいアカウントの作成］画面が開いたら、解析をしたい対象サイトのURLと、アカウント名を入力。サイトが設置されている国を選択して［続行］ボタンをクリックする。続く画面で姓、名を入力し、国を選択。さらに［続行］ボタンを押す。

アカウントの情報を入力するStep 3

［Analyticsにアクセス］ボタンをクリック

「Google Analytics」（http://www.google.com/intl/ja/analytics/）のサイトを開いて［Analyticsにアクセス］ボタンをクリック。Googleのアカウントでログインしていない場合はログインする。

Google Analyticsのページを開く

Step 1

Google Analyticsの概要を説明しているページ内の［Google Analyticsに申し込む］欄から［お申し込み］ボタンをクリックする。

Google Analyticsの利用を申し込む

Step 2

［お申し込み］ボタンをクリック

①解析の対象にしたいサイトのURLを入力

②アカウント名を指定

③国を選択

④姓名を入力

⑤国を選択

148

Lesson6 応用＆運用

ウェブサイトのアクセス解析を設定する

-2

①［はい。上の利用規約に同意します。］をチェック

次に利用規約の同意を求められるので、読んで同意できれば［はい。上の利用規約に同意します。］にチェックを入れて［新しいアカウントを作成］ボタンをクリックする。

利用規約に同意してアカウントを作成する

Step 4BiNDの［サイトエディタ］の［設定］画面で［サイト設定］を開き、［アクセス解析設定］をクリック。下段にある［トラッキングコード（解析用コード）を入力］というエリアにStep５でコピーしたコードをペーストする。［サイト設定］で［OK］ボタンをクリック。

BiNDのアクセス解析設定にトラッキングコードを入れる

Step 6

トラッキングコードの確認方法は、「Google Analytics」（https://www.google.com/analytics/settings/home/）を開いて、［Analyticsアカウント］から解析を登録したサイトを選択。［プロファイル］リストの［アクション］欄にある［編集］をクリックして表示される画面で［ステータス確認］を開けばいい。

point

［サイトにこのコードを貼り付けます］という欄に、［トラッキングコード］が表示されたら、そのコードを選択してコピーする。

トラッキングコードをコピーするStep 5

［サイトエディタ］で［アップロード］ボタンをクリックしてサイトを更新する。これで、トラッキングコードが組み込まれたウェブページが公開される。

アップロードするStep 7

②［新しいアカウントを作成］ボタンをクリック

［トラッキングコード］をコピーする

①コードをペースト


アップロードを実行する

サイトのソースにはトラッキングコードが組み込まれている

149




6応用＆運用


a付録

基本操作

1


Featured Function

［サイトエディタ］ → ［サイト設定］

解析が始まったら、［レポートを表示］をクリックすれば、自分のウェブページの詳細なアクセス解析情報がグラフや数値で確認できる。

解析レポートを開くStep 9設定ページを開く

アップロードが完了した後、「Google Analytics」の設定ページ（https://www.google.com/analy tics/settings/home/）を開く。トラッキングコードを組み込んだサイトのアップロード直後は、データが取得されておらず、「ステータス」欄に注意のマークが表示される。数時間待つと、ステータスがチェックマークに変わる。

Step 8

Googleによると、トラッキングコードを設置したサイトの公開後、解析データがレポートに反映されるまでには少なくとも24時間かかるとのことだ。

point

Google Analyticsには、サイトへのアクセスの状況に一定の変化があった場合、自動的にそれをユーザーに知らせる機能がある。レポートページの［インテリジェンス］というコーナーで設定可能だ。

アクセス状況に変化に応じて即座にアラート

memo

①解析データが得られていないことを示すマーク

②データを集計中のマーク

③解析を行っていることを示すマークに変わる

①［レポートを表示］をクリック

②アクセス状況をグラフで報告するレポートが表示される

150


［ページ設定］画面でスクリプトを書き込んで、BiNDで作ったウェブページにカウンターを組み込むことができます。ここでは、「忍者カウンター」を例に組み込み方を説明します。

アクセスカウンターを設置する

カウンターのサービスの多くは、カウンターのデザインをカスタマイズできる。ページのデザインとマッチするようなものを選ぶ。

point

［アクセスカウンターのタグ］をコピーしておく

ウェブサービス「忍者カウンター」（http://www.ninja.co.jp/counter/）のIDを取得。ログインして管理ページへ移動し、画面左側の［HTMLソース表示］をクリック。そこで表示される［カウンター用HTMLソース］欄のソースをコピーする。

アクセスカウンターのソースをコピー

Step 1［スクリプトと詳細設定］をクリックすると表示される［スクリプト入力］欄にStep1でコピーしたソースをペースト。［ページ設定］画面の下部にある［OK］ボタンをクリックする。

スクリプトを入力するStep 3

［サイトエディタ］画面下部にある［設定］ボタンをクリックし、設定画面を開いたら、次に設定画面の上部のボタンで「ページ設定」を選ぶ。

ページ設定を開くStep 2 プレビューしてカウンターを確認

［サイトエディタ］の「プレビュー」ボタンをクリック。ページの上部にカウンターが表示されるのを確認。

Step 4


②アクセスカウンターのソースを入力する

①［スクリプトと詳細設定］をクリック

カウンターが表示される


②［ページ設定］をクリック

151





6応用＆運用


a付録

1基本操作

［サイトエディタ］ → ［ページ設定］ → ［スクリプトと詳細設定］

カウンターのソースを登録する

もう一度［サイトエディタ］で［設定］をクリックして、［ページ設定］の［スクリプトと詳細設定］を開く。［スクリプト入力］欄の右上にある［セット］メニューをクリックして［保存］を選ぶ。これで、ほかのページに同じカウンターのソースが保存された。

Step 5

Featured Function

カウンターはブロックの中に埋め込むことも可能だ。［ブロックエディタ］で［カスタムタグ］パーツを挿入し、Step1のソースを入力して［適用］ボタンをクリックする。カウンターをページの最上段ではなく、フッタ部分などに表示したい場合はこの方法で組み込むといい。

ページのほかの位置にカウンターを設置する

memo

カウンターのソースをカスタムタグにペースト

カウンターが組み込まれた

カウンターを設置したい、ほかのページを開いて［設定］をクリックして、［ページ設定］の［スクリプトと詳細設定］を選ぶ。［セット］メニューから、保存したソースを選択する。画面下部の［OK］ボタンをクリック。［プレビュー］でカウンターが組み込まれたことを確認する。

別のページにカウンターを設置するStep 6

②［保存］を選択

③［セット］メニューをクリック

④保存したソースを選択

①［セット］メニューをクリック


①［ページ設定］

②［スクリプトと詳細設定］

ページの好みの位置にカウンターを表示できる

152

6-4 応用＆運用Lesson

ウェブページを開くと自動的に音楽が流れる仕掛けは、BiNDでは［カスタムタグ］にソースを入力して組み込むことで実現できる。

ウェブページで音楽を再生する

音楽を使用する場合、楽曲の作詞家・作曲家など著作者に許諾を取る必要がある。著作権、人格権、隣接権、出版権の侵害は、刑法による罰則が発生するので注意が必要だ。

point

MP3形式の音楽データを用意する

ウェブページで再生するための音楽データを用意する。iTunesなどを使ってファイル形式をMP3に変換する。

音楽データを用意するStep 1挿入された［カスタムタグ］を選択。画面右側の［設定エリア］の［HTMLソース］欄で［パーツ名］を入力してから［編集する...］ボタンをクリック。［HTMLソースエディタ］が開いたら、以下のHTMLソースを入力する。入力し終わったら［OK］ボタンをクリック。

HTMLソースを入力するStep 3

音楽プレイヤーを組み込むブロックを［ブロックエディタ］で開く。［パーツ一覧］の［カスタムタグ］をクリックする。

ブロックエディタでブロックを開くStep 2

［カスタムタグ］をクリック

①［カスタムタグ］を選択

②［パーツ名］を入力

③［編集する...］ボタンをクリック

④HTMLソースを入力


<embed id="BGM " src="_userdata/mysong.mp3"

type="audio/x-mp3" width="200" height="50"

repeat="true"

loop="true" autostart="true"

volume="100" hidden = "true"

pluginpage="http://apple.co.jp/quicktime/" >

</embed >

153







a付録

基本操作

1

［ブロックエディタ］ → ［カスタムタグ］

Featured Function

前述したHTMLソースは、下記の部分を変更することで動作を変えることができる。

hidden = "true"を削除：プレイヤーが表示される。

autostart="true"のtrueをfalseに変更：ページを開いた際に自動再生しない。

repeat="true" および loop="true" のtrueをfalseに変更：繰り返し再生しなくなる。

embedタグのカスタマイズmemo

このHTMLソースは、デジタルステージのウェブページ（http://www.digitalstage.jp/support/ bind3/tips/archive/tips025.html.html）でもティップスとして紹介されている（ただしカスタムタグに入力するHTMLソースについてはサポートの対象外となる）。

point

音楽データをユーザーフォルダに移動

［ブロックエディタ］の［設定エリア］の下部にある［ユーザーフォルダを開く...］をクリック。Finder（Mac）あるいはエクスプローラ（Windows）で［ユーザーフォルダ］が開いたら、その中にStep1の音楽データを移動する。

Step 4

［ブロックエディタ］で［適用］ボタンをクリック。すると、［サイトエディタ］画面で設定した音楽が自動的に再生開始する。［プレビュー］ボタンをクリックしてブラウザでも再生されることを確認する。

ブロックエディタで適用して確認Step 5

①［ユーザーフォルダを開く...］をクリック

②［ユーザーフォルダ］にStep1の音楽データを移動


ページが表示されると自動的に音楽が再生される

hidden = "true"を削除すると、プレイヤーが表示される

154


ハードディスクのクラッシュなどで作ったサイトデータを失ってしまうと、自分でも同じものは作り直せないことが多い。ここでは、BiNDの機能を使ってサーバー上に自動的にサイトデータのバックアップを取る方法を説明する。

サーバーに自動でデータをバックアップする

［サイトエディタ］下部の［設定］ボタンをクリック。［設定］画面の上部にある［サイト設定］をクリックする。

サイトエディタのサイト設定を開くStep 1［サイトエディタ］で［アップロード］をクリック。これでサイトのアップデートと同時にバックアップデータのアップロードも行われる。

サイトデータとともにバックアップデータをアップロード

Step 3

［自動バックアップ設定］を開き、［自動バックアップ機能をオンにする］にチェックを入れ、［OK］ボタンをクリックする。

自動バックアップ設定を有効にするStep 2

②［設定］をクリック



②［自動バックアップ機能をオンにする］にチェック

①［自動バックアップ設定］を開く

アップロードを実行してバックアップの完了

自動バックアップの設定を有効にしていない場合、最初のアップロードの際に設定を有効にするかを確認するダイアログが表示される。ここで「オンにする」を選べば設定が有効になる。

point

155





6応用＆運用


a付録

1基本操作

［サイトエディタ］ → ［サイト設定］

Featured Function

BiNDを起動して［サイトシアター］で戻したサイトを編集しようとすると、「バックアップファイルを解凍しますか」というダイアログが表示されるので、［OK］ボタンをクリック。

BiNDを起動してバックアップファイルを解凍する

Step 6ウェブサーバーのデータをダウンロードする

FTPソフトを使ってウェブサーバー上にあるサイトのデータをダウンロードする。

Step 4

サイトのデータが保存してあるディレクトリを丸ごとダウンロードする。そのディレクトリ名は、［サイトエディタ］の［サイト設定］で［サーバーディレクトリ］に入力した名称になっている。

point

サイトを開いて確認する

［サイトエディタ］でサイトを開いて復旧しているかを確認する。

Step 7

ウェブサーバーからダウンロードする

ダウンロードしたデータをBiNDのデータの保存先フォルダへ移動

BiNDを終了した状態で、ダウンロードしたサイトのデータをBiNDデータの保存先フォルダ（標準設定では「MyBiND4_Sites」）へ移動する。

Step 5

BiNDデータの保存先フォルダに移動

ダイアログが表示されたら［OK］ボタンをクリック

①バックアップのデータであることをフォルダ名で確認

②サイトの復旧を確認して完了

自動バックアップ機能は完全に復元することを保証するものではない。最後のアップロード以降の作業分は保存されないので、大事なサイトのデータは、サイトサイトデータをフォルダごとローカルのストレージなどにバックアップしておく必要があるだろう。参照 P.158

point

156


ウェブページの公開・非公開を管理するBiNDで作ったサイトでは、ワンクリックでページ単位やコーナー単位の公開・非公開を設定できる。作りかけのページや公開が終わったページを非公開にするなど、サイト管理に便利な機能だ。

公開・非公開は、ページ単位だけでなく、コーナーごとにまとめて設定することも可能だ。ページと同様に、［サイトエディタ］の［サイトマップ］でコーナー名の横のボックスをクリックして設定する。非公開のコーナーを作っておけば、ページをドラッグしてこのコーナーから出したり入れたりするだけで簡単に公開・非公開を切り替えられる。

非公開設定を使って効率アップ

memo

ページ名の横にマークが付き、非公開の設定になったことを確認する。

非公開マークを確認Step 3［サイトエディタ］の［サイトマップ］で非公開にするページ名の右にあるボックスをクリックする。

サイトエディタでページ名の横をクリック

Step 1

非公開にすることを確認するダイアログが表示されるので、［OK］ボタンをクリックする。

確認ダイアログで[OK]ボタンをクリック

Step 2

ページ名の横のボックスをクリック

［OK］ボタンをクリック

非公開のマークが表示される

コーナー全体を非公開に設定できる

157





6応用＆運用


a付録

1基本操作

［サイトエディタ］ → ［サイトマップ］

Featured Function

アップロードを実行して確認

［サイトエディタ］で［アップロード］ボタンをクリック。ウェブブラウザでページが公開されていないのを確認する。

Step 4

ページを非公開にした場合、そのままにしておくと上の図のようにエラーが表示されてしまうので、代わりに「工事中」などのページを作って置き換えておくと親切だ。

point


［サイトエディタ］の［サイトマップ］では非公開マークの右横に、作業の状態を示すラベルを表示させることができる。非公開コーナーと合わせてラベルを付ければ、サイトの更新の作業が管理しやすい。また、公開・非公開やラベルの設定は、［サイトエディタ］の［設定］画面内にある［ページ設定］でも設定できる。

ラベルを使って作業状況を管理する

memo

②非公開に設定したページが表示されないことを、ウェブブラウザで確認

非公開マーク欄の右横をクリックするとラベルを指定できる

公開・非公開やラベルは、［サイトエディタ］の［設定］の［ページ設定］でも設定可能

6 応用＆運用Lesson

158

-7

BiND4を終了させて、サイトデータのフォルダを、フラッシュメモリーなど外部ストレージやファイルサーバーなどにコピーする。

BiNDデータの保存先フォルダをコピー

Step 3

BiND4で作成したウェブのデータは、フォルダ単位で保存されている。このフォルダをコピーしておけばバックアップを取ることができる。

サイトデータのバックアップを取る

［サイトシアター］で［マイサイトを編集する］をクリック。サイトを選択して［決定］ボタンをクリック。

バックアップを取るサイトを選択Step 1

①［マイサイトを編集する］をクリック

選択したサイトの情報が表示されるダイアログが開いたら、［サイトフォルダを開く］ボタンを押す。するとFinder（Mac）あるいはエクスプローラ（Windows）で保存先フォルダ（標準では［MyBiND4_Sites］フォルダ）が開く。

データの保存先フォルダを開くStep 2

サイトの情報が表示されるダイアログにある［バックアップを作成する］ボタンをクリックすると、その時点のサイトの状態が保存される。横の［▼］ボタンをクリックすると表示されるメニューから日付を選択することで［バックアップを作成する］ボタンをクリックしたときの状態に戻ることができる。この機能では同じストレージにデータを保存するため、ハードディスクのクラッシュなどの対策にはならないので注意が必要だ。

point②サイトを選択

③［決定］ボタンをクリック

①［サイトフォルダを開く］ボタンをクリック

②サイトデータが保存されたフォルダが開く

別のストレージやサーバーにサイトフォルダをコピー

159

1基本操作





6応用＆運用


a付録

Featured Function

［サイトエディタ］

フォルダ名は、［サイトシアター］でサイトを選択して［決定］ボタンをクリックすると表示されるダイアログで確認できる。

point

バックアップしたデータを使って作業をするには、Step2の作業と逆に、サイトデータのフォルダを、別環境の保存先フォルダにコピーする。元のデータを残しておきたい場合は、コピーの前にフォルダ名を変更しておく。

フォルダにBiNDデータを戻すStep 4

BiND4を起動する。［サイトシアター］でコピーしたサイトを選択し、編集する。サイトの編集が完了したら［アップロード］ボタンをクリック。サーバーの設定も引き継がれているのでそのままアップロードできる。

データを開いて確認するStep 5

ウェブの更新も元の環境と同じく実行できる

ここで紹介したバックアップの方法を応用すれば、２つ以上のBiND環境でコピーしたデータを使って作業することが可能だ。コピーしたサイトのデータを、Step4のように元のフォルダに戻すのではなくて、ほかのBiNDがインストールされたマシンの保存先フォルダにコピーすればいい。BiNDのデータは、Windows版とMac版で互換性があるので、MacからWindowへデータをコピーして作業をすること、あるいはその逆も可能だ。

２台のマシンで編集作業をする

memo保存先フォルダにコピー

［フォルダ］項目でフォルダ名を確認

160


ウェブを正式公開する前に、別のサーバーを用意して試験的にアップロードして表示などをチェックすることはよくある。BiNDでは、こうしたテストサーバーと本番サーバーの切り替えをワンタッチで行える。

テストサーバーと正式サーバーを切り替える

［サイトエディタ］の［設定］画面で［サイト設定］を選択し、［サーバー設定］を開く。画面右側にある［セット］ボタンをクリックして、［保存］を選択。

サイト設定のサーバー設定を保存Step 1サーバーの設定を変更する。変更後、［セット］ボタンをクリックして、［別名で保存...］を選択。サーバー設定の名前を入力。ここでは「テスト版設定」と入力して、［OK］ボタンをクリック。

設定を変更して別名で保存するStep 3

［セット］ボタンで設定を切り替える

［セット］ボタンをクリックすると、メニュー項目に、Step2、3で入力した設定名があるので選択。これで、サーバーの設定が切り替わる。

Step 4

②［サイト設定］を選択

⑤［OK］ボタンをクリック④サーバー設定の名前を入力

画面上部に表示されるダイアログに保存するサーバー設定の名前を入力。ここではわかりやすく「正式版設定」とする。［OK］ボタンをクリックすれば、現在のサーバー設定が保存される。

名前を付けてサーバー設定を保存Step 2

③［サーバー設定］をクリック

④［セット］ボタンをクリック

⑤［保存］を選択

①サーバー設定の名前を入力


①サーバーの設定を変更 ②［セット］ボタンをクリック

③［別名で保存...］を選択

②サーバー設定を選択

①［セット］ボタンをクリック

③サーバー設定が切り替わる


161





6応用＆運用


a付録


1基本操作

ウェブで公開している画像には無断流用を防ぐために著作権情報などを目立たないかたちで入れている場合がある。こうした画像も、［SiGN］の［ウォーターマーク］機能を使えば簡単に作ることができる。

画像に著作権情報の表示を加える

埋め込み用の画像は、透明度の情報を持ったものであれば、半透明の状態で写真に貼り込むことができる。

point

SiGNの画面には、埋め込んだ画像は表示されないが、画面上部の「ウォーターマーク設定」が［ON］になっている。［保存］ボタンをクリックして［SiGN］を終了したら、［ブロックエディタ］で［適用］を実行後、［サイトエディタ］の［プレビュー］ボタンを押してブラウザで表示を確認する。

画像を保存して表示を確認Step 4

写真などに埋め込むためのコピーライト用画像を用意する。［SiGN］を使って作ってもよい。フォトレタッチソフトを使って、半透明の画像にすれば透かしで配置することも可能だ。

著作権表示用の画像を用意するStep 1［ウォーターマーク設定］画面が表示されたら、画像ファイルを選択。配置を設定したら［適用］ボタンをクリックする。

埋め込む画像を設定するStep 3

［ブロックエディタ］で著作権表示を加える画像の［SiGN］パーツを選択して［SiGNを起動する...］をクリック。［SiGN］画面上部にある［ウォーターマーク設定］ボタンを押す。

著作権表示を加える画像をSiGNで開く

Step 2

あらかじめ［SiGN］で作ったコピーライト表記の画像

［ウォーターマーク設定］ボタンを押す

②画像ファイルを選択

②写真に著作権情報の画像が埋め込まれた

①［ウォーターマーク設定］が[ON]になっている

④［適用］ボタンをクリックする

③画像の位置を設定

①［ウォーターマーク画像を使用する］にチェックを入れる

6 応用＆運用Lesson

162

-10

BiNDでは、ウェブサイトの規模が大きくなった場合、分割して管理・更新することも可能だ。ここではサイトのデータを分割し、サーバディレクトリも分けてアップロードする方法を説明する。

サイトを分割して管理する

［サイトシアター］の［サイトマップ］で、サイトのページ構成を確認してどの部分を分割するかを決める。ここでは、サイトのコーナーを単位で分割する。

サイトマップでサイトの構造を確認Step 1

［サイトシアターに戻る］をクリックして［サイトシアター］に戻る。［マイサイトを編集する］をクリックして分割したいサイトを選択。［決定］ボタンを押して［複製］ボタンをクリック。

サイトシアターでサイトを複製するStep 2

複製で作られたサイトは、データの保存先フォルダ名の末尾に「_2」が付け加えられている。保存先フォルダ名は、［サイトシアター］でマイサイトを選択して［決定］ボタンをクリックすると表示される画面で確認できる。

point

［複製］ボタンをクリック

この２つにサイトを分割する

複製で作られたサイトを［サイトエディタ］で開く。Step１で決めた分け方に従って、［サイトマップ］で不要なページあるいはコーナーを選択して［削除］ボタンをクリックする。複製元のサイトでも、同じく残すページやコーナー以外を削除する。

それぞれのサイトでページやコーナーを削除する

Step 3

①不要なコーナーを削除

●分割後のサイトその1

②不要なページとコーナーを削除

●分割後のサイトその２

163

1基本操作





6応用＆運用


a付録

Featured Function

［サイトエディタ］ → ［サイトマップ］

分割後初めてのアップロードの際、消したコーナーのディレクトリをサーバーから削除するので、先に階層が上の部分からアップロードする。２回目以降は差分検知が正常に機能するので順番はどちらでも構わない。

point

削除を実行した結果、コーナーのみになったサイトを［サイトエディタ］で開く。［サイトマップ］でコーナーの中のページすべてを、サイトの第１階層（サイト名の下）にドラッグして移動。

コーナーのみのサイトを開くStep 4

空になったコーナーを［サイトマップ］でダブルクリックして［コーナー設定］が開いたら、［ディレクトリ名］をコピーする。次に［サイト設定］をクリックして［サーバー設定］を開き、［サーバーディレクトリ］の末尾にコピーした［ディレクトリ名］をペーストする。［OK］ボタンをクリックして閉じたら、空のコーナーを削除。

コーナーのディレクトリをサーバーディレクトリに追加

Step 5

ページをすべてサイトの直下にドラッグして移動

①［ディレクトリ名］をコピー

②［サーバーディレクトリ］の末尾に［ディレクトリ名］をペースト

［ブロックエディタ］で分割したページをリンク先にしていたリンクパーツを選択。画面右側の［設定エリア］で［クリック設定］を選んで［リンクする］の欄に、実際のウェブサイトでのURLを入力する。分割した両方のサイトデータですべてのリンク切れを同様に修整する。

内部リンクを外部リンクに変更Step 6

①リンクパーツを選択

分割したサイトをそれぞれ［サイトエディタ］で開いてアップロードを実行。リンク切れがないかを確認して問題なければ完了。

アップロードして確認するStep 7

②［クリック設定］をクリック

③ URLを入力

①分割したサイトにまたがるリンクをクリック

②正しく移動できることを確認

164

応用＆運用Lesson

①［かんたんパスワード設定］をクリック

［アカウント名］と［パスワード］それぞれに入力して、［次へ］をクリック。すると再び［アカウント名］と［パスワード］を入力する画面が表示される。必要であれば、さらにアカウントを設定し、必要なければ空欄のまま［次へ］をクリックする。

ユーザー名とパスワードを設定するStep 3BiND Serverに［BiND Server Premiumコース］でログインして、画面左側にある［かんたんパスワード設定］をクリック。［新規作成する］をクリックする（［Basicコース］では利用不可）。

BiND Serverにログインして、かんたんパスワード設定を開く

Step 1

パスワードをかけるURLを指定する

［サイトコーナー］を指定する画面で、パスワードをかけるウェブページのドメイン名を選択し、ディレクトリを入力。［次へ］をクリックする。

Step 2

②［新規作成する］をクリック

①ドメイン名を選択②ディレクトリを入力

③［次へ］をクリック

確認画面で、URLの指定やユーザーの設定をチェック。問題なければ［次へ］をクリックして設定を完了する。指定したURLを開いてみて、設定したユーザー名とパスワードで開くことができるかを確認する。

設定を完了してパスワードがかかっていることを確認

Step 4

①アカウント名を入力

②パスワードを入力

①設定したURLを開く

②ユーザー名とパスワードを入力するダイアログが表示される

6-11

サイトにパスワードをかけるサーバーへアップロードしたサイトにパスワードをかければ、関係者などに限定して公開することができる。［BiND Server Premiumコース］では簡単な設定で、パスワードをかけることができる。

③［次へ］をクリック

165

モバイル&ショッピングサイトCONTENTS

-1 サイトにショッピングカートを組み込む 166

-2 受けた注文の内容を管理する 170

-3 独自ドメインを使ったサーバーを用意する 172

-4 携帯電話からの閲覧に対応する 173

-5 オリジナルデザインの携帯サイトを公開する 174

-6 QRコードを使って携帯サイトへ誘導する 176

Lesson7

7-1 モバイル＆ショッピングサイトLesson

166

BiND専門のサーバーサービス［BiND Server］のPremiumコースに入っていれば、ネットショップを開設可能だ。ここでは、開設のための設定からページにショッピングカートを設置するまでの手順を説明する。

サイトにショッピングカートを組み込む

ウェブブラウザで［BiND Server］（https://mypage.bindsite.jp/）を開いて、Premiumコースに登録しているアカウントでログインする。［BiND Server Contorl Panel］画面左側にある［ショップ情報設定］をクリックすると表示される画面で［ショップコード］［ショップパスワード］［ショップ名］などを設定。各設定項目を入力したら［次へ］ボタンをクリック。

ショップの情報を入力するStep 1

次に、購入手続きの中で利用可能にする支払い方法を設定する。［銀行振込］［郵便振込］［代引き決済］など各種決済方法から選んで、項目チェックを入れる。チェックを入れた項目には、支払い方法について説明など、必要な情報を入力。設定が終わったら、画面の一番下にある［次へ］ボタンをクリックする。

支払い方法を設定するStep 2

次の画面の［送料］欄には、全国一律の料金が決まっている場合はその金額を入力。送料については、購入総額が一定額を超えた場合、送料を無料にする場合の設定もここで行う。また購入の際、配送日時の指定などを利用者が入力する［特記事項］欄に初期状態で挿入されるテキストを設定。［次へ］ボタンをクリックする。

送料の設定と特記事項の表示の設定

Step 3

クレジットカード支払いなど一部の支払い方法を利用するには決済代行サービス「イプシロン」との契約が必要になる。

point

⑦［次へ］ボタンをクリック

⑥注文完了メールなどのFROM欄に入る［メールアドレス］を入力

⑤［ショップURL］を入力

④［ショップ名］を入力

③BiNDでの設定に使う［ショップパスワード］を入力

①［ショップ情報設定］をクリック

②BiNDでの設定に使う［ショップコード］を入力

①支払い方法を選択してチェック

②支払い方法に関する情報を入力する

①全国一律の送料を入力

②送料無料になる条件を設定

③利用者からのメッセージが入力される［特記事項］での表示を設定

④［次へ］ボタンをクリック

167

1基本操作





6応用＆運用


a付録

Featured Function

［ブロックエディタ］ → ［ショッピングカートパーツ］ → ［ショッピングカート作成］　※Premiumコース限定

ショップの設定が完了したら、商品を登録する。画面左側にある［商品管理］をクリックすると表示される［新しく商品を登録する］ボタンを押す。

商品の登録設定を開始Step 5

注文可／不可を示す［ステータス］や［商品管理番号］［商品名］などを設定する。また、［商品画像］は画像データを選択してから［アップロード］ボタ

商品情報を入力するStep 6

注文が完了した際に画面に表示するテキストを入力する。さらに、注文完了すると注文主に自動で送信されるメールの文面を設定。［次へ］ボタンをクリックするとショップの設定が完了する。

注文完了の設定を行うStep 4

商品の在庫数を入力。色やサイズなど商品にバリエーションがある場合は、それに応じて画面右側のボタンをクリックして設定する。この数字は注文が入るごとに減っていき、０になったら在庫切れの表示が出るようになっている。設定できたら［在庫を登録する］ボタンをクリック。これで商品情報の設定が完了。

在庫数を設定Step 7

①注文完了画面に表示されるテキストを設定

②注文完了メールのタイトルおよび文面を編集する

③［次へ］ボタンをクリックしてショップ設定の完了

ンをクリックすると、画像がサーバーへ送信されて設定される。設定し終わったら［在庫入力をする］ボタンをクリック。

①［ステータス］で注文可／不可を選択

②商品管理に使う［商品管理番号］を設定

③［商品名］を入力

④［ファイルを選択］ボタンをクリック ⑤［アップロード］ボタンをクリック

⑥［標準価格］を入力

⑦［在庫入力をする］ボタンをクリック

②［在庫を登録する］ボタンをクリック

①在庫数を入力する

②［新しく商品を登録する］ボタンをクリック

①［商品管理］をクリック

7-1

168

Lesson7-1 モバイル＆ショッピングサイト

ネットショップ開設の設定をする

BiNDでネットショップのページを選択。商品情報と［カートに入れる］ボタンを挿入するブロックを選択して、［編集］ボタンをクリックして［ブロックエディタ］で開く。画面右側の［ショッピングカートパーツ］を選択して［ショッピングカート作成］をクリックする。

ショッピングカートパーツを組み込むブロックを開く

Step 9

［BiND Cart Tag Generator］が開いたら、Step１で設定した［ショップコード］と［ショップパスワード］を入力し、［次へ］ボタンをクリックする。

ショップコードとショップパスワードを入力

Step 10

［ボタン選択］画面に切り替わったら、［カートに入れる］を選択して［次へ］ボタンをクリックする。

カートの種類を選択Step 11

［商品の選択］画面が開き、［BiND Server Contorl Panel］の［商品管理］で登録した商品リストが写真付きで表示されるので、その中から選択。［次へ］ボタンをクリックする。

ページに組み込む商品を選択Step 12

Step５～７の作業を繰り返して、商品をすべて登録。画面左側の［商品管理］をクリックすると、登録した商品のリストが表示される。

ほかの商品も登録Step 8

価格や在庫数の変更などは、［商品管理］のリストで、各商品の［処理］項目にある［編集］ボタンをクリックすれば、Step６、７の画面が開くので、そこで行う。

point

①［商品管理］をクリック

②商品のリストが表示される

①［ショッピングカートパーツ］を選択

②［ショッピングカート作成］をクリック②［次へ］ボタンをクリック

①ページに組み込む商品を選択

［カートに入れる］を選択

①Step１で設定した［ショップコード］を入力

②Step１で設定した［ショップパスワード］を入力

169

1基本操作





6応用＆運用


a付録



次に［カートを見る］ボタンをページに組み込む。ヘッダのブロックを［ブロックエディタ］で開いて、Step９、10と同様に進める。［ボタン選択］画面が開いたら、［カートを見る］を選択して［次へ］ボタンをクリック。ボタンのデザインを指定して［次へ］を押し、確認したら適用する。

カートを見るボタンを組み込むStep 14

複数のページに商品の掲載がまたがっている場合など、サイドバーやヘッダに［カートを見る］ボタンを配置して共有ブロックの設定で各ページに用意しておけば、ショップの使い勝手が向上する。

point

［サイトエディタ］で［プレビュー］ボタンをクリック。ブラウザでページが表示されたら、［カートに入れる］ボタンや［カートを見る］ボタンをクリックして確認する。

ショップの完成Step 15

ショッピングカート機能が利用可能になる［BiND Server Premiumコース］（月額利用料は2980円）は、BiND専用のサーバーサービス［BiND Server］の機能拡張オプションだ。ショッピングカート機能以外に、下記のリストのような機能が利用可能になる。機能単体としては、BiND Server以外のサーバーサービスが提供しているものもあるが、BiND本体との連携によってほかにはない機能や使い勝手のよさが実現している。

BiND Server Premiumコースについて

memo

デザインを指定Step 13ウェブページに商品を掲載する［商品タグ］のデザインを選択する。続いて［カートに入れるボタン］のデザインも選択。［設定の確認］画面で、設定した内容を確認。問題がなければ、［適用］ボタンをクリックする。［BiND Cart Tag Generator］が閉じたら、［ブロックエディタ］で［適用］ボタンをクリック。

①［カートを見る］を選択

②［次へ］ボタンを押して、デザインの選択をして進める


①デザインを選択

●BiND Server Premiumコースのサービス一覧

■かんたんパスワード設定：P.163参照■独自ドメイン設定：P.172参照■Mobileキャンペーン設定：P.176参照■BiND Mobile設定じぶんでモード：P.174参照※自動変換する［おまかせモード］も対応：P.173参照■QRコード作成：P.176参照■メールアドレス作成：独自ドメインのアドレスを発行する■WEBメール：発行したアドレスをウェブページからチェック／送信できる

②カートのアイコンの［カートを見る］ボタンを搭載

①商品の説明や写真と併せて［カートに入れる］ボタンを搭載

170



BiNDの［ショッピングカート作成］を使ってページに組み込んだ［カートに入れる］ボタンをクリックすると、以下のよ

うな流れで注文を行う。ここで、設定がどこに反映されているか確認してみる。

BiNDのショッピングカートでの買い物の流れmemo

注文主の氏名、住所、メールアドレスなどの情報を入力する。

2

［カートに入れる］ボタン、あるいは［カートを見る］ボタンをクリックすると、［カート確認］画面が開く。

1 4

3 支払い方法を選択。配送日時の指定などを［特記事項］欄に入力。

注文内容の確認が表示されるので、入力した内容に間違いがないか、確認する。

5 注文が完了したことが表示される。

6 ウェブページでの手続きが完了すると、注文完了のメールが送られてくる。

P.166のStep１で設定したロゴ

カートに入れた商品

P.166 の Step２で設定した支払い方法

P.166のStep３で設定した特記事項のテキスト

P.167のStep４で設定した注文完了時のテキスト

P.166のStep４で設定した注文完了メールのテキスト

Lesson

171





6応用＆運用


S付録

モバイル＆ショッピングサイトLesson7-2

1基本操作

受けた注文の内容を管理する設置したショッピングカートで受けた商品の注文を管理する方法を説明する。やはり利用には［BiND Server Premiumコース］の会員登録が必要となる。

顧客情報や、発送および入金の状況などが表示されるので、変更したい部分を入力し直す。［変更内容を確認する］をクリックし、確認画面で問題がなければ［変更を確定する］。

注文の内容を確認して変更するStep 3［BiND Server］（https://mypage.bindsite.jp/）にログイン。［コース選択］でショッピングカートを設定した［Premiumコース］をクリックする。

BiND ServerにログインするStep 1

受注管理を開く

［BiND Server Control Panel］画面で左側にある［受注管理］をクリック。［受注管理］画面には注文のリストが表示される。内容を変更したい項目の右端にある［詳細］をクリックする。

Step 2

受注日時などのより詳細な情報を確認したり、情報をほかのデータベースに読み込みたい場合は、Step2の画面で注文項目を選択して［CSVダウンロード］をクリックするとダウンロードできるファイルを利用すればいい。

point

①［受注管理］をクリック

②内容を変更したい注文の［詳細］をクリック

［Premiumコース］をクリック

②［変更内容を確認する］をクリック

①入金を「済」にするなどの変更をする

7-3 モバイル＆ショッピングサイトLesson

172

［BiND Server Premiumコース］では、独自ドメインをサーバーに設定することが可能だ。設定は［BiND Server Control Panel］で行う。

独自ドメインを使ったサーバーを用意する

［BiND Server］（http://mypage.bindsite.jp）にログインし、［FTPアカウント］を選択したら、画面左側にある［独自ドメイン設定］をクリック。［かんたん設定］ボタンをクリックする。

BiND Serverにログインして独自ドメイン設定を開く

Step 1

URLの入力欄が表示されたら、あらかじめ用意しておいたドメイン名を入力。［次へ］ボタンをクリックする。

URLを入力するStep 2［サイトエディタ］の［設定］を開いて、［サイト設定］をクリック。さらに［サーバー設定］をクリックして、［サイトURL］欄のドメイン名を「xxxxxx.xxxx.bindsite.jp」（xxxxxx.xxxxの部分はユーザーが選択したサブドメイン）を設定したドメイン名の前にwww.を加えたものに変更。これで設定は完了だ。

サーバー設定でサイトURLを変更する

Step 4

②［かんたん設定］をクリック

①［独自ドメイン設定］をクリック

［BiND Server］ではドメイン取得代行サービスは行っていない。あらかじめ「ムームードメイン」などのサービスを使って、ドメインを取得しておく。

point

［ネームサーバ設定］が表示されるので、ドメイン名を取得したサービスでDNSの設定を行う。

ネームサーバーの設定を確認するStep 3

［ネームサーバ設定］は、「DNSカスタム設定」や「レンタルDNSレコード設定」などと、呼称がサービスによって異なる。詳しくはドメイン名を取得したサービスで確認する。

point

ドメイン名を入力

［ネームサーバ設定］を確認。ドメイン名を取得したサービスでこの情報を設定する

［サイトURL］を設定したドメイン名の前にwww.を加えたものに変更

Lesson

173





6応用＆運用


S付録


1基本操作

携帯電話からの閲覧に対応する［BiND Server］にアップロードしたサイトは、自動的にモバイル向けの表示に最適化する［BiND Mobile］の［おまかせモード］機能によって、携帯電話からの閲覧にも対応する。

携帯電話に対応させるページを［サイトエディタ］の［サイトマップ］から選択。画面下部にある［モバイルプレビューボタン］をクリックする。

BiNDでモバイルプレビューを実行Step 1

次の画面で、モバイルに対応させるサイトのURLを指定する。さらに［次へ］ボタンをクリックして進み、確認画面でも［次へ］を押せば設定は完了。ブラウザでモバイル用に変換されたサイトをプレビューできる。設定後はサイトのURLを携帯電話で開くと、自動的にモバイル対応サイトへ移動して変換されたページが開く。

URLを入力して登録Step 4

①［BiND Mobile設定］で設定をする

②［おまかせモード］を選択

①サイトのURLを入力

②モバイル用に変換されたサイトをプレビュー

［モバイルプレビューボタン］をクリック

モバイルのテーマとレイアウトを設定する

［BiND Mobile SIMULATOR2］が起動したら画面にある［プレビューを表示］ボタンをクリック。［モバイルテーマ］と［モバイルレイアウト］をクリックすると表示されるメニューからそれぞれカラーテーマをとレイアウトを選択。設定が完了したら［適用］ボタンをクリックして閉じる。

Step 2

BiND Server Control Panelを開く

［BiND Server］（https://mypage.bindsite.jp/）にログインして、［FTPアカウント情報］を選択。［BiND Mobile設定］をクリックして、［BiND Mobile設定］画面の［新規作成する］ボタンを押す。［モード選択］画面で［おまかせモード］を選択して［次へ］ボタンをクリック。

Step 3


②［モバイルレイアウト］でコンテンツの表示順などを設定

①［モバイルテーマ］でテーマカラーを変更

174


［BiND Server］のPremiumコースに登録していれば、BiNDのモバイル用のカートリッジを使って作ったオリジナルデザインのモバイルサイトを公開することができる。

オリジナルデザインの携帯サイトを公開する

［サイトシアター］で［新規サイトを作る］をクリック。［BiND Server Mobile変換用］の中にある［Mobile］を選択して［作成］ボタンをクリック。

モバイル用カートリッジを選択Step 1モバイル用サイトが出来上がったら、［サイトエディタ］の［設定］で［サイト設定］を開いて、［サーバー設定］をクリックする。PC用サイトのディレクトリの下の「mobile」というモバイル用のディレクトリをアップロード先に設定。設定が終わったら［OK］ボタンをクリックして［アップロード］ボタンをクリック。

モバイル用サイトをアップロードする

Step 3

［ブロックテンプレート］の［標準：Mobile変換］には、このカートリッジに合わせた各種テンプレートが用意されている。

point

テンプレートから出来上がったモバイル用サイトを編集する。

モバイル用サイトを作成するStep 2


①［Mobile］を選択

モバイル用サイトを編集

［BiND Server］（https://mypage.bindsite.jp/）に［Premiumコース］に登録しているアカウントでログイン。［BiND Mobile設定］をクリックして、［BiND Mobile設定］画面の［新規作成する］ボタンを押す。［モード選択］画面で、［じぶんでモード］を選択して［次へ］ボタンをクリック。

BiND Server Control Panelを開く

Step 4

①モバイル用サイトをアップロードするディレクトリを設定


③［アップロード］ボタンをクリック


①［じぶんでモード］を選択

175





6応用＆運用


a付録

1基本操作

［BiND Server］ → ［BiND Mobile］ → ［じぶんでモード］※Premiumコース限定

Featured Function

［ツール確認］画面で、モバイル用サイトを作成したツールを設定。［BiNDで作成］を選択して［次へ］ボタンをクリック。

モバイル用サイトを作ったツールを設定

Step 6

サイトのURLを設定する

［サイト選択］の設定で、まずサイトのメインのURL（PCと携帯で共通にアクセスする）を入力する。続いて［次へ］をクリックして、Step３でアップロードしたモバイル用サイトのURLを入力。再び［次へ］ボタンをクリックする。これで携帯電話がPCと同じURLにアクセスしてもモバイル用サイトへ自動的に転送されるようになる。

Step 5

サイトを確認する

［完了］画面のリンクからブラウザでモバイル用に変換されたサイトをプレビュー。同じURLへアクセスしてもサーバーで判断して携帯電話ならモバイル用サイトへ転送するようになる。

Step 8

PCと同じURLにアクセスしても携帯電話用に作られたサイトが開く

設定内容を確認

［確認］画面が表示されたら、設定した内容を確認。メインのURLとモバイル用サイトを公開したURLを入れ違えていないかを確認する。

Step 7

携帯電話に最適化されたサイトのURL

メインのURL。携帯電話でここにアクセスすると下のサイトへ自動転送される

①［BiNDで作成］を選択


①サイトのメインのURL

③アップロードしたモバイル用サイトのURL


176


携帯電話に効率よくURLを転送する方法の１つであるQRコード。［BiND Server Premiumコース］は、このQRコードを作成する機能を備えている。

QRコードを使って携帯サイトへ誘導する

［BiND Server］（https://mypage.bindsite.jp/）にログインしたら、［FTPアカウント］を選択してから画面左側にある［QRコード作成］をクリック。［QRコード作成］画面が開いたら、URLあるいはメールアドレスを入力して［設定する］ボタンを押す。

BiND ServerにログインしてQRコード作成を開く

Step 1保存したQRコードの画像を、［ブロックエディタ］の［画像パーツ］でページに組み込む。

ページにQRコードを組み込むStep 3

①［QRコード作成］をクリック

②URLを入力

③［設定する］ボタンをクリック

［QRコード作成］画面の下部にQRコードが作成されたら、デスクトップへドラッグ＆ドロップして、その画像を保存する。

出来上がったQRコードを保存するStep 2

作成されたQRコードの横にある［アクセス合計］は、そのQRコードによってサイトへアクセスした回数を表示する。

point

作成されたQRコード

［画像パーツ］を使ってQRコードの画像を組み込む

［ブロックエディタ］で［適用］ボタンをクリック。［サイトエディタ］で［プレビュー］ボタンを押して、ブラウザでQRコードが組み込まれたページを確認する。

QRコードが組み込まれたページの完成

Step 4

空メール送信でメールを自動返信する［Mobileキャンペーン設定］と組み合わせれば、「このQRコードを読み込んでメールを送れば、お得な情報がゲットできる」といったような仕掛けを作ることができる。

point

QRコードが組み込まれた

参照 P.48 リンク付きの画像を配置する

177



6応用＆運用

5□□□□□□□□□■


7□□□□□□□□□■



a付録

appendix 1 付録

BiND4の標準テンプレート1

基本操作

Glass

Glass[White] Glass[Red] Glass[Blue]

Theater

Theater[Pink] Theater[Green] Theater[Cyan]

Style

Style[Beige] Style[Pink] Style[Green]

Kitchen cabinet

Kitchen cabinet[White] Kitchen cabinet[Blue] Kitchen cabinet[Brown]

Trip

Trip[Pink] Trip[Black] Trip[Blue]

Cappuccino

Cappuccino[Beige] Cappuccino[Black] Cappuccino[Pink]

Air

Air[Blue] Air[Gray] Air[Orange]

Fabric

Fabric[Beige] Fabric[Gray] Fabric[White]

↑BiND4↓BiND3

178

appendix 1 付録

BiND4の標準テンプレート一覧Freak

Freak[Red] Freak[Cyan] Freak[Orange]

Time

Time[Red] Time[Cyan] Time[Brown]

LIGHT and WORD

LIGHT and WORD Sky LIGHT and WORD Report LIGHT and WORD Film

High! Light!

High! Light! White High! Light! Black High! Light! Blue

Vintage Cup

Vintage Cup Brown Vintage Cup Navy Vintage Cup Red

Daily Platonic

Daily Platonic White Daily Platonic Black Daily Platonic Brown

SKT Resort

SKT Resort Blue SKT Resort Green SKT Resort Brown

Lover Shu

Lover Shu Purple Lover Shu Blue Lover Shu Brown

179



6応用＆運用

5□□□□□□□□□■


7□□□□□□□□□■



a付録

1基本操作

BiND4の標準テンプレート一覧MILK

MILK Grid2MILK GridMILK BlackMILK GreenMILK BlueMILK White

Ambience

Ambience GrayAmbience YellowAmbience BlackAmbience BlueAmbience RedAmbience Green

BiNDカフェ

Cafe BagCafe Brown2Cafe GreenCafe BlueCafe YellowCafe Brown

Pet LiFE

Pet LiFE BluePet LiFE Brown2Pet LiFE PinkPet LiFE GreenPet LiFE OrangePet LiFE Brown

180

appendix 1 付録

BiND4の標準テンプレート一覧Journal

Jurnal Check2Jurnal CheckJurnal GrayJurnal BrownJurnal BlueJurnal Red

Camera

Camera WallCamera BlueCamera GreenCamera RedCamera BlackCamera White

Photo

Photo BluePhoto OrangePhoto WhitePhoto GreenPhoto RedPhoto Black

Film

Film PinkFilm SkyBlueFilm OrangeFilm BlueFilm BrownFilm Green

181



6応用＆運用

5□□□□□□□□□■


7□□□□□□□□□■



a付録

appendix 2 付録

SiGNのエフェクト一覧1

基本操作

縁取

1 縁取り12 縁取り23 縁取り34 縁取り(黒)5 縁取り(白)6 縁取り77 縁取り88 縁取り9

影

1ドロップシャドー(黒)12ドロップシャドー(黒)23ドロップシャドー(黒)34ドロップシャドー(黒)45ドロップシャドー(白)16ドロップシャドー(白)27ドロップシャドー(白)38ドロップシャドー(白)4

鏡面反射

1 鏡面反射12 鏡面反射23 鏡面反射34 鏡面反射45 鏡面反射66 鏡面反射77 鏡面反射88 鏡面反射9

1 2

5

3

6 7 8

4

SiGNには、テキストでは40種類の、イメージでは96種類のエフェクトが用意されている。それぞれのエフェクトがどのような効果を生むか、用意したサンプルを基に、一覧できるようにした。ロゴやメインビジュアルなどの画像データ作成に役立ててほしい。

1 432

8765

1 432

8765

TEXTのエフェクト

エフェクトなし

※サンプルでは、効果がわかりやすく見えるように、文字や背景の色、位置などを適宜、調整しています。

182

appendix 2 付録

SiGNのエフェクト一覧グロー

1グロー12グロー23グロー34グロー45グロー56グロー67グロー78グロー8

マスク

1 積算 G0.82 積算 G1.03 積算 G1.24 積算ブラー5αブレンドブラー6αブレンド G0.87αブレンド G1.08αブレンド G1.2

明るさ

1 明るさ12 明るさ23 明るさ34 明るさ45 明るさ56 明るさ67 明るさ78 明るさ8

1 2

5

3

6 7 8

4

グレイスケール

1 ガンマ0.22 ガンマ0.43 ガンマ0.64 ガンマ0.85 ガンマ1.26 ガンマ1.47 ガンマ1.68 ガンマ1.8

1 2

5

3

6 7 8

4

1 432

8765

1 432

8765

IMAGEのエフェクト

エフェクトなし

183



6応用＆運用

5□□□□□□□□□■


7□□□□□□□□□■



a付録

1基本操作

SiGNのエフェクト一覧彩度

1 彩度12 彩度23 彩度34 彩度45 彩度56 彩度67 彩度78 彩度8

1

5 6

2

1 2 3

8

4

ガンマ

カラー

1

変調

2

色相

3

1 色相シフト12 色相シフト23 色相シフト34 色相シフト45 色相シフト56 色相シフト67 色相シフト78 色相シフト8

8

4

1 2

5 6 7

3

8

5

4

6 7

5 6

1

7

2

5

3

6 7 8

4

3

7 8

4

1 変調12 変調23 変調34 変調45 変調56 変調67 変調78 変調8

1 セピア12 セピア23 セピア34 セピア45 セピア56 セピア67 セピア78 セピア8

1 ガンマ0.22 ガンマ0.43 ガンマ0.64 ガンマ0.85 ガンマ1.26 ガンマ1.47 ガンマ1.68 ガンマ1.8

184

appendix 2 付録

SiGNのエフェクト一覧ブラー

1 Blur1 G1.02 Blur2 G1.03 Blur3 G1.04 Blur4 G1.05 Blur1 G1.46 Blur2 G1.47 Blur3 G1.48 Blur4 G1.4

1

5 6

2

1 2 3

8

4

スムージング

ノイズ

1

鏡面反射

2

Etc

3

1 周辺減光12 周辺減光23 周辺減光34ブラー加算15ブラー加算26ピント17ピント28ピント3

8

4

5 6 7

5 6 7

1 2

5

3

6 7 8

4

3

7 8

4

1 鏡面反射12 鏡面反射23 鏡面反射34 鏡面反射45 鏡面反射66 鏡面反射77 鏡面反射88 鏡面反射9

1 ノイズ12 ノイズ23 ノイズ34 ノイズ45 ノイズ56 ノイズ67 ノイズ78 ノイズ8

1 スムージング12 スムージング23 スムージング34 スムージング45 スムージング56 スムージング67 スムージング78 スムージング8

4321

8765

185



6応用＆運用

5□□□□□□□□□■


7□□□□□□□□□■



a付録

index

索引1

基本操作

B BDタグ 137 BiND Server 13、30、164、171、172 BiNDニュース 118、126、129 Blogger 100、103

C CSS 82

E embed 152

F Finder 22、75、153、158 Flash 12 FTP 13、31、155、172、173、176 FTPソフト 155

G Google Analytics 36、65、147 Google Map 114 Googleドキュメント 124 Google 翻訳 134

H HTML5 13、22 HTMLタグ 113、137、142

I IMAGE（SiGN） 40、68、89、182

J JPEG 40、78

P PNG 40、78、81 ［PREV］［NEXT］ボタン 40

Q QRコード 176

R RSS 118、122、126、129 RSS購読ボタン 120、122、126

S SEO 66、146 SHAPE（SiGN） 40、68、96 SHiFT for WebLiFE*（SHiFT） 13、22、44、70、72、74 SiGN for WebLiFE*（SiGN） 12、24、38、40、68、73、76、80、88、

96、161、180、181

186

index索引

S SYNC for WebLiFE*（SYNC） 5、13、28、100、104、106、108、110、112

T TEXT（SiGN） 25、41、68、73、77、81、90、181 Twitter 3、130、132

U USTREAM 3、106、132

Y Yahoo!地図 108 YouTube 110、112

あアイテムブラウザ 46、48、58 アクセス解析 147 ［アクセス解析設定］タブ 36 アクセスカウンター 150 アコーディオンメニュー 52 アップロード 30、35、65、113、121、131、137、145、

148、154、157、159、160、163、164、173、174

［アップロード］ボタン 31、35、65、145、148、157、159、174 アンカー 38、138 ［位置］十字ボタン（IMAGE） 42 ［位置］十字ボタン（TEXT） 25、41 インターネット 3、13、62 引用（段落のスタイル） 142 ウェブブラウザ 3、13、29、30、35、53、55、57、63、

80、91、93、104、113、119、121、122、125、128、129、136、139、140、157

ウィンドウタイトル 140 エフェクト（IMAGE） 42、68、180、182 エフェクト（TEXT） 41、73、77、81、90、181 エリア 14、19、22、24、64、75、140 大見出し 38、142 オプション（ブロックレイアウト） 37、53、60 おまかせモード 173

かカートリッジ（サイトシアター） 12、82、174、177 回転（IMAGE） 42 回転（TEXT） 78

187



6応用＆運用

5□□□□□□□□□■


7□□□□□□□□□■



a付録

1基本操作

か回転（画像エディタ） 43、92 ［拡大/縮小］スライダー（画像エディタ） 43、93 ［拡大/縮小］スライダー（IMAGE） 42、68 囲み 19、142、146 ［画質］スライダー 40 カスタムタグ 114、116、136、141 画像エディタ 23、43、57、71、75、92、95 画像共有サービス 113 画像サイズ 42、57、93 画像パーツ 21、38、48、92、94、96、176 キーワード 66、79、118、144、146 行間 41、82 行間&余白設定 37、64 行の位置 38 共有（ブロック） 39、55、112、125 クレジット 142 検索エンジン 37、66、118 検索ロボット巡回設定（コーナー設定） 36、144 検索ロボット巡回設定（ページ設定） 37、145 コーナー 14、34、85 コーナー設定 34、144、163 コーナー全体を公開する 157 コーナーのフォントの設定 36 コーナー名 36、156 このページを公開する 157 小見出し 38、80、87、142 コメント 44、71、142 コンテンツ（エリア） 12 コンテンツ（追加ページ） 34

さサーバー設定 30、36、160、172 サイド 102 サイトエディタ 15、19、30、34、49、56、63、64、87、

144、154、156 サイトシアター 17、162 サイドバー 14、52、56、63、74 サイト情報 36、158 サイト設定 18、36、137、154、160 サイト内検索 133

188

index索引

さサイト名 18、140 シェイプカラー 43 じぶんでモード 174 ショッピングカート 14、170、171 スクリプト 150 スクリプトと詳細設定 37、150 ずれ 64 ソーシャルブックマーク 120 隙間 64 再生リスト 112 自動バックアップ設定 154 自動転送 139 設定（ブロックエディタ） 53、60、64、86 設定エリア 24 説明文 66、105、144 装飾 13、38

たタイトル 18、76、80、140 タイムライン 130 ダウンロード 5、65、155 タブ形式 60 段落のスタイル 38 注釈 142 追加ページ 34、54 ディレクトリ 163 テーブル 45、50 テーマの変更 26、85 ［適用］ボタン 20、39、98 テンプレート（SiGN） 24、40、80、88 問い合わせフォーム 104 ［透明度］スライダー（SiGN） 40 ［透明度］スライダー（SHAPE） 43 登録ボタン 120、130 ドキュメント 124 ［閉じる］ボタン 39 トップページ 23、33、68、70

189



6応用＆運用

5□□□□□□□□□■


7□□□□□□□□□■



a付録

1基本操作

なニュースティッカー 118、126

はパーツ 14、22、38、100、114、133 パーツ一覧 15、39、100、110、114、116 背景画像 37、58 背景色（SiGN） 40 背景色（画像エディタ） 43 背景色（ブロックエディタ） 37 背景色（ページ設定） 37 バックアップ 33、154、158 バリエーション 26、40、102 パンくずリスト 136 非公開 34、156 比率を固定 43 ビルボード 14、22、27、69 ファイル形式 40 ファイル名 37 ファビコン 36 ［フィット］ボタン（IMAGE） 42 ［フィット］ボタン（画像エディタ） 43 フォーム 104、134 フォトアルバム 54 フォント（SiGN） 69、77 フォント（ブロックエディタ） 38 区切線 39 フッタ 14、151 プレビュー（サイトエディタ） 23、25、29、35 ブレンド 41、182 ブログ 14、100、102、122 ブログのデザインバリエーション 102 ブログパーツ 116 ブロック 14、37 ブロックエディタ 14、37、38 ブロックスキン 37、86 ブロックテンプレート 20、38、52、69、91 ブロックフレーム 87 ブロックレイアウト 37、53、60 分割 39、162 ページ 12、27、32

1

190

index索引

はページ設定 18、34、37、63、139、150 ページタイトル 35、37 ページデザイン 37 ページの幅 63 ページ名 18、137、140、156 ページレイアウト 37、63 ヘッダ 14、76、84 編集（ブロックエディタ） 14、38、52、92 ［保存］ボタン 23、40 本文 38、82、142

ま回込解除 39 メイン 15、27、102 メニューのデザイン 86 モバイル 35、37、174 見出しパーツ 38 見出し画像 40 元に戻す 39、45 文字間隔 41

や余白 37、64

らラベル 36、157 リード 142 リフレッシュ 139 リンクパーツ 38、62 レイアウト 34 レイアウトの変更 27 ロールオーバー 60、94、96

191

STAFF

朝倉尚制作協力

本文デザイン

編著者

宮澤聖二（iiiflow co.,ltd.）

中筋義人（mag creative office）ライター。出版社での勤務ののち、2009年にmag creative officeを設立。IT、ビジネス、クリエイティブ、カルチャーまで取材、インタビュー幅広くこなす。近著は「iPadでできる100のこと」（共著技術評論社刊）。

mag creative office

株式会社デジタルステージ監修

編集

村田有紀デザイン・オフィス、出版社勤務を経て2001年に渡英。音楽番組を主とする日系制作会社に就職し、社内ITのほか番組ウェブサイト、グラフィック制作などを担当。現在はフリーランスとして主にMac雑誌、テクニカル系ムック・音楽系フリーペーパーなどで執筆を行う。

執筆

カバーデザイン

ウェブコンポーザー・プロジェクト

牧修三（over-rev. design office）関口小綾香（over-rev. design office）若月秋生（over-rev. design office）

有限会社メイ校正

2010年9月17日初版第一刷発行

著者ウェブコンポーザー・プロジェクト監修株式会社デジタルステージ発行者佐々木博発行所株式会社メディアライフ〒155-0032 東京都世田谷区代沢5-17-12販売所日販アイ・ピー・エス株式会社〒113-0034 東京都文京区湯島1-3-4 電話 03-5802-1859印刷・製本 PR広告株式会社

ⓒ2010 WebComposer PROJECT, digitalstage inc.

定価はカバーに表示してあります。

造本には細心の注意を払っておりますが、万が一、乱丁や落丁がございましたら、株式会社メディアライフ営業部までお送りください。送料小社負担でお取り替えいたします。

本書は著作権上の保護を受けています。本書の一部、あるいは全部について、著者、発行者の許諾を得ずに、無断で複写、複製、転載することは禁じられています。

ISBN 978-4-930774-75-0 C3055 Printed in Japan

<本書に関するご質問について>・本書の内容に関するご質問は、ご氏名/ご連絡先/書籍タイトル/該当箇所を明記の上、下記の宛先までFAXまたは書面にてお送りください。・お電話によるご質問、および本書の内容以外に関するご質問は、一切お答えできないことをあらかじめご了承ください。なお、ご質問は「解説内容の意味がわからない」「解説の手順にしたがって操作してもうまくいかない」といった本書の内容に関するものに限らせていただきます。・お送りいただいたご質問には、できる限り迅速にお答えできるように努力いたしておりますが、回答させていただくまでに時間がかかる場合があります。また、回答期限のご希望にお応えできるとは限りません。あらかじめご了承くださいますよう、お願いいたします。

住所〒155-0032 東京都世田谷区代沢5-17-12 株式会社メディアライフ「BiNDの教科書」質問係 FAX 03-5433-5906

なお、ご質問の際に記入していただいた個人情報は、質問に返答させていただく目的以外には使用いたしません。また、質問の返答後は速やかに削除させていただきます。訂正・追加情報に関しては、以下のURLにてサポートいたします。http://bind4.md-life.net/

<本書の作例データ>以下のURLから、ダウンロードしてください。ダウンロードの仕方、ご利用方法なども、下記のサイトでご案内しております。http://bind4.md-life.net/book_support/bind4/download/

BiNDの教科書公式 BiND for WebLiFE* 4 逆引き式ガイド

バインド・フォー・ウェブライフ

バインド

bind4 textbook

Documents

memo step

point1 step

step 867a093

step 67a057

step 5a101

step 37a029

step 467a019

step 7567a023