刷新したテンプレートを使って、BiNDupの基本操作をマスターしよう

ホームページ制作サービス「BiNDup」が選ばれる理由の1つは、すぐに使える豊富なテンプレートです。そのテンプレートの機能が刷新されたタイミングで、BiNDupの基本中の基本、WEBサイトを作る手順をおさらいしたいと思います。
え、そこから?! と、思った人もいるかもしれませんが、改めて振り返ってみると、テンプレート選びやブロック単位での編集など、BiNDupらしさが見えてきます。

作りたいイメージに合ったテンプレートを選ぼう

BiNDupで新規Webサイトを作成するには、次の3つの方法があります。

  1. 目的に合わせて自動作成(おまかせモード)
  2. テンプレートから作成
  3. ブランクテンプレートを使って自由に作成(上級者向け)

ここでは、上記の3つの中から、もっともスタンダードな「テンプレートから作成」する手順を新しくなったテンプレート構成と共に紹介します。

新しくなったテンプレートを選ぶステップ

最新のアップデート機能の1つがテンプレートの刷新です。新しく加わった6つのデザインには、それぞれ1つのデザインに3種類の業種、5色のカラーバリエーションが用意されています。これまで、このデザインは好きだけど、テンプレートの構成が自分の業種のニーズと合わないために諦めていた人には朗報ですね。
 テンプレートの想定業種と自分が作りたいサイトの業種が違っても、カスタマイズすればもちろん利用できますが、今回のアップデートで、そのカスタマイズの手間が大幅に省けるようになりました。

新しいテンプレート例

それぞれのテンプレートは、複数ページからなる一般的なWebサイトとランディングページなどに最適なシングルページのいずれかを選べるようになっている

使いたいテンプレートを選択する

テンプレート選択画面の左側にある項目「テンプレート」から、サイトのカテゴリーをクリックし、表示されたテンプレートの中から、気になるものをクリックして内容を確認します。なお、上述の通り、1つのデザインに複数の業種別テンプレートが存在するため、特定のデザインが複数のカテゴリーに表示されることがあります。
テンプレート選択画面
テンプレートの詳細が、画面下部に表示されたら、カラーとページ構成を選択します[1]。[プレビュー]をクリックするとWebブラウザが起動して、サイト全体の構成やデザインが確認できます。使用するテンプレートが決まったら、[サイトを作成]をクリック[2]。

編集モードを選択する

編集モード選択画面
 BiNDupでは、スマートモードとエディタモードの2つの編集モードが選べます。ここでは、より編集の自由度が高い「エディタ(標準)」をクリックします。

ブロックの追加と削除

BiNDupでは、ページの内容をブロック単位で編集していきます。ここでは、テンプレートでは足りないブロックを追加したり、逆に多すぎるブロックを削除したりといった操作方法を解説します。

編集モードに切り替える

選択したテンプレートが反映された状態で、サイトエディタが開きます。このサイトエディタ画面で、テンプレートの内容を目的のサイトに合わせて編集していきます。
刷新したテンプレートを使って、BiNDupの基本操作をマスターしよう
ブロックの追加および削除は、サイトエディタで行います。作成したサイト、または編集したい既存のサイトをサイトエディタで開き、画面上部の[ページ編集]をクリックして、編集モードに切り替えます。

ブロックを追加する

編集モードに切り替わると、ページの内容がブロックごとに区切られます。ブロックの内容を編集するには、編集したいブロックをダブルクリックまたは鉛筆のアイコンをクリックします。ここでは、新しいブロックを追加したいので、編集バーの中央にある[下にブロックを追加]アイコンをクリックします。
ブロック追加画面
新しいブロックは、クリックしたブロックの下に作成されるので、追加したい場所の1つ上のブロックで上記の操作を行うと、後でブロックを移動する手間が省けます。
なお、既存のブロックと同じレイアウトのブロックを作成する場合は、[ブロックを複製]をクリックして内容を編集する方が、作業がスムーズに進みます。

ブロックテンプレートを使用する

ブロックを編集するにはブロックエディタを起動しますが、追加した新規ブロックを開くとまず[ブロックテンプレート]選択画面が表示されます。ブロックテンプレートは、ブロックのレイアウトやパーツを構成するテンプレートで、記事やナビゲーションを始め、表やリスト、フォーム、ショッピングカートなどの雛形が、1クリックで追加できます。
ブロックテンプレート
ブロックテンプレートのウインドウが表示されたら、まずカテゴリーを選択します。次に、表示されたテンプレートの一覧から使用するテンプレートをクリックして、最後に[適用]をクリックします。なお、ブロックテンプレートを使わない場合は、画面下の[閉じる]をクリックしましょう。

ブロックを削除する

刷新したテンプレートを使って、BiNDupの基本操作をマスターしよう
ブロックの削除は、追加のときと同じようにサイトエディタの編集モードで行います。削除したいブロックにマウスポインタを乗せて、表示された[編集バー]の右端のアイコンをクリックします。表示されたメニューから[ブロックを削除]をクリックします。確認のポップアップウインドウが表示されたら、[OK]をクリックします。

ページの追加と削除

複数ページのテンプレートには、一般的な構成を想定したページが用意されています。自分のサイトでは使わないものや、追加したいページもあるでしょう。そうしたときのために、ページの追加や削除の方法を覚えておくと便利です。また、ここでは、あらかじめレイアウトが組まれたページテンプレートを追加しますが、既存のページと似た構成のページを作る場合は、ページを複製してアレンジして作るのも1つの方法です。

ページテンプレートを選択する

ページテンプレート
サイトエディタで[追加]ボタンをクリックし[1]、メニューから追加したいページのテンプレートを選択します[2]。ここでは、[ページテンプレートを選択]→[ベース]→[Access]を選択しています。

ページを追加したら、共有ブロックを使って構成をほかのページと揃える

追加されたページは、ほかのページのヘッダやフッタ、ビルボードの内容と異なることがあります。
BiNDの場合、サイト内で共通したコンテンツを扱いたい場合は「共有ブロック」を使うと便利です。編集モードに切り替えて、共有ブロックの設定を変更しましょう。
共有ブロック設定
[ヘッダ]ブロックをブロックエディタで開きます。[ブロックの共有]メニューから、そのサイトテンプレートがヘッダに指定している項目(ここでは[_グローバルメニュー])を選択し、[適用]→[閉じる]の順にクリックします。設定を変更する前に、ほかのページが共有している内容を確認しておくと失敗がありません。
共有ブロック適用

ページを削除する

ページの削除画面
テンプレート内の不要なページを削除したい場合は、追加のときと同じように、サイトエディタで行います。削除したいページを選択した状態で、[複製・削除]ボタンをクリックし[1]、表示されたメニューから[選択した項目を削除]をクリックします[2]。削除の確認メッセージが表示されたら、[はい]をクリックすると、ページが削除されます。

ときには初心に返って新しきを知る!?

テンプレートの刷新を機に、BiNDupでのサイト作成の基本となるブロックとページの扱いをおさらいしました。新規に追加するページやブロックにもテンプレートが存在すること、デザインテンプレートを適用してもブロックごとに自由に編集できることなどBiNDupならではの使い方を再確認できたのではないでしょうか。
テンプレートと言えども、オリジナリティも出したい。そんなこだわり派の人は、ブロックを使いこなしてテンプレートをカスタマイズしちゃいましょう!

新しいBiNDupでサイトを作ってみる
BiNDの制作事例