必ずお読みください
このBiND3 Tipsは、BiNDサイトを作成するにあたって、もっとサイトをよくすることができるヒントを用意しています。
BiNDが持っていない機能でも、ここに記載されている方法で実現することが出来る場合があります。
ご活用下さい。
※ここに記載している内容は、BiNDの機能に含んでいないものもあるため、サポート対象外とさせていただいております。
ブロックエディタ関連
画像
クリックで画像が拡大するページを作る
- 写真のサムネールが並んでおり、サムネールの上をクリックすると写真が拡大するアルバムページを作るには、「ブロックレイアウト」の「アルバム」を使います。[画像パーツ]から出力サイズで画像設定の拡大をするこ……
画像の横に文字が回り込まないようにする
- 写真と文字を同じブロックに配置すると、写真の横に文字が回り込んでしまうことがあります。 回り込みを解除するには、ブロックエディタでその箇所に「回込解除」マークを配置します。 下図のように、回り込みが解……
取り込んだ画像の画質が荒れているのを直す
- 画像パーツとして貼り込む写真を調整しているうちに、写真が変形してしまったり荒れてしまうことがあります。調整のしかたを確認しましょう。 ■画像パーツ設定を確認する 似たような写真ですが、右の写真は荒れて……
リンク
文字や画像をクリックするとメールが送信できるようにする
- クリックするとメールソフトが起動する設定は、BiNDでも簡単にできます。リンクパーツを使って、メールリンクの設定をしましょう。 ■リンクパーツを設定する クリックするとメールソフトが起動する設定は、リ……
リンク先のページを新しい別のウィンドウで開く
- リンク先を別のウィンドウで開くには、ターゲットリンクの設定をする必要があります。追加のルールはHTMLと同じです。 ターゲットリンクの設定は、ブロックエディタを開き、[パーツ一覧]から「リンクパーツ」……
リンク先のページを開くとき、サイズを指定して別のウィンドウで開く
- ボタンなどをクリックして開くウィンドウをポップアップウィンドウにしたり、そのウィンドウサイズをピクセル単位で固定するには、ブロックエディタの「リンクパーツ設定」や「画像パーツ設定」の「クリック設定」を……
PDFやExcelなどのファイルを、サイトからダウンロードする設定
- 各自で用意したPDFファイル、文書ファイル、圧縮ファイルをBiNDサイトからダウンロードさせたいときは、ユーザーデータ用に準備されたフォルダにデータをコピーし、その場所へのリンクを作成します。 BiN……
サイトに独自のデータを追加したとき、自動削除されないようにする
- BiNDで作成していないページをサイトに表示させたり、オリジナルで作成したFlashムービーを取り込みたい場合は、これらのオリジナルデータをサイトフォルダのなかにある「_userdata」フォルダに移……
ブロックテンプレート
新しいブロックテンプレートを適用する前に現在のデータを保存する
- 現在編集しているブロックを変更したい場合、元のブロックを削除してしまう（データを消してしまう）懸念がありますので、現在編集しているブロックを複製してから作業を行います。 ■ブロックを複製するサイトエデ……
カスタムタグ
Googleマップを挿入する
- BiNDでは、カスタムタグパーツを使うことで、簡単にGoogleマップの地図を貼ることができます。1）Googleマップにアクセスします。http://maps.google.co.jp/ 2）アクセ……
取り込むGoogleマップのサイズを調整する
- Googleマップの貼り方をGoogleマップを挿入するで紹介しています。貼り付けるマップサイズを変更するには、Googleマップで地図のURLをコピーする前に、「貼り込み地図のカスタマイズとプレビュ……
Googleマップ以外の地図サービスを利用する
- カスタムタグを使い、Googleマップ以外の地図を利用する。 「Yahoo!地図」、「いつもNAVI」、「次世代地図サービス ALPSLAB base」などは、Googleマップのようにページへの地図……
アンカー設定をする
- リンク先ページや、同じページの途中の箇所へジャンプするリンク作成には、「アンカーリンク」を使用します。アンカーリンクの機能は、BiNDではリンクパーツとカスタムタグを使って作成する必要があります。 ■……
違うページの指定箇所へアンカー設定をする
- 違うページの指定箇所へのリンク作成には、アンカーリンクを使います。アンカーの作成についてはTips『アンカーを設定する』で紹介しています。このページでは、違うページの指定箇所へアンカー設定をする方法を……
コーナー内のページへアンカー設定をする
- アンカーリンクを使用するときはリンク先のファイルをHTMLの「相対リンク」のルールに従って入力する必要があります。コーナーにあるページへリンクするときは、ディレクトリの指定がないと、リンクエラーになっ……
指定の画像へ飛ぶリンク設定をする
- ページ内にある画像パーツへジャンプするリンクは、カスタムタグパーツで画像の前にアンカーを作成します。 【要確認】アンカーの基本設定はTips「アンカー設定をする」をご確認ください。このページでご案内す……
パンくずリスト（サイト構成がわかるリンクを作る）
- 「パンくずリスト」は、該当ページまで辿った足跡機能のように、リンクをリスト表示する機能です。たくさんのページがあるサイトほど、このパンくずリストがあると、ページの位置がわかりやすく、他コーナーやページ……
BiNDの機能を使ってパンくずリストを作る
- パンくずリストは、通常手動でリンクを使って作成しますが、BiNDサイトの場合は、BiNDだけで使える特殊な「BiNDタグ」を使用することで、簡単に作成できます。 ■BiNDタグとは？BiNDタグとは、……
ページ内に小窓やスクロールバーのある設定をする
- ページ内にスクロールを作成し、別のコンテンツを表示するようなパーツは、iframe（インラインフレーム）を使いましょう。 インラインフレームは、カスタムタグパーツでソースを追加することで、BiNDで利……
簡単な表（テーブル）を作る
- 表（テーブル）を作る場合、ブロックエディタから「リスト」を利用します。 「リスト」は、数種類ありデザインが異なります。複雑な表組みの場合は、個別にtableタグを使う場合は、カスタムタグパーツで貼り付……
段組のレイアウトを作る
- ホームページのレイアウトは、［ページ設定」の「ページレイアウト」で変更できます。またさらに細かい段組は、ブロックエディタの「ブロックレイアウト」を使って作成できます。 ■ページレイアウトの設定 ページ……
アクセスカウンターを設置する
- アクセスカウンターは、ホームページを閲覧した方をカウントするサービスです。これを追加する場合は、アクセスカウンターサービスか、JavaScriptを使用します。 ■アクセスカウンターのサービス アクセ……
ページ内で音楽を流す
- ホームページを開いている最中にBGMを利用したい場合、カスタムタグやBGMの編集可能なID for WebLiFE*のカートリッジで設定を行います。BiNDでは音楽を流す機能はもたせていませんが、下記……
プルダウンメニューを作る
- カスタムタグパーツを使ってHTMLソースを入力することで、プルダウンメニューを作成できます。（BiNDのスタイルには用意されていません） ■selectタグの入力 プルダウンメニューはselect要素……
掲示板を設置する
- 掲示板（BBS）は、CGIを使用した機能です。「ゲストブック」のように挨拶を書き込んでもらったり、あるテーマについてユーザ同士が語り合えるようにするコミュニケーションツールです。 掲示板サービスは専用……
メニュー
メインメニューやサブメニューのデザインを変更したい
- メニューは、テキストベースで設計されており、内容の変更がしやすいようになっています。テキストベースでもデザインバリエーションが豊かで、変更しやすくなっています。 ■メニューバーのデザインを「ブロックエ……
ブロックスキン
ブロックスキンを変更したらメニューの文字が見えなくなった場合の修正
- デザインを変更しているうちに文字が見えな（読めな）くなる場合があります。BiNDのスキンは、選択によってカラー、形状、サイズなどを同時に変更します。そのため、文字色が変わってしまうこともあります。 ブ……
ブロック単位/ページ単位でデザインを変更する
- ブロック単位でデザインを変更するには、［ブロックスキン］を設定します。ページ単位でのデザイン変更には、［ページ設定］の［ページデザイン］、［テーマ］を設定します。 レイアウトは、［ブロックレイアウト］……
ブロックやページデザインの変更/設定が可能な箇所を確認したい
- BiNDには、さまざまなデザイン変更方法があります。ここで設定できる内容を一覧で紹介します。 ■テーマサイトエディタの［テーマ］ボタンから設定できます。同じディレクトリ（コーナー）にあるすべてのページ……
ブロックごとに形が崩れるのを修正したい
- デザインを変更したところ、ブロックごとに左右天地にデコボコができる場合があります。多くの場合、この問題は、「余白」の設定を変えることで解決します。 ここでは、例としてビルボードが右にずれて見えるものが……
設定したブロックスキンやページデザインを保存する
- ブロックスキンやページデザインのカスタマイズ内容は多岐に渡ります。これらの設定は、「セット」や「テーマ」で保存し、別の箇所へ当てはめることができます。 ■ブロックスキンの設定を保存する ブロックエディ……
SiGN for WebLiFE 2
見出しパーツ（画像）の背景を透明にする、透過させる
- SiGN2では、画像の保存形式をPNGに指定することで、背景が透明な画像（見出しパーツ）を作成することができます。 1）SiGNの［ファイル形式］を「PNG」に指定します。 2）［背景色と透明度］でス……
見出しパーツに縦書きの文字を入れる
- SiGNで入力できる文字は、横書きのみになります。そこで、縦書きの文字を入れるには、改行を使って疑似縦書きにしてみましょう。 ただし、残念ながら長音記号やかっこなどの記号は、正しく表示できない場合があ……
見出しパーツで角が丸い画像を作る
- 画像の縁が丸くなっているだけで、ページのイメージが大きく変わります。SiGNでは、「バリエーション」を使うと角丸の画像を簡単に作ることができます。 SiGNでバリエーションで［NEXT］をクリックして……
ブロックレイアウト
ブロックレイアウトの種類とその内容
- ブロックエディタの［設定］から行えるブロックレイアウト設定では、さまざまな形状のレイアウトが作成できます。一部はAjaxの動的なレイアウトも含まれます。ここではバリエーションを紹介します。 ブロックレ……
1つのブロックを複数の段や列に分割したレイアウトにする
- ■ブロック内で分割する ［ブロックレイアウト］で、1つのブロックを複数段に分割できます。「目次」「アルバム」でも似たような分割が実現できますが、ここでは「プレーン」を分割する方法を紹介します。 1）あ……
ブロックの高さを指定する
- ブロックの高さは、通常は、その内容によって変化します。たくさんの内容があれば高さが増え、空ならば、ブロックが存在しても画面に表示されません。 ウェブサイトはこのルールに従ってデザインするのが一般的です……
SYNC for WebLiFE 2
ブログ設定時、カレンダーやコメント一覧も設定する
- BiND3では、［ブログ］ボタンからブログの一部をBiNDサイトに取り込んで表示させることができます。 その際、メインのエントリ（記事）の挿入以外の機能ついて説明します。 ここでは2010年1月初旬現……
申し込みフォームやメール送信ページを作る
- BiND3のウェブサービス系パーツの「フォーム」を使うと、申し込みフォームや、メール送信フォームのページを作成できます。BiND3では、フォームの入力項目を自由に設定できます。 ■フォームの作成 一般……
フォームの内容を変更する
- BiNDのフォームは、あらかじめ用意されているデザインを選択したあと、［項目を追加］を使用してカスタマイズできます。 ■フォームへの項目追加 Syncでフォームデザインを選択したあと、［項目一覧］の画……
アップロード
全般
FTPソフトを使用しサイトデータをダウンロードする【Macintosh】
- ハードディスクのデータを完全に失ってしまった場合などに、FTPクライアントソフトを使い、Web サーバーにアクセスしてデータをダウンロードする方法を紹介します。 【STEP1】 ■FTPクライアントを……
FTPソフトを使用しサイトデータをダウンロードする【Windows】
- ハードディスクのデータを完全に失ってしまった場合などに、FTPクライアントソフトを使い、Web サーバーにアクセスしてデータをダウンロードする方法を紹介します。【STEP1】■FTPソフトを入手する ……
FTPソフトを使用しサイトデータをアップロードする【Macintosh】
- BiNDのアップロード機能を使わずに、FTPクライアントソフトを使い、データをアップロードする方法を紹介します。 ■アップロードするデータ BiNDサイトは、ユーザのホーム→「書類」フォルダ……
FTPソフトを使用しサイトデータをアップロードする【Windows】
- Windowsでは、FFFTPソフトを使ってサーバーへアクセスし、データをアップロードすることができます。 ■アップロードするデータ BiNDサイトは、「マイドキュメント」（または「ドキュメント」）フ……
契約したサーバーに複数のサイトをアップロードする
- 1つのウェブサーバーに2つ以上のサイトを作りたい場合は、サイトへのアップロード先を考慮します。 Webサーバのアドレスは、PCのファイル管理と似ています。ウェブサーバ上にもPCと同じようにディレクトリ……
サーバーからサイトデータをダウンロード・復元する
- マシンのトラブルなどにより、ローカルに保存していたBiNDサイトのデータが消えてしまったとき、サーバデータをダウンロードしてくることで、サイトを復元することができます。 ■サーバデータをダウンロードす……
その他
サイトエディタ関連
各コーナーごとのURLを短くする
- コーナーの名前は、URLに関わります。どこでURLが変えられるか、確認しておきましょう。また、各コーナーのトップに表示させるページは、「index.html」にすることでファイル名部分を省略し、URL……
コーナー内のトップページのファイル名の設定
- コーナーを作成するときは、コーナーのトップに表示したいページには、ファイル名を「index.html」に指定します。 ファイル名を変更するには、［ページ設定］の「ファイル名」で名前を変更できます。 1……
ページの作業の進捗をラベルで表示する
- サイト内のページ数が増えてくると、作業中のファイルや担当者の分類などをメモしておきたいことがあります。その場合、サイトマップにあるラベル機能を使うと便利です。 1）サイトマップで一番右の欄をクリックす……
ページの背景に複数の画像を組み合わせて設定する
- BiNDでは、ページ背景が二重に設定できるため、写真と柄、柄と柄など2つの画像を組み合わせた背景設定ができます。 ページの背景画像の設定は、［ページ設定］の［ページデザイン］で行います。ここでは、利用……
ページの背景の上にさらに画像を設定する
- 背景に画像を配置する場合、［ページ設定］の［ページデザイン］だけでなく、［ブロックスキン］［背景画像］も利用できます。 BiND3サイトシアター上に表示されている「新規サイト」の中に収録されているLo……
検索ロボット巡回設定
検索エンジン対策用設定をする
- 検索エンジンで上位に表示されると、ホームページの宣伝に有効であると言われています。検索エンジンにヒットするサイトにするには、まず、検索エンジンの巡回プログラムに情報を収集してもらう必要があります。その……
検索エンジン対策に有効なサイト構成
- 検索エンジンでは、自動ブログラムがサイトを巡回し、収集したページ内容を分析しています。検索エンジンにとって理解しやすく、有用と判断されたサイトは上位に表示される可能性が高い為、SEO（サーチエンジン・……
検索エンジン対策のキーワードに設定する内容
- ［ページ設定］や［コーナー設定］の［検索ロボット巡回設定］の［キーワード］（HTMLソースでは<head>要素のなか）には、GoogleやYahoo!といった検索エンジンで検索されるであろ……
その他
複数のPCで同じサイトを編集する
- BiNDは基本的に１台のPCでデータを管理するように設計されていますが、複数人で１つのサイトを制作したい場合いくつかのアイデアがあります。 ■2台のマシンでBiNDを使うBiNDは、2台のPCでの使用……
サイトデータを異なるOSのPCに移行する
- BiNDのWindows版で作成されるデータとMacintosh版で作成されるデータは共通です。どちらかのOSで作成したサイトを、他のOSのBiNDで再編集することもできます。 BiNDサイトは、Wi……
作成するサイトの容量の制限や注意事項
- BiNDで作る1サイトの推奨サイズなどを紹介します。 BiNDサイトは、1サイトあたり、50MB以下が推奨サイズです。これ以上の容量になるサイトはBiNDの動作が遅くなることがあるので、サイトを分割し……
複数のサイトデータを統合できるか
- あるBiNDサイトを別のBiNDサイトへ移動したい際、BiNDでは複数サイトを統合したりサイト間を移動する専用の機能はありませんが、次のような方法もお試し下さい。 ■ブロックテンプレート 別サイトへ移……
1つのサイトを複数のサイトに分割する
- 1つのサイトを2つ以上のサイトに分けるには、あらかじめサイトを分割したい数だけサイトを複製し、不要なコーナーなサイトを削除します。 1）分割したいサイトを複製します。複製するには、サイトシアターで［複……
エリアとエリアの間の隙間をなくす
- エリア同士の間隔をなくすには、それぞれ「余白なし」の設定をオンにします。さらに、「背景スキン」が選択されていると、その分、エリア間の間隔が広がるので、これらもオフにします。 ■設定による差 エリアに対……
メインエリアの両側(片側)にブロックを配置する
- メインエリアは、［ページレイアウト］の設定で、2分割、3分割が可能です。また、サイドの幅指定は、［エリアの横幅］で指定できます。 サイトエディタで［ページ設定］を開き、［ページレイアウト］を開きます。……
メインエリアとサイドエリアの横幅を変更する
- メインエリアとサイドエリアの幅は、［エリアの横幅］で指定できます。 エリアの横幅の設定は、［ページ設定］の［ページレイアウト］で行います。設定はピクセル単位、もしくは「％」で行えます。「メイン」の幅は……
引っ越した新しいページへ自動ジャンプさせる
- サイト内で別のURLへ移動したり、Webサーバーを引っ越した場合に、新しいページへ自動ジャンプすると便利です。この設定は、［ページ設定］の「リフレッシュ」に用意されています。 1）引っ越し前の場所に表……
サイトにIDやパスワードなどの認証設定をする
- サイトの特定のページへアクセスするとき、IDとパスワードで閲覧者にアクセス制限がかけられるページがあります。これらの機能は、使用するサーバ側に機能が存在しないと認証ページを作成出来ません。その為、基本……
ブラウザ、OSによるデザインの表示の違い
- HTMLは幅広い環境で閲覧できるすぐれた発明と言えますが、一方で、見る環境によって見栄えが異なります。どのような点が違うでしょうか。 ■フォント フォントは、指定したものがOSにインストー……
Internet Explorer 6でもサイトをきちんと表示させたい
- Internet Explorer 6のシェアは、2009年12月現在20％程度とされています。Windows XP発売当時に搭載されていたバージョンで、今後はより減少傾向にあります。 ……
ブラウザの過去の表示記録・履歴を消す
- サイトデータをアップロードして更新したにもかかわらず、ホームページの内容が新しくならない場合があります。その場合は、ブラウザで以下の確認をしてみましょう。 1）リロード（再読み込み）ボタンを押して新し……
ページデザインをチェックする
- 作成されたページにミスがないかを確認するには、実際にさまざまな環境で見て確認することが一番です。以下に、ポイントを挙げてみます。 ■WindowsとMacの両方でチェックする Windowsは図書館や……
CSS改造キット
【2009年 平野ブログより1】BiND3のCSS改造キット、開発中！
- 2009年09月17日 [ BiND CSS ]みなさんこんにちは、デジタルステージ平野です。さて、BiND3でのCSSカスタマイズについての最新情報をお届けします。今、BiND3の新機能「テーマ機能……
【2009年 平野ブログより2】BiND3・テーマ改造キットをダウンロードする
- 2009年09月27日 [ BiND CSS ]BiND3・テーマ改造キットをダウンロードする [SimpleTheme1] テーマ改造キットのダウンロードはこちらから （※2009/12/10 Wi……
【2009年 平野ブログより3】[動画あり]CSS改造キットの使い方ビデオ
- 2009年12月17日 [ BiND for WebLiFE* ] BiNDユーザーのみなさん、こんにちは。デジタルステージ平野です。 さて、今日のエントリーでは、先日リリースされたBiND3用……
BiND サーバー
Premiumコース活用
Premiumコースの機能の活用～ QRコードやクーポン機能を活用する
- Premiumコースには、独自ドメインやかんたんパスワード設定など、様々な機能が用意されています。意外と知られていない機能が「Mobileキャンペーン設定」と「QRコード作成」機能。 「……
画像
クリックで画像が拡大するページを作る