Introduction
BiNDおよび本書でできること あなたに適したウェブ制作のスタイルを選ぶことができるBiND BiNDは、HTML5やCSS、jQueryなどの知識を
最新の技術や知識が求められますが、BiNDを
持っていなくても、それらを活用したウェブサ
使えばそれらがなくても最新トレンドを取り入
イトを構築できるパソコン用ソフトです。
れたウェブサイトを作ることができます。
ウェブの世界は大きな変化が頻繁に起こります。
一方で、従来からある、ポートフォリオを掲載
かつては 「HTMLを記述してアップすれば終わ
するなど、情報を蓄積するタイプのウェブページ、
り」 「集客は検索エンジンで上位になることが大
商品を多数掲載するショップサイトなどを作り
事」 という時代もありましたが、 「ブログはもち
たいという人も数多くいることでしょう。
ろん、ウェブサービスとの連携」 「ソーシャルを
そういった幅広いウェブ制作者のニーズに応え
活かした訪問者とのコミュニケーション」が必
るのがBiNDなのです。
須となってきました。そうしたウェブを作るには、
ウェブコンテンツのタイプと制作ツール
WordPress Movable Type など
カスタマイズできる
Flash
プレゼンテーション タイプ
アーカイブ タイプ
・キャンペーンサイト ・ブランディングサイト など
・ポートフォリオ など
ブログサービス
テンプレートで作る BiNDは、幅広いタイプに対応するウェブ制作ツールと言えます。
2
簡単に始められて、 かつ機能も豊富なBiND ウェブ制作者のニーズに応えるためのポイント
更新のしやすさは、新しくブロックエディタに
となるのが、 「機能の充実」 「高いデザイン性」 「更
「スマートモード」 を搭載。フォーム形式の入力
新のしやすさ」 といった点です。
欄を埋めていけばコンテンツが出来上がります。
まず 機 能 面については、BiNDは バージョン
さらに定番ブログツールとして知られるWord
アップごとに、画像編集ソフト 「SiGN Pro」 、
Pressとの連携を実現し、スマートフォンなどか
SNSなどウェブサービスとの連携を実現する
らも簡単に更新できるようになりました。
「SYNC」 といった新機能を搭載。2013年１月に
本書では、これらの機能の利用方法を詳細に解
発売されたバージョン6では、スマートフォン用
説。加えて、作業上の要点や注意すべきことを
のテンプレート搭載など、ますます機能が充実
掲載しています。これからBiNDを使い始める
しています。高いデザイン性は、従来バージョ
方は、Lesson 1から読み進めれば理解が早いと
ンから定評のあるところです。またBiND6では、 「CSS詳細設定」 機能を備えたので、ブロック単 位で細かな部分までデザインできます。
思います。すでにBiNDを使ったことのある方は、 Lesson 2以降の解説を読むことでさらにBiND を活用できるようになるはずです。
BiNDの主な特徴
機能の充実 ● 画像編集ソフトを搭載
▶ Lesson
5
▶ Lesson
6
▶ Lesson
8
● 多くのウェブサービスと
連携
● 純正サーバーサービスで
機能拡張
高いデザイン性 ● 140種類もの優れたデザ
インのテンプレートを搭載
●コンテンツを自在にカス
タマイズ ▶ Lesson 3 ● CSS詳細設定機能を ▶ Lesson 4 搭載
更新のしやすさ ● スマートモードを搭載
▶ Lesson
2
▶ Lesson
8
● WordPressとの連携
BiNDの主立った特徴をまとめると図のようになります。すぐにサイトを完成させることが可能なBiNDですが、 機能が非常に豊富で奥深いのも特徴の１つです。本書を読んで理解して、使いこなしましょう。
3
Intoroduction
1 2
3 4
Lesson
Lesson
Lesson
1 2
3
BiNDおよび本書でできること
P.2
BiNDを理解する
P.9
BiNDの基礎知識
P.10
ウェブページの構造とBiNDの仕組み
P.12
BiNDで実際にウェブサイトを作る
P.14
ユーザーインターフェース解説
P.28
テンプレートを使ってコンテンツを作成する
P.49
ブロックエディタを理解する
P.50
スマートブックを使って記事を追加する
P.52
ブロックを追加してアルバムページを作る
P.54
ページにグローバルメニューを追加する
P.56
スマートブロックで動画を組み込む
P.58
ブロックをテンプレートとして保存する
P.60
スマートブロックをカスタマイズする
P.62
自由にコンテンツを作成する
P.63
新規にページを作成する
P.64
レイアウトを変更してサイドバーを追加する
P.66
背景に画像を使ったページを作る
P.68
リンク付きの画像を配置する
P.70
CONTENTS
リンクやアンカーを設定する
P.72
表をページに配置する
P.74
Microsoft Officeで作成した書類を ウェブサイトに貼り付ける
P.76
トップページにスライドショーを表示する
P.78
ダウンロード用のリンクをページに埋め込む
P.80
アコーディオンメニューを作成する
P.82
タブでコンテンツを 切り替えるページを作成する
P.84
カスタムタグを使ってパンくずリストや 地図を組み込む
P.86
スマートフォン向けのサイトを作成する
P.88
ページの自動転送を設定する
P.90
サイトやページの名前を
4
Lesson
4
ウィンドウタイトルに表示する
P.92
こだわりのレイアウトに挑戦する
P.93
CSS詳細設定で 大見出しのデザインを変更する
P.94
本文の横幅を調整する
P.96
見出しの背景に画像を配置する
P.97
リンクのデザインに手を加える
P.98
テキストにシャドー効果を追加する
P.99
5
CSSについて 本文の行間や画像の隙間を調整する
P.101
ページやエリアの横幅設定を変更する
P.102
LiVEと連携させたBiNDサイトを作る
P.104
テキストのスタイルを設定する
5
Lesson
5
P.107
SIGN Proの仕組みを知る
P.108
画像に写真を追加して編集する
P.110
フォントを使ってタイトルロゴを作成する
P.112
6
6
P.115
シェイプを使ってバナーを作成する
P.116
スタンプを使って図形を配置する
P.120
レイヤーを重ねてさらに凝った画像を作る
P.122
エフェクトをマスターする
P.124
作成した画像を保存する
P.126
Webページの画像データについて
Lesson
P.106
SiGN Proで画像を編集する
SiGN Proで利用できるフォント
6
P.100
P.128
ソーシャルと連携するサイトを作る
P.129
SYNC概論 （SYNC）
P.130
CONTENTS
SNSと連動する 「いいね!」 ボタンを ウェブページに組み込む
P.132
Twitterのタイムラインと つぶやくボタンを組み込む
P.134
掲示板をウェブページに組み込む
P.138
ウェブページにブログを組み込む
P.140
ブログを更新する フォームをページに組み込む
P.144
YouTubeの動画を貼り付ける
P.146
YouTubeの再生リストを作る
7
Lesson
7
P.143
P.148
Yahoo!地図を埋め込む
P.149
RSSをウェブページに埋め込む
P.151
サイトの内容を検索可能にする
P.153
サイトを自動翻訳して表示する
P.154
サイトを管理する
P.155
検索エンジンに検知される情報を設定する
P.156
ウェブサイトのアクセス解析を設定する
P.158
ウェブページの公開・非公開を管理する
P.162
サーバーに自動でバックアップを作成する
P.164
サイトデータのバックアップを取る
P.166
複数のサーバーを切り替えて利用する
P.168
7
CONTENTS
コーナーを作成してサイトの構成を階層化する
P.170
サイトデータを Dropboxに保存する 素材を使ってサイトをデザインする
8
Lesson
8
索引
8
P.172 P.174
WebLiFE*サーバーで 拡張できるBiNDの機能
P.175
独自ドメインを使ったサーバーを用意する
P.176
サイトにパスワードをかける
P.178
携帯電話からの閲覧に対応する
P.180
オリジナルデザインの携帯サイトを公開する
P.182
QRコードを使って携帯サイトへ誘導する
P.184
サイトにショッピングカートを組み込む
P.186
受けた注文の内容を確認する
P.192
WordPressのテーマをBiNDで作成する
P.194
Facebookページを作成する
P.198 P.202
09 ブロックエディタ
スマートブロックで動画を組み込む ページに動画を貼り付けるのもスマートブロックなら簡単にできます。
ブロックエディタのブロック選択画面では、記
ここでは、YouTubeで公開されている動画を
事や写真だけでなく、動画などの素材を配置す
SYNCパーツを含んだブロックを使って簡単に
るレイアウトも選択できます。
ページへ配置する方法を説明します。
YouTubeの動画をページに組み込む
L e s s o n 2：テ ン プ レ ートを 使 って コ ン テ ン ツ を 作 成 す る
❶ URLをコピーする
ペ ー ジ に 掲 載 す るYouTube動 画 の ページを開いて、URLをコピーします。
❸ ブロックの種類を選択 ❷ ［MEDIA］ を クリック
❹ ［適用］ をクリック サイトエディタでブロックを追加。 P.52 ①∼②と同様にして、ブロックエディ タを起動。 ［ブロック選択］画面左側に ある ［スマートモード］ の ［MEDIA］ から ブロックの種類を選択して ［適用］ をク リックし、テンプレートの適用を確認す るダイアログが表示されたら 「OK」 をク リックします。
❺ パーツをクリック ❻ ［Syncを起動する...］ をクリック YouTubeのパーツをクリック。画面右 側の ［SYNCウィジェット設定］にある ［Syncを起動する...］ をクリックします。
58
❼ ［次へ］ ボタンをクリック
SYNCが起動したら、 ［次へ］ ボタンをクリック。
L e s s o n 2：テ ン プ レ ートを 使 って コ ン テ ン ツ を 作 成 す る
❽ URLをペースト ❾ ［次へ］ ボタンをクリック ［動画URLの入力］画面になったら、 ［動画 ページURL］ に①のURLをペースト。 ［次へ］ ボタンをクリックして動画を確認したら、 さらに ［次へ］ ボタンをクリックします。
プレイヤーのデザインを選択 ［次へ］ ボタンをクリック ページに埋め込むプレイヤーのデザインを選択して ［次へ］ ボタンをクリック。オプションの設定を行っ てから、 ［設定の確認］ 画面で ［適用］ をクリック。最 後にブロックエディタで ［適用］ をクリックします。
動画を確認 サイトエディタ画面右下の ［PCブラウザ］をクリック。 設定した動画がページに組 み込まれたのを確認します。
59
27 CSS詳細設定
CSS詳細設定で大見出しのデザイン 文字の色やサイズを変更しながら 「CSS詳細設定」 の作業の流れを追います。
BiNDでは、シンプルなインターフェースで文
細かく指定する言語の１つで、ウェブデザイン
字の色やサイズ、行揃えなどの調整が可能です。
の司令塔とでもいうべき役割を担います。ここ
さらに新しいBiND６では 「CSS詳細設定」 機能
では 「CSS詳細設定」の操作の流れを見ていき
を取り入れ、より詳細にこだわったデザインが
ます。なお、利用には基本的なCSSの知識が必
できるようになりました。CSSは、スタイルを
要になります。
大見出しの色とサイズを変更して飾り罫を追加する
L e s s o n 4：こ だ わ り の レ イ ア ウト に 挑 戦 す る
❶ ブロックエディタで ［設定］ タブを選択
❷ CSS詳細設定の ［共有CSS］ メニューで ［別名で保存］ をクリック CSSを適用させたいブロックをブロック エディタで開き、 ［設定］ タブをクリックし ます。画面右側が ［CSS詳細設定］のセク ションになります。
❸ CSS名を入力する ❹ ［OK］ をクリック
CSSファイルは、必ずしも複製を作る必 要はありませんが、オリジナルをそのまま 残しておくことで、いつでも元の状態に戻 すことができます。
❺ ［＋］ ボタンをクリックし ［大見出し］ を選択 はじめにスタイルを適用させる要素を選 びます。ここでは ［大見出し］ を選択します。 これから設定するスタイルは、 ［大見出し］ タグ内のみに反映されます。
94
を変更する ❻ ［＋］ をクリック ❼ メニューから ［color］ を選択
⑤で追加した 「大見出し」の下に 表示される ［＋］ボタンをクリッ クし、メニューから文字色を指定 する属性 「color」 を選択します。
L e s s o n 4：こ だ わ り の レ イ ア ウト に 挑 戦 す る
⑦で選択した属性が画面に追加されます。ここで はカラーパレットから色を選択しましたが、図の 中で ［#f00］ と表示されている部分に任意のカラー コードを入力することも可能です。 ❽ ［カラー］ アイコンをクリック ❾ 適用したい色を 選択
変更前の大見出し
［OK］ をクリック
［CSS詳細設定］ で設定変更後の大見出し 設定が済んだら ［適用］ をクリック
⑥∼⑩の手順で、必要な分の設定を繰り返し ます。ここでは文字色のほかに、文字サイズ （font-size） 、飾り罫 （border） 、罫とテキストの 間隔 （padding） を指定しました。 テンプレートのスタイルに戻したいときは、 ①のメニューで初期設定となっていたCSS ファイルを選択して ［適用］ します。
95
37 SiGN for WebLiFE*
フォントを使ってタイトルロゴを作成する SiGN Proを使えば簡単にロゴ画像を作れます。
ウェブサイトで表示されるテキストは、多くの
て貼り込むことで、どんな環境でも同じように
場合閲覧するパソコンの環境に依存します。サ
見せることができます。SiGN Proに付属する
イトのロゴや見出しなどに特定のフォントや少
55種類のフォントを使ってロゴを作りましょう。
し凝ったフォントを使いたいときは、画像とし
ロゴを挿入するブロックからSiGN Proを起動する
L e s s o n 5：S i G N P r o で 画 像 を 編 集 す る
❶ ブロックをダブルクリック
ロゴを配置する ［ヘッダ］の ブロックをダブルクリック して開きます。 Attention
!
❷ ［SiGN Pro］ をクリックして起動 ［スマートモード］対応のテンプ レートの場合、ブロックエディタ に ［パーツ一覧］ が表示されません。 その場合は、既存の画像データの アイコンをダブルクリックするか、 ［SiGNを起動する］ をクリックし てSiGN Proを起動します。
SiGN Proの メイン画面左 上部の ［テンプ レートへ戻る］をクリ ックすると、テンプレ ートの一覧が表示され ます。テンプレートを 使用してロゴを作成す ることも可能です。
POINT!
112
不要なテンプレートの画像デー タなどが入っている場合は選択 して ［delete］ キーで削除します。
❸ ［幅×高さ］ を入力して 画像サイズを設定 画像サイズはあとから変更も 可能です。ブロックに収まるサ イズを設定しましょう。
NEXT PAGE
テキストレイヤーを編集する
❶ ［テキスト］ レイヤーアイコンをクリック
［新規レイヤー］ からテキストレイヤーを作 成するとレイヤー編集画面に切り替わりま す。切り替わらない場合は、レイヤータブ の鉛筆マークの部分をクリックします。
L e s s o n 5：S i G N P r o で 画 像 を 編 集 す る
❷ フォントを選択する ❸ レイヤー内にテキストを入力 SiGN Proの付属フォントのほかに、パソ コン内のフォントも選択可能です。また、 SiGN Proは縦書きテキストにも対応して います。
❹ ［大きさ］ でフォントサイズを指定 ❺ レイヤーのタブ部分をドラッグして 任意の場所に配置する
画面左上の ［完了］ ボタンを押してメ イン画面で ［プレビュー］ をクリック すると仕上がりを確認できます。
113
37 SiGN for WebLiFE*
フォントを使ってタイトルロゴを作成する
テキストに装飾を加える ❶ ［色］ ボタンをクリックし、 任意の色を選択する
L e s s o n 5：S i G N P r o で 画 像 を 編 集 す る
❷ ［エフェクト］ をクリック
POINT!
ウェブページの背景に色や画像を 指定している場合は、ロゴ画像の 背景が透明になるように設定し て保存します。ツールバーで ［透 明度］を 「０」に、ファイル形式は ［PNG］ に設定しましょう。
❸ テキストに施すエフェクトを選択し、 詳 細を設定する ❹ ［OK］ をクリック はじめに左のカラムでエフェクトの種類 を選択します。次に、スライダーを使って 調整を行います。
❺ メイン画面で ［完了］ をクリック ❻ タイトルロゴが配置された
編集画面からメイン画面に戻るには、画像領域外を クリックするか画面左上の ［完了］ ボタンをクリック します。メイン画面で ［完了］ をクリックしてから、ブ ロックエディタで ［適用］ をクリックします。
114
43
L e s s o n 6：ソ ー シャ ル と 連 携 す る サ イトを 作 る
SYNC for WebLiFE*
SYNCを理解する さまざまなウェブサービスと連携するSYNCの使い方を理解しましょう。
かつてはウェブページに掲示板やフォームなど
通常、ソーシャルやウェブサービスを自分の
を組み込むには、サーバー上で動作するCGIと
ウェブページに取り入れるには、タグを用意
呼ばれるプログラムを用意する必要がありました。
してページに書き込む必要があります。しかし、
しかし、現在は自らのサーバーでなく外部のウ
SYNCなら画面の指示に従って入力していけば
ェブサービスと連携することで、同様の機能を
作業が完了するので特別な知識は必要ありませ
利用することが可能となりました。
ん。
そうしたウェブサービスと連携する 「ソーシャ
SYNCの機能自体、サーバーで提供されていま
ル系パーツ」や 「ウェブサービス系パーツ」 を追
す （最初にSYNCを利用するための登録が必要
加する仕組みがSYNCです。
になります） 。
SYNCパーツ一覧 いいね！ ボタン Twitter、Facebook、mixi、 Google+な ど の サ ー ビ ス に投稿するボタンをページ に設置します。
130
Twitterバッチ ページの左／右端に付ける 「Follow Me」 バッチを組み 込みます。バッチの色を自 由に選べます。
掲示板 Facebookか、DISQUSの サービスを利用して掲示板 をページに配置します。
Facebookページを紹介す る 「Like Box」を 作 成 し て ページ内に組み込むことが できます。
Twitterのタイムラインを ページに貼り付けることが できます。パーツの色を選 択することが可能。
USTREAM
Yahoo！地図
BiNDニュース
ブログ
Yahoo!が提供する地図を ページ内に組み込むこと ができます。
RSSを取り込んでニューステ ィッカーを配置したり、RSS の購読やソーシャルブックマ ークへの登録をするボタンを 組み込むことができます。
主なブログサービスで公開 されているブログをBiND で作ったページに貼り付け ます。
Google Docs
YouTube
フォーム
Googleが提供している、 文書、 スプレッドシート、プレゼン テーションを制作するオン ラインサービスと連携。書類 をページに表示できます。
YouTubeにアップロード した動画をページ内に配置 するパーツです。
問い合わせやアンケートなど のフォームを貼り付けること ができます。送られたデータ はGoogleドライブのスプレ ッドシートに保存されます。
サイト内検索
翻訳
Googleか、Yahoo!の サ イ ト内検索ボックスをページ に組み込みます。
Google翻訳パーツをペー ジに組み込んで、ページを 世界各国の言語に翻訳でき るようにします。
ライブストリーミング放送 「USTREAM」の 動 画 画 面 を組み込むことができま す。
SYNCの基本的な使い方 ブロック選択画面の 「MEDIA」 や 「SOCIAL」 のカテゴリーの一部に はあらかじめSYNCパーツが 組み込まれているブロックが あります。それらを選択して 作業を始めることも可能です （P58参照） 。
POINT!
❶ パーツを選んでクリック
L e s s o n 6：ソ ー シャ ル と 連 携 す る サ イトを 作 る
新しいブロックをブロックエディタで開いて ［ブロック選択画面］ で右下の ［閉じる］ をクリ ック。 「ソーシャル系パーツ」 か、 「ウェブサービ ス系パーツ」 の中のパーツをクリックします。
❷ 設定を入力
Attention
!
［適用］を押さずにブ ロックエディタを閉 じると、行った設定が反映 されず、やり直しになるの で注意しましょう。
❸ ［次へ］ をクリック
SYNCが起動したら画面の項目に従って設定 をします。設定画面は、３∼７画面ほどありま すので、各画面に入力し終わったら ［次へ］ をク リック。最後まで設定画面を進めたら ［適用］ ボ タンをクリックします （画面はUSTREAMパー ツのものです） 。 ❺ ブラウザで動作を確認
❹ ［適用］ をクリック
ブロックエディタに戻って ［適用］ をクリックします。
サイトエディタの ［PCブラウザ］ をクリックして確認。 SYNCパーツの一部は、実際に公開されたウェブペー ジのURLを確認して動作するものがあるので、その場 合はアップロードしてから確認しましょう。
131
69 WebLiFE*Server
WordPressのテーマをBiNDで作成 ウェブサイトのデザインはBiND、 更新はWordPressといった連携が可能です。
BiND6の 新 機 能 「BiND for WordPress」を 使
す。WordPressのデザインを決めるのは 「テー
えば、WordPressとの連携が簡単にできます。
マ」というテンプレート。このテンプレートを
WordPressとは、コンテンツ管理システムの一
BiNDで作成してWordPressの運用しているサ
種。ブログを運用するためなどに使われる、オ
ーバーへアップロードして、テーマとして組み
ープンソースのソフトです。個人から大企業ま
込むのです。ここでは、WebLiFE*サーバーを
で、幅広く世界中のウェブで採用されていま
使った設定方法を説明します。
L e s s o n 8：W E B L i F E * サ ー バ ー で 拡 張 で き る B i N D の 機 能
WordPress用のテンプレートを使ってデザインする WordPress用テンプレー トの中にある 「WordPress システムブロック」 はBiND では編集できません。ブラウザから WordPressで更新します。
POINT!
❶ ［WordPress］ カテゴリーで テンプレートを選択
サイトシアターの ［新規サイトを作る］ ❷サイトをデザイン で ［WordPress］ カテゴリーからテンプ レートを選択。サイトを作成し、編集お よびデザインします。 ❸ ［サーバー設定］ を開く
❹ ［サーバー設定アシスタン トを使う］ をクリック
サイトエディタで ［設定］ をクリッ クして ［サイト設定］ の ［サーバー設 定］を開き、 ［サーバー設定アシス タントを使う］ をクリックします。
「BiND for WordPress」 は、 正式サポート外での対応で すが、WebLiFE*サーバー 以外のWordPressがインストー ルできる一般のサーバーサービス でも利用できます。
POINT!
WebLiFE*サーバーに ログインし、 ［ブログの インストール］をクリ ックします。
194
❺ ［ブログのインストール］ をクリック
する
❻ ブログの名称を入力 ❼ ［準備開始］ をクリック
WebLiFE*サ ー バ ー で 表示されるWordPress ブログの名称を入力。 次に ［準備開始］をクリ ックします。
WebLiFE*サー バーには3つま でWordPress をインストール可能で す。複数のWordPress ブログを利用している 場合は、メニューから選 択してから ［設定反映］ を押します。
POINT!
［WordPress設定］画面 が開いたら、画面左上 の ［トップページへ戻 る］ をクリックします。 ［設定反映］ をクリック❾
［OK］ をクリック
アップロードを実行 トップページが表示されたら ［設定反映］ をクリック。
サイトエディタの ［サーバー設定］ に設定が反映され たら ［OK］をクリック。アップロードを実行すれば、 BiNDの作業は完了です。
195
L e s s o n 8：W E B L i F E * サ ー バ ー で 拡 張 で き る B i N D の 機 能
❽ ［トップページへ戻る］ を クリック
69 WebLiFE*Server
WordPressのテーマをBiNDで作成する
WordPressをサーバーに設定してブログを公開する ❷ ［ダッシュボードを開く］ をクリック
L e s s o n 8：W E B L i F E * サ ー バ ー で 拡 張 で き る B i N D の 機 能
❶ ［インストール済み WordPressサイト］ を選択 （複数ある場合）
❸ サイト名、 ユーザー名、 パスワ ード、 メールアドレスを入力
❹ ［WordPressをインストール］ をクリック
WebLiFE*サーバーにログ インして、 ［WordPress設定］ 画面を開きます。 ［インスト ール済みWordPressサイト］ が複数ある場合は選択して から ［ダッシュボードを開 く］ をクリックします。
WordPressを組み込んだサ イトへ移動したら、初期設定 画面でサイト名、ユーザー名 （初期設定ではadmin） 、パス ワード、メールアドレスを入 力。 ［WordPressをインスト ール］ をクリックします。 ❻ユーザー名とパスワードを入力
❺ ［ログイン］ をクリックします。 インストールが完了したら ［ログイン］ をクリックします。
196
［ログイン］ をクリック❼ ③で設定したユーザー名とパスワードを入力し、 ［ロ グイン］ をクリックします。
初期状態で 「Hello world!」 というタイトルの投稿がさ れていますが、不要なので 削除しても構いません。
POINT!
❽ ［適用］ をクリック
❾ ［新しい記事を書く］ をクリック
L e s s o n 8：W E B L i F E * サ ー バ ー で 拡 張 で き る B i N D の 機 能
［ダッシュボード］画面が表示されたら、 ［適 用］ をクリックしてBiNDでアップロードした テーマを適用します。次に ［新しい記事を書 く］ をクリックします。
記事のタイトルやテキスト、 画像などを編集 ［公開］ をクリック
BiNDによるデザイン
［新規投稿を追加］ 画面が表示されたら、投稿記事のタ イトルやテキスト、画像などを入力。すぐに公開する のであれば画面右側の ［公開］ をクリックします。公開 されたものを確認するには、画面左上のサイト名部分 をクリックします。 WordPressの投稿
BiNDで作ったデザインと、WordPressで投稿した記 事が組み合わさったサイトの完成です。
197