BiNDでサイトを作るとき、必ずしもテンプレートを使わなければ作れないということはありません。
むしろ、作りたい構成やデザインが決まっている場合はゼロから作れる「ブランクサイトから作成」を使ってみてください。コツさえ掴めば、それほど難しくはありません!
ここでは、ブランクサイトから作る場合に、この3つの設定だけは外せないというような基本の3つの設定を整理してみました。
設定方法
ブランクサイトは、サイトシアターの左側のボタンから作り始めます。
ブランクサイトを作るときに特別に決まったルールはないのですが、ここでは作りやすい方法をご案内します。
まずはヘッダーとビルボードにタイトルと背景画像を設定します。
(ここではメインブロックに画像と文字を入れた状態からご説明します。)
BiND8以降のバージョンでは、「ブランクサイトから作成」でサイトを作ると、それもレスポンシブWebに対応します。つまり、閲覧者が見る画面サイズに合わせて表示を最適化してくれるのです。
そこで、レスポンシブWebにおいてより美しく表示するために必要な設定を行います。
1.ページレイアウトの設定を100%にする
デフォルトの設定のままサイトを作り進めていくと、背景もコンテンツも中央に寄ってしまい、大きなモニターから見ると、下の画像のような窮屈な印象のサイトになってしまいます。
それを避けるために「ページ設定」の「ページレイアウト」のタブを開き、ページ全体を100%、ブロック内コンテンツを960pxに設定しましょう。ブロック内コンテンツの幅は、必ずしもこの数値でなくても大丈夫ですが、現在の平均的なモニタを考えるとこれくらいがお勧めです。
設定するとこのようにページ幅に合わせてストレッチ表示してくれます。
こうすることで、背景にはページ幅100%の画像を表示させたまま、コンテンツだけは端に寄らずに画面中央に配置でき、広がりのある印象にすることができます。
2.ヘッダーを固定する
サイトの導線を考える上で大切な、ナビゲーションの設定でやっておいてほしいことがこちらです。
ページをスクロールしてもヘッダーが消えず、常にウィンドウの上部に固定しておけるテクニックです。
やり方は簡単。ブロック編集時、ヘッダーの左上にある鍵マークをクリックして鍵が閉じた状態にしておきます。こうすると閲覧者が次に見たいコンテンツを探しやすくなるのでぜひ設定しましょう。
もっとヘッダーに動きを与えたい人は、新機能のゴーストヘッダーを設定してみてください。
→固定ヘッダーの進化形。ゴーストヘッダーの演出ノウハウ。
3.ブロックテンプレートを上手に使う
ブランクサイトで作るとき、便利なのがブロックテンプレートです。
ブロックテンプレートとは、ブロック内のレイアウトパターンがあらかじめセットされているものです。
自分が作りたいイメージに近いレイアウトパターンを選び、必要に応じて要素を追加したり減らしたりすれば、エディタモードで一つ一つ組んでいくよりも、簡単にページ構成を作ることができます。
ブロックテンプレートを使うには、まず目的のブロックを選択しブロック編集画面を開き、左下の「ブロックテンプレート」ボタンをクリックします。
スマートモード用のテンプレートとエディタモード用テンプレートの大きく二つに分けられているので、普段自分が使ってるほうから選びます。
ヘッダ・フッタのテンプレートや、記事や画像などカテゴリごとに約50種類ほどのレイアウトパターンが用意されています。作りたいレイアウトに近いものを選択し、適用をクリックしましょう。
ここでは、「エディタモード」の「記事」カテゴリーにある、「フォトダイアリー」を選びました。
レイアウトのパターンが簡単に入りました!
番外編.検索ロボット巡回設定
最後に、見た目も大事ですが、つい忘れがちなSEOも設定してしまいましょう。
GoogleやYahooなどの検索サイトでの表示順位は、検索プログラム(ロボット)がキーワードとWebサイトがどれだけマッチングしているか、その都度、巡回することで決定しています。そのため、Webサイトは高い検索順位で表示されるよう、想定する検索キーワードと関連性の高い情報を設定しておくことが大事です。
BiNDは、デフォルトでは検索設定がOFFになっているので任意に設定してから公開しましょう。
詳しくは以下のページを参考に設定してみてください。
さらに「らしさ」を配置して、どんどん個性がひきたつサイトへ
いかがでしたでしょうか?この3つの設定をしたサイトをベースに、写真をオリジナルのものにしたり、Webフォントを設定したり、スライドショーやブロックアニメーションなどの動きを加えていくことで、どんどん、そのサイト「らしさ」が際立っていきます。
ぜひ忘れずに、設定してみてくださいね。
POINT
- ページの横幅を100%に設定する
- ヘッダーを固定すると、見ている人に親切
- ブロックテンプレートをうまく活用すると効率よく作れる