初心者向けに、押さえたいコツと実践的な方法を紹介しています。
第10回は”フッタを作る”です。
目次
作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp
その1 ページ構造を理解してから作り始める
その2 見た目はドレスに任せる
その3 記事の書き方
その4 画像の挿入
その5 ページを増やす
その6 リンクをはる
その7 メニューを作る
その8 ブロックを共用
その9 ヘッダを作る
その10 フッタを作る
その11 インデックスページの役割
その12 インデックスページの内容を作る
その13 ホームページを作る
その14 微調整する
その15 アップロードする
前回は、ヘッダを作りました。
ヘッダとともにロゴも作りました。
今回は、フッタを作っていきます。
フッタは、#1で紹介したページの構造では、1番下にあたる部分です。
フッタに表示する内容は、ページの上へ戻るボタン、サイトマップとリアルの情報です。
実際に作りながら説明していきたいと思います。
上へ戻るボタンとは
BiNDを起動してください。
ページの構造が表示される編集モードまで操作してください。
1番下にあるフッタにマウスを移動して、左に表示されるメニューから編集をクリックします。
ブロックエディタが開きました。
初めに「上へ戻る」ボタンを作ります。
上へ戻るボタンは、その名前の通り、ページの先頭へ戻る仕組みです。
このページを見に来た人は、スクロールして１番下まで来ているので、1番上にあるメニューまでまたスクロールさせるのは不親切です。
そこで、いっきに戻れるボタンを設置しておきます。
タグについて
ブロックエディタのウィンドウ右側のアイコンがたくさん並んでいる所から、カスタムタグをクリックします。
ああ、やっぱり来たね、とホームページ作りをしたことがある方ならお思いでしょう。
タグというのは、webページを作る時に使う言語で命令をまとめているものです。
しかし、慣れていない人はタグなど使うべきではありません。
とは言うもののこういった感じでちょくちょく顔を出します。
そこで、1点だけ覚えてください。
タグは、<xx>と</xx>で挟んで書く、これだけです。
xxは様々に変わる命令です。
つまり、<>から</>の間に赤くなれとかもっと太くしろなどと命令しているのです。
ほとんどこのカタチですので、なんか知らんけど命令を出しているんだな、と理解しておきます。
戻るボタンを挿入
BiNDでは、タグを使って書くようなものをあらかじめ簡単に使えるようにしてあります。
右側に出てきたセットというボタンをクリックして、その中からナビゲーション、ページトップへを選んでクリックします。
これで、1番上へ戻るボタンが作れました。
ブロックエディタの中に挿入されていると思います。
ブロックエディタで適用をクリックし今回の変更を確定します。
タグを修正
閉じるをクリックし、プレビュー画面に戻ってみます。
こうなりました。
明らかにおかしな表示になっていますね。
タグはこういうものです。
タグの命令は絶対なので、ちょっと違うかもよと調整してもらえません。
しかし、慌てる事はありません。
上の方で言ったのを思い出しながら直しましょう。
ついでに、場所も右の方に修正します。
フッタのブロックエディタを表示させてください。
ページトップへと書かれた四角が入力されています。
まず、これをクリックして選択します。
すると、右側の表示が変わりますので、HTMLを編集をクリックします。
ソースエディタというウィンドウが開きます。
落ち着いてください。
たいした事は書いてありません。
さっき、なぜページトップへの文字と画像が重なってしまったのかというと、まず、ページトップへの文字にタグの命令があり、このタグにドレスが設定してあったからです。
ならば、どちらかを削れば良いのです。
ドレスの方が面倒ですので、文字を削ります。
前述の通り、タグは<>と</>で挟んだものに命令を出しています。
ソースエディタをよく見てみれば、ページトップへが完全にspanに挟まれていますね。
なので、ページトップへを消去してしまいます。
消去したらOKをクリックしブロックエディタに戻ります。
さらに、ウィンドウ上部にある右寄せをクリックして場所を移動させておきます。
適用をクリックして変更を確定。
閉じるで戻ってください。
プレビュー画面で修正を確認します。
このように、タグを挿入したい時は、カスタムタグを使います。
グーグルマップやユーチューブなど、ページに挿入するタグが提供されているサービスがあります。
それを使いたいときは、カスタムタグのHTMLソースエディタにコピー＆ペーストしてください。
サイトマップの作り方
次に、サイトマップを作ります。
上へ戻るボタンを作ったブロックの下にブロックを追加してください。
追加のやり方は分かりますね。
忘れてしまったら、#5のページを増やすを読み直してください。
追加したブロックのブロックエディタを開きます。
下のようにいままで作ったページを入力し、そのページへリンクを設定します。
リンクの設定は、#6のリンクをはるを確認してください。
メニュー作りに似ています。
そして、行の中間辺りに改行で1行あけ、分割を入れます。
分割は、ブロックエディタの右上の方にあるので、クリックすると挿入できます。
分割は段
分割について説明します。
分割は、新聞や雑誌などの段にあたるものです。
段は、文字を表示するひとつの場所を左右または上下方向にいくつか分けるものです。
新聞も上から下へずっと文字が続いていません。
途中で折り返していると思います。
これが段です。
ひとつの場所で複数の記事を書いたりする時に使います。
分割を設定
BiNDではひとつのブロックエディタ内で段を作ります。
今作るサイトマップは、webサイトのすべてのページをひと目で見せるものです。
なので、スクロールするほど縦長ではよくありません。
そこで、横に長くするために左右に段をとります。
段を折り返す位置に分割を入れる訳です。
分割を入れたら、段の設定をします。
忘れがちなので注意してください。
ブロックエディタの上部「設定」タブをクリックしてください。
表示されたところにオプション「1段」とありますので、これをクリック。
出たメニューから2段をクリックします。
これで、このブロックが2段になりました。
この設定をしないと分割を入れても段になりません。
みての通り、段は最高5段までいけます。
レイアウトの調整に段は有効なので、ここちょっと横に表示したいなぁと思った時は分割がおすすめです。
ただ、スマートフォンは横長の表示は得意ではありませんので、スマートフォンでは1段にするとか代わりを表示するなどしてください。
入力と設定が完了したら適用をクリックして変更を確定。
ブロックエディタを閉じます。
リアル情報の追加
最後にリアル情報を加えます。
今のブロックの下にもうひとつブロックを追加してください。
追加したブロックエディタを開きます。
リアル情報は、店舗や会社などの住所、電話番号などです。
名刺みたいなものですね。
インターネットのページではほとんどフッタにこの情報があります。
見に来た人もそれを知っているので、いちいち住所や電話番号のあるページを探す必要がありません。
ストレスフリーは好印象です。
もちろん、リアルの情報が無い場合は省略できます。
無理に個人情報を公開する必要はありません。
もうひとつ、著作権を主張するCopyrightも入れておきます。
著作権はコピーライトを敢えて書かなくても保護されますが、一応念の為です。
今回も、リアル情報とコピーライトを横に書きたいので分割を入れます。
設定タブで2段に変更するのも忘れずに。
適用と閉じるで戻り、プレビューを確認しておきます。
これで、フッタは完成です。
察しの良い方は、ヘッダとフッタを共有しておけば良いのかなとお思いでしょう。
大正解です。
これまで作ったページのヘッダとフッタに今回作ったものを、ブロックの共有に登録して設定してください。
共有はブロック単位ですので、ブロックを追加しながら設定します。
次回は、インデックスを作る、です。