初心者向けに、押さえたいコツを中心に実践的な方法を紹介しています。
第8回は”ブロックを共有”です。
目次
作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp
その1 ページ構造を理解してから作り始める
その2 見た目はドレスに任せる
その3 記事の書き方
その4 画像の挿入
その5 ページを増やす
その6 リンクをはる
その7 メニューを作る
その8 ブロックを共用
その9 ヘッダを作る
その10 フッタを作る
その11 インデックスページの役割
その12 インデックスページの内容を作る
その13 ホームページを作る
その14 微調整する
その15 アップロードする
今回のテーマは、ブロックの共有です。
そのままです、ブロックを共有します。
ブロックとは、これまでやってきた通り、ブロックエディタで編集する部分ですね。
ページの中に見出しでいうタイトルで分けて作っていったものです。
#5でやりました。
このブロックを共有できるように設定します。
ブロックを共有する理由
なぜ、共有するのかを説明します。
前回、#7でメニューを作りました。
メニューは、各ページの同じ場所にあるのが親切と解説しました。
前回のページだけではなく、別のページにも当然設置しなくてはいけません。
どうやって設置すべきか？
パソコンの操作に慣れている人なら、コピーしてペースト(貼り付け)すればと考えるでしょう。
それでもできます。
できますが、webサイトに変更があった時、どうしますか？
webサイトは、割と変更が多いです。
ページもどんどん増えていきます。
メニューに増えた部分のリンクを作りたくなります。
すると、メニューの内容が変わりますね。
100ページ、コピー＆ペーストしてメニューを作ったら、また変更後の内容で100ページ同じ事をしなくてはいけません。
やれません、やる気もありません、webサイト放棄します普通。
そこで、ブロックの共有を使います。
1度ブロックに共有の設定をすると、ブロックの内容を変更した時、変更の内容は共有しているすべてのブロックに反映します。
100ページに共有ブロックを設置してあれば、そのうちの１ページの中の共有ブロックを変更すると100ページ全部、変更後の内容になります。
とんでもなく便利な機能です。
多くのwebサイト作成サービスに実装されている機能ではありますが、BiNDのブロックで編集するやり方とブロックの共有がすごく相性が良いので、非常に使いやすいです。
この機能だけでもBiNDを買う価値があります。
ブロックエディタを表示する
それでは、実際にブロックの共有を設定してみましょう。
BiNDを開きます。
ヘッダでブロックエディタを表示させてください。
表示のやり方は大丈夫でしょうか。
すべての手順をすべて覚えようとすると覚えられません。
手順はたくさんありますから。
そうではなく、自分が今、何をするのかを覚えれば操作できます。
今は、ページを編集するのですから、編集というボタンがでたらクリックすれば良いのです。
パソコンの画面にヒントが出ているみたいなものです。
良く画面を見て、ブロックエディタを表示させてみましょう。
共有にする
ブロックエディタが表示できたら、ウィンドウの右側、三角マークに、なし、と書いてあるところをクリックしてください。
プロックを共有にするというメニューが出るのでクリックします。
共有ブロック名の入力が表示されます。
ここに、ブロックの名前を入力します。
分かりやすい名前にしてください。
例として「メニュー」を入力しています。
もっと細かい名前でも構いません。
「ヘッダ内横長メニューサイト全体用」くらい分かりやすくても良いです。
決して「共有1」とかにしないでください。
名前を入力したらOKをクリックします。
はい、ブロックが共有されました。
簡単ですね。
さっきの右側の三角マークに入力した名前が入っていると思います。
そして、ブロックエディタが緑色になりました。
この緑色が共有しているブロックの合図です。
最初に説明した通り、ブロックを共有すると、このページだけではなく共有しているブロック全部で同じ内容になります。
ですので、この緑色が表示されたら、少し慎重になりましょう。
共有ブロックを設置
違うページにこの共有ブロックを設置します。
今のブロックエディタを閉じたら、ウィンドウ左側のリストで共有ブロックを設置したいページをクリックして移動します。
ページの構造が表示されている画面になったらヘッダへマウスをもっていき、出てきたメニューの編集をクリック。
ブロックエディタが表示されました。
ここは、なにも入力していないので、空白です。
このまま、さきほどと同様に右上の三角マークと「なし」と書いてあるところをクリックします。
すると今度は、さっき共有したブロックの名前が下のほうに表示されています。
これをクリックします。
アラートがでますので、はいをクリック
ブロックエディタの内容が書き換えられました。
そして、このブロックは共有した内容と同じになりました。
このようにして今まで作ったページに共有ブロックを設定していきます。
ブロックエディタを閉じて、ウィンドウ上部の編集を終了するをクリックしプレビューモードにしてみます。
メニューが表示されました。
めちゃくちゃ便利ですね。
変更はどのブロックでもOK
共有したブロックですが、内容を編集する場合、どのブロックで編集すれば良いでしょう。
どのブロックでも編集できます。
最初に設定したブロックでなくとも、共有しているブロックならどこでも構いません。
もちろん編集した内容は、すべての共有しているブロックに反映します。
自由度が高いです。
ちょっとここだけ変えよう♪ なんていつもの調子で編集したら共有ブロックだったなんて事があったりましす。
気付かないでそのまま公開してしまいました、私は。
ですので、ブロックエディタが緑色になっていたら、ちょっと待てよ、共有ブロックだぞと慎重に編集してください。
たまに、共有はしたくないけどブロックは使いたい事があります。
その時は、共有を設定した時と同じ三角マークのメニューの下に、共有を解除、があるのでそれをクリックします。
すると、そのブロックは共有されなくなります。
ブロックエディタに共有していた時の内容はそのまま残っていますが、編集しても他のページに影響しません。
今回は、メニューを共有しました。
このように便利な機能なので、他のブロックにも応用できます。
ヘッダやフッタはほとんど共有です。
その他にも、季節のバナー広告を各ページに設定するとか、パンくずリストを表示する、といった内容のブロックを共有するなど使いみちがたくさんあります。
以上で共有ブロックの便利機能を紹介しました。
次回は、ヘッダを作る、です。