初心者向けに、押さえたいコツと実践的な方法を紹介しています。
第9回は”ヘッダを作る”です。
目次
作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp
その1 ページ構造を理解してから作り始める
その2 見た目はドレスに任せる
その3 記事の書き方
その4 画像の挿入
その5 ページを増やす
その6 リンクをはる
その7 メニューを作る
その8 ブロックを共用
その9 ヘッダを作る
その10 フッタを作る
その11 インデックスページの役割
その12 インデックスページの内容を作る
その13 ホームページを作る
その14 微調整する
その15 アップロードする
webサイトの作成を紹介しています。
#1から順番に読んでいただいたほうが分かりやすくなっています。
ヘッダはロゴ
今回は、ヘッダを作ります。
ヘッダは、その1で紹介したページの構造でいうと1番上にある場所です。
その7では、ヘッダにメニューを作りました。
今回は、同じヘッダ内にロゴを作っていきたいと思います。
多くのwebページには、１番上にロゴが表示されています。
そのページがどこのwebサイトなのかすぐ分かるのであった方が良い部分です。
大きめのロゴでもスクロールで最初に消えてしまう部分ですから、それほど問題ありません。
ただ、ページを変える度にデカデカと表示されるのが嫌な時は、それなりの対処方法があります。
ありますが、今回はロゴを作ってヘッダに表示するまでをやりたいのでそこまでやりません。
細かな調整は、webサイトが出来上がってからやります。
ブロックを追加する
では、実際に作っていきましょう。
BiNDを立ち上げてページの構造が見える、編集モードまで操作してください。
ページはどのページでも構いません。
あとで共有します。
ヘッダの部分にマウスをもっていき、メニューが出たら四角に+のアイコンをクリックしてブロックを増やします。
ブロックが下に増えました。
#5でやった、記事を増やす時はこれで良いのですが、今回はロゴを1番上に作りたいのでこのブロックをひとつ上に移動させます。
移動させるには、今、追加したブロックにマウスを合わせると出てくるメニューの棒の下に上向き三角のアイコンをクリックします。
はい、ブロックが移動しました。
ロゴ作りはサポートソフトを使う
このブロックのメニューから編集をクリックして、ブロックエディタを表示してください。
ロゴは、画像なので基本的には画像の扱いと同じです。
画像をブロックエディタ内に挿入するには、#4で紹介した通り、ブロックエディタの中に場所を作って追加します。
今回が画像の挿入と違うのは、画像が無い事です。
もちろん、最初から決まったロゴがある場合はそれを挿入すれば完成です。
ここでは、ロゴ作りからやります。
ロゴ作りもそうなのですが、インターネットのページには加工された画像がたくさんあります。
小さなバナー広告から画面を全部表示するようなものまで、目を引かせる画像ばかりです。
こういった画像を加工して作る時は、専用のソフトを使う場合が多いです。
有名な画像加工ソフトがありますが、ああいったソフトで作ってから、webサイトを作るソフトへ持ってきます。
このいったん別のソフトで作る作業は、とても面倒。
一発でイメージ通りのものができる事はまずありません。
画像加工ソフトで作って、webサイトのソフトに持ってきてプレビューして、また画像加工ソフトで修正してまたwebサイトのソフトへと何度も繰り返します。
めちゃくちゃ面倒くさい作業です。
もっとブロックエディタの中とかでできないの！
かというと、できます。
BiNDには、画像を加工するソフトが付属しているのです。
しかもブロックエディタの中でできます。
厳密には、別のサポート的なソフトで作りますが、出来上がったものは自動でブロックエディタに入ります。
もちろん、修正もできるので超便利です。
ソフトを起動する
それでは、ロゴ作りをしていきましょう。
ブロックエディタの右側、アイコンのたくさん並んでいるところから、画像を作成をクリックします。
もうひとつウィンドウが開き、画像を作成する画面になりました。
これが、ロゴを作るサポートソフトです。
今は、何も作っていないのでテンプレートを選ぶ画面になっています。
ここで、左側のロゴとかいてあるタブをクリックして作りたいテンプレートを選びます。
ここでは、例としてロゴーレストランを選びます。
マウスをこのテンプレートに重ねるとこのテンプレートで作成と表示されますのでクリックします。
テンプレートを編集
編集する画面に変わります。
テンプレートから選んだのですでに文字が入力されています。
これを変更してロゴを完成させましょう。
文字の近くにマウスを移動させると、緑の枠が表示されます。
この枠をダブルクリックすると、文字を変更できるカーソルが現れます。
あとは、いつもの通りに文字を入力してください。
文字の大きさや色、文字の間隔を調整したい場合は、緑の枠をダブルクリックして文字が入力できる状態になったら、変更したい文字を選択して、右下の設定を変えます。
文字の色や大きさはまちまちなので、緑の枠はいくつもあります。
それぞれについて変更してください。
もちろんフォントも変更できます。
上の設定するところから、フォントをクリックして変更できます。
少し変わり種では、フォントに「SiGHNアイコン」を選ぶと、アルファベットが様々なアイコンになります。
アイコンとアルファベットの関係は以下を参照してください。
https://support.digitalstage.jp/bind10/04/0401/04040108m
枠を合わせる
ロゴが完成しましたか？
あとで修正も簡単ですから、こだわり過ぎないように。
また、この画面でおわかりのように細い線で囲まれた範囲が画像の大きさです。
このまま使っても良さそうですが、余白が多いので少し調整します。
ここまでの変更で以下のようになっています。
枠を小さくします。
小さくするには、ウィンドウの左上、サイズの右側をクリックします。
ここで表示された数字に変更したい数字を入れてください。
初期設定ではタテとヨコの比が固定されていますが、数字の間にある鎖をクリックすると別々に指定できます。
OKをクリックすると画像の大きさが変更され、細い線の枠も大きさがかわりました。
この枠の中に入れないと画像として表示されませんので、それぞれの文字をドラッグして位置を変えてください。
これで、ロゴの完成です。
右下の保存をクリックしてから閉じるをクリックします。
ブロックエディタに画像が挿入されていると思います。
ブロックエディタの適用をクリックして変更を確定します。
ブロックエディタを閉じ、ページの編集を終了してプレビューモードに戻ります。
ロゴが挿入されました。
これで、ヘッダーは完成です。
画像の加工はこのように、他のソフトを使わず作業できます。
このサポートソフトが多少クセがあってやりにくく感じるかもしれませんが、前述の通り他のソフトを使うより断然作業効率が良いので使いこなしたいものです。
今回は、ロゴをつくりました。
同様に画像に文字を加えたり、色合いを変えたりもできます。
画像は、手持ちのものを使えますので、自分のwebサイトにあうように加工できます。
これだけで、やりたいと思う事はできると思いますので、ぜひ活用してください。
次回は、フッタを作る、です。