素人がwebサイトを作るにはどうしたらいいか

素人がwebサイトを作るにはどうしたらいいか #15

初心者がハマりやすいポイントを押さえたwebサイトの制作を紹介

最終回は、”アップロードする”です。

作成ソフトは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回だけです。
それ以降は、ワンクリックでBiNDがすべてやってくれます。
初回だけがんばりましょう。

なぜサーバーにファイルをコピーするのか？

念のために説明しておきます。
自分のパソコンでwebサイトを作っても、そのパソコンがネットにつながっているからといって、webサイトが公開される訳ではありません。
そもそも、普通は誰もあなたのパソコンの中身をネット経由で見ることはできません。
そこで、誰でも見ることができるような場所を借りて、そこにパソコンで作ったwebサイトのファイルをコピーします。
この借りる場所をサーバーといい、コピーすることをアップロードといいます。
これで、自分のパソコンを終了してもwebサイトはいつでもだれでも閲覧できますね。
注意したいのは、サーバーにあるのはあくまでコピーです。
自分のパソコンでwebサイトを変更したら、変更後のものをアップロードしないとずっと変更前のままです。
webサイトを変更したら、必ずアップロードしてください。

設定ウィンドウを開く

BiNDを起動します。
プレビューの画面まで進めてください。
サイトの設定画面を開きます。
左側、ページやコーナーが並んでいる上の歯車アイコンをクリックしてください。

設定ウィンドウが開きました。
上のタブでサイト設定をクリック。
真ん中辺りのタブでサーバー設定をクリックします。

サーバーの種類の右側「未設定」をクリックすると、メニューが出ます。
これは、自分のパソコンで作っているwebサイトを置くサーバーの種類です。
サーバーの種類は、デジタルステージで契約していればそれを選んでください。
全く別のサーバーと契約しているなら、一般的なFTPサーバーです。

例として一般的なFTPサーバーを選びました。

サーバー情報を入力する

各種設定内容が表示されます。
空欄に入力してください。
もちろん、サーバーと契約が必要です。
サーバーと契約するには、検索サイトで「レンタルサーバー」で検索すれば、たくさん出てきます。
ありすぎて困る時は、比較サイトを利用してください。
契約価格だけではなく、ユーザー満足度やユーザーの数なども参考にすると良いと思います。

サーバーと契約すると、各種情報をサーバー側から教えてもらえます。
サイトURLはもちろん、このwebサイトのURLです。
FTPホスト、ユーザーID、パスワードも契約後の内容に書いてあります。

入力できたら、テスト開始ボタンをクリックしてください。
緑のマークが点灯すれば成功です。

サーバーの中には、ディレクトリを指定している所もありますので、その時は、サーバーディレクトリに入力しておきます。
ひとつのサーバー内にいくつかwebサイトを作りたい時も、ここでディレクトリを分けます。
最後に適用クリックすれば完了です。

これで、アップロードの準備は整いました。

SEO対策は必要なし

このままアップロードしても大丈夫ですが、SEOについて説明しておきます。
SEO？
なんとなく聞いたことがあるような無いような感じですね。
少し前まではかなり重要視されていました。
検索サイトでの表示順位のことです。
上位に表示されれば単純に見る人が多いので、皆で懸命に上位を目指していました。
SEO対策という専門の会社まであるほどだったのですが、今はそれほどでも無いイメージです。
というのは、検索サイトの検索精度が上っているからです。
小手先のテクニックは効きません。
本当に必要な情報があるサイトがきちんと上位に表示されます。
逆に言えば、webサイトやページ作りをちゃんとやっておけば、おのずと上位に表示されるので、対策などは必要ないのです。
そのページが何についてのページなのかはっきり分かって、ページに必要な情報が書かれていれば良い訳です。
検索サイトは、主に文字でページを判断しています。
見出しのページタイトルは何なのか、その次のタイトルには何と書いてあるのか。
ページにある文字に検索キーワードは含まれているのか、関連ワードはあるのか。
そういった部分が重要になります。

検索サイト向けの設定はしておく

BiNDでは、検索サイト向けの設定があります。
検索サイトに表示させるかどうかとページの説明です。
SEO以前の問題ですので、これは設定しておいてください。
前述のサイト設定のウィンドウを開いてください。
今度は、サイト設定のタブではなく、コーナー設定タブをクリックします。
検索ロボット巡回設定で「これより以下のコーナーでは下記の設定を使用」にチェックを入れます。
その下、検索対象にするにチェックを入れます。
これで、検索サイトに表示されるようになりました。
その下の枠がページの説明です。
検索サイトの検索結果に説明として表示されることがあります。
探している人に分かりやすい内容を入力してください。
できたら、適用をクリックします。

アップロードする

はい、以上でwebサイト作りは完了しました。
設定ウィンドウを閉じたら、プレビュー画面右上のサイトを公開をクリックします。
アラートがでたらはいをクリックでアップロードが始まります。

アップロードが完了するとブラウザで確認しますか？と聞かれますのではいをクリック。
自分のパソコンのプラウザが開いて、webサイトが表示されれは成功です。

できれば、他のパソコンやスマートフォンなどでも確認しておいたほうが良いでしょう。
以降、webサイトを変更した場合は、右上のサイトを公開ボタンをクリックするだけでアップロードが完了します。

最後に

webサイト作りはいかがでしたか？
意外と簡単だったでしょうか、たいへん過ぎて燃え尽きてしまったでしょうか。
しばらくは、BiNDを起動したくないと思っている方も少なくないと思います。
やっぱり面倒ですからね。
ただ、BiNDの機能は、ここまでで紹介しただけではありません。
できる事はもっとたくさんあります。
動画を組み込んでみたいな、あの有名なサイトみたいな表現できないかな、SNSのフォロワーの人に見てもらいたいな、ブログと連動できないかな…
だいたいできます。
できなくても、今後のアップデートで追加される機能もあるでしょう。
新着情報を更新するだけでも大丈夫です。
気軽にBiNDを起動してください。
そんなにがんぱらなくてもBiNDならできます。
ちょっとずつwebサイトを充実させてください。

素人がwebサイトを作るにはどうしたらいいか #14

webサイト作成の基礎の基礎、これさえ分かれば作れます。

第14回は最終仕上げ、”微調整をする”です。

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp

いよいよ大詰めとなってまいりました。
このまま公開しても良いレベルですが気になる所を少し手直しします。

文字の大きさは無視する

まず、文字の見た目を変更してみましょう。
#2 見た目はドレスに任せるでやった通り、見た目はドレスを使って変更しました。
その中でも書いたように、文字の大きさやレイアウトはwebサイトを見ている人の環境で全く異なります。
100インチのテレビで見ている人もいれば、3.5インチのスマートフォンで見ている人もいます。
ずっと自分のパソコンで作業していると、今見ているwebサイトが全てと勘違いしがちです。
ですので、自分のパソコンで文字が大きいとか小さいとかは無視してください。
ここで文字を折り返したいも無意味です。

文字の大きさを変更する場合は、タイトルとか大見出しとかの見出しと比較したバランスで考えます。
ベージタイトルの見出しをもう少し本文と同じくらいにしたい、と思ったら変更です。
自分のパソコンで文字が小さくて見づらいなぁと思っても変更してはだめです。

ドレスの編集ウィンドウを開く

では、変更してみましょう。
BiNDを起動してプレビューの画面まで進めます。
右上のドレスのアイコンをクリックすると、現在のドレスを編集というメニューがあるのでクリックします。

ドレスのウィンドウが開きました。
左側は現在編集しているページです。
ドレスを変更するとリアルタイムで変更した結果を確認できます。
左側で変更したい文字をクリックしてください。

右側のいろいろあった所が変わりました。
この右側が今左側でクリックした文字のドレスでの設定です。
すごくたくさんあります。
ここで設定を変更すると、webサイト全体の変更になるので、慣れないうちは文字色と文字サイズ程度にしておくと良いでしょう。

文字サイズはem

右側、文字サイズの灰色四角をクリックしてください。

文字サイズの設定画面になりました。
設定するにチェックを入れるとその下の枠に数値が入力できます。
枠の右側は単位です。
単位はremかemにしてください。

emは、基本の文字の大きさに対してどのくらいかという意味です。
人それぞれでブラウザの文字の大きさがまちまちなので、相対的にどのくらいの大きさかが見た目で重要だからです。
なんのこっちゃとお思いでしょう。
安心してください。
実際確認できます。
数値を入力してOKをクリックすると、左側の文字の大きさが変わります。
タイトルなどと比較して良さそうな数値をいろいろ試せるので、好みのバランスにしてください。

文字の大きさと同様に色も変更できますので、お試しください。
できたらOKをクリックして前のウィンドウに戻り、保存をクリックしてドレスのウィンドウを閉じます。
これで、文字の大きさが変更できました。

メニューを固定する

次は、なんとなく気になっていたメニューを変更します。
もう少しカチッと決まった場所にメニューをおきたいですね。
できれば、いつでも1番上にあれば便利です。
スクロールした時に消えてしまうのではなく、1番上に残る設定をしてみましょう。
メニューのブロックエディタを開いてください。
上の設定タブをクリックすると、左側に「スクロール時ブラウザの上部に吸着」という項目があります。
これをチェックします。

適用をクリックすると、はい、吸着しました。
簡単ですね。

余白を調整する

簡単なのですが、いきなりメニューが変な場所に出現しているみたいになっています。
これは、メニューのブロックの回りに余白が設定されているためです。
ピタッと吸着させるために余白を変更しましょう。
また、メニューのブロックエディタに戻って、設定タブをクリックしてください。
今度は、右側に余白という項目があります。
プリセットの横、普通(30px)をクリックするとメニュー出ます。
ゼロをクリックしてください。
これで、余白がゼロになりました。
また、前回ビルボードをウィンドウいっぱいに設定したので、そのすぐ上のメニューもいっぱいに合わせておきましょう。
これは、今のすぐ上、ブロック内コンテンツの横幅にチェックを入れて、100を入力、単位を％にします。

できたら、ブロックエディタの適用をクリックして閉じます。
プレビュー画面で見てみましょう。
吸着したメニューがピッタリ1番上になりましたね。

このように、ここをもう少し離したいとかぴったり近づけたい時は、余白を使ってください。
つい、簡単なので改行とかスペースを使いたくなりますが、それはいけません。
理由はもうお分かりだと思います。

段の幅を調整

最後は、ヘッダのロゴです。
かなり大きいです。
これが良いいよ！という方には必要ありません。
好みの部分です。
少し小さくしてみます。
ついでに右側を区切って電話番号なども入れてみます。
そのために段を使います。

ロゴのブロックエディタを開いてください。
設定タブをクリックします。
今度は、左側1番上のプレーンをクリックします。
すると、いろいろな四角のメニューが出てきます。
この中から左右段違いをクリックしてください。
そして、オプションで左広めを選択しておきます。

できたら、ブロックエディタの編集タブをクリックして電話番号などを入力します。
下のような感じにしてください。
段を作ったので分割を入れるのをお忘れなく。

今までは、プレーンで段を作りました。
プレーンは左右が同じ大きさです。
今回は、ロゴを大きめにしたいので、左側の段を広めにとっています。

電話番号などは、右寄せにしておいてください。
適用をクリックして、変更を確定します。
プレビューで見てみましょう。

ロゴがおとなしめになりました。
何度も言いますが、webページは見る人の環境がまちまちです。
ロゴのような画像も、大きさをピクセルで指定するのは賢明ではありません。
レイアウトが崩れてしまう主な原因です。
ですので、このようにブロックの中で段を作り大きさを変更しています。

文字を重ねる

もうひとつ、ちょっとしたテクニックを紹介して終わりにします。
前回作ったスライド画像に文字を重ねてみます。
スライド画像は画像なので、文字を重ねると一緒にスライドしそうですが、固定したまま表示させる方法があります。
キャッチコピーなどを表示させると効果的ですね。

ビルボードのスライド画像を作ったすぐ下にブロックを追加してください。
そのブロックエディタを開きます。
下のような感じに入力してください。

今回だけ上のほうにあるワープロ的なツールを使えます。
見た目は、ドレスで変更していたので、今までここは使いませんでした。
あとで大変な事になるので、絶対に使ってはいけない所です。
ですが、今回は、ここのブロックだけの変更なので、使えるのです。

入力できたら、ブロックエディタの設定タブをクリックして設定画面にします。
左側のこのブロックを直前のブロックに重ねるのチェックを入れます。

ブロックエディタの適用クリックして、閉じてからプレビュー画面に戻ります。
スライド画像に文字が重なりました。
今どきのwebサイトみたいになりました。

これで、微調整は終了です。
次回は、最終回、アップロードです。

素人がwebサイトを作るにはどうしたらいいか #13

全くの初心者向けにwebサイト作りを紹介しています。

第13回は、”ホームページを作る”です。

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp

今回は、いよいよwebサイトの顔、ホームページを作ります。
とは言っても、ページの内容は、前回のトップページと大きくは変わりません。
ホームページもトップページもインデックスページですので。

6秒ルール

ホームページがトップページと少し違うのは、webサイト全体のインデックスページである点です。
webサイト全体なので、1ページにすべての目次を作るのは現実的ではないですね。
できない事もありませんが、見栄えが良くないのと6秒ルールがあるためです。
6秒ルールとは、webサイトに訪れた人がホームページに滞在する平均時間だそうです。
訪問者は、長々とスクロールしてホームページすべてを見てはくれません。
最初に表示された内容をざっと見る程度なので、そこに多くの情報を載せたり目を引く手法を使います。
そんな手法のひとつ、スライド画像を初めに作りましょう。

スライド画像の作り方

BiNDを起動してください。
いつものようにプレビューの画面まで進めます。
まず、ホームページを作ります。
前回作ったトップページの１つをどれでも良いので複製してください。
複製は、左側のページがたくさん並んでいるところの上、複製アイコンをクリックします。
サイトコーナーを指定して複製を選び、最も上位の位置に複製します。
複製されたら、そのページ名右側の歯車アイコンをクリックして名前をホームページ、ファイル名をindexにします。

はい、これでホームページが作られました。
このページを編集するをクリックしてから、ページの構造を表示して、ビルボードのブロックエディタを開きます。

このブロックにスライド画像を挿入します。
ブロックエディタの右側、アイコンがたくさん並んでいるところからスライドショーをクリックします。

スライド画像の作成ウィンドウが開きました。
これも、ロゴを作った時と同様なサポートソフトです。
まず、どのような動きのスライドにするのかを決めます。
スライドなのだからスライドだけというのではなく、画像切り替えアニメーションの種類がたくさんあります。
今回は、シンプルなウォールズを選択します。
ウォールズをクリックして、右下のOKをクリックしてください。

ここでは、6秒ルールのためにスライド画像を作っていますが、たくさんある画像を次々と見せたい時などは、カルーセルもおすすめです。
ただ、カルーセルはずっと動いているので、大きな画像では鬱陶しい感じになりますから、小さめの画像にしてください。

画像追加のウィンドウになりました。
左下の新規画像をクリックして、表示したい画像を選択します。
選択の仕方は、#4でやったブロックエディタに画像を追加する時と同じです。
画像は、スライドショーサイズに自動的に変更されます。
おかしな位置になってしまった場合は、中央の編集ボタンをクリックすると微妙な位置を調整できます。
5〜6枚追加してください。

画像の追加が終わったら、OKをクリックしてブロックエディタに戻ります。
ブロックエディタにスライドショーっぼい画像が追加されています。
スライド画像を変更したい時は、この画像を一度クリックして、右側に出てくるスライドショーを編集ボタンをクリックするとさきほどのウィンドウになります。

ブロックの横幅を変更

今回選んだアニメーションのウォールズは、横幅いっぱいに表示するスライド画像です。
このブロック、ビルボードの横幅は、デフォルトのまま960ピクセルとなっていますので、これをウィンドウいっぱいに表示するように変更します。
ブロックエディタの上にあるタブから設定をクリックしてください。

ブロック設定の画面になりました。
ブロック内コンテンツの横幅にチェックを入れると右側の枠に入力できるようになります。
枠に100を入力して、そのすぐ右側の三角をクリックして％を選びます。
これで、ウィンドウいっぱいの表示に設定できました。
ブロックエディタの適用をクリックして変更を確定。
閉じるで戻ってからプレビューモードで確認してください。

スライド画像が追加されましたね。
この画像には、先ほどの画像を追加したサポートソフトでリンクの設定もできます。
移動させたいページにリンクを設定しておくのも良いでしょう。
また、画像の切り替わる時間や画像の大きさも調整できます。

タイトルを追加

次に、タイトルを追加します。
ブロックは、メインに追加してください。
ビルボードでは、横幅いっぱいになってしまいます。

メインにブロックを追加して、１番上へ移動。
ブロックエディタを開いて編集。
タイトルを入力してページタイトルの見出しを設定し簡単な説明を入れるです。
もう詳しい説明は必要ありませんね。

これ以下は、トップページの内容と同じに作ります。
ただ、この辺りで最初にディスプレイ表示される内容が切れますので、本当に見てもらいたいページを表示すべきです。
セールスポイントとなるページですね。
そのようなページを段を作って多く表示するか、ひとつだけ表示するかはwebサイトの構成で判断します。
どららにしても、スマートフォンでの表示は1つずつになりますから、上から順に重要度の高いものにしておきます。

素人がwebサイトを作るにはどうしたらいいか #12

BiNDというソフトを使った、初心者向けのwebサイト制作案内です。

第12回は”インデックスページの内容を作る”です。

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp

前回のおさらい

前回の#11では、インデックスというページの役割について紹介しました。
インデックスページは、ディレクトリにそのページがあるとページ名まで入力しなくても表示されました。
ディレクトリは、パソコンで言うところのフォルダで、ページを分類するために作ります。
BiNDではディレクトリをコーナーと呼び、各コーナーにもインデックスページを作りました。
最も上位のディレクトリにあるインデックスページは、ホームページと呼びました。各コーナーにあるインデックスページは、１番最初に表示する意味でトップページと呼びます。
今回は、トップページの中身を作っていきます。

また、これまではブロックエディタにすべて入力して編集していましたが、少し便利なやり方も合わせて紹介していきます。
ホームページは、今回のトップページの仲間ですが、特殊なページなので次回にします。

ブロックを共有しておく

それでは、実際に作っていきましょう。
BiNDを起動してください。
初めに、ページに共通するブロックを作ります。
共通するブロックなので、そうですね、#8でやったブロックの共有を設定します。
共有の復習を兼ねて、トップページで共有ブロックを設置していきます。

BiNDのプレビュー画面、左側のページがたくさん並んでいる所から、ヘッダとフッタを作ったページをクリックしてください。
共有するブロックのブロックエディタを開きます。
右上の三角マークをクリックしてブロックを共有にするをクリック、共有ブロックの名前を入力でしたね。
忘れてしまったら、#8のブロックの共有を見直してください。

これまでに作ったブロックで共有しておくブロックは、タイトルロゴを入れたブロック、ページトップへ戻るを入れたブロック、サイトマップのブロック、リアル情報を入れたブロックとメニューのブロックの5ヶ所です。
メニューのブロックは、共有ブロックにしてあるので、その他の4ブロックを共有ブロックにします。

共有ブロックを設置

すべて共有ブロックにできたら、今度はトップページを表示させます。
表示するには、左側のページが並んでいる所でそのページをクリックです。
トップページは、前回の#11で作ったディレクトリ＝BiNDのコーナーに入れたインデックスページですね。
このトップページに共有したブロックを設置します。
トップページのヘッダでタイトルロゴを作ったブロックのブロックエディタを表示してください。
まだ、なにも入力されていません。
ここで、右上の三角マークをクリックして、タイトルロゴを設定した共有ブロックを選択します。

変更の確認アラートが出るので、はいをクリックします。
ブロックエディタの内容が、共有ブロックになりました。
ブロックエディタの閉じるをクリックして閉じます。

次に、メニューを設置していきます。
メニュー用のブロックがありませんので、四角に＋のアイコンをクリックして下にブロックを追加します。
追加したブロックのブロックエディタを開いて、メニューの共有ブロックを設置してください。
設置のやり方は、すぐ上でやりましたね。

フッタにもブロック追加しながら共有ブロックを設置します。
すべての共有ブロックを設置してください。
これで共有ブロックの設置は終わりです。

トップページは目次

メインを編集していきましょう。
ところで、トップページの内容は、どのようにすべきでしょうか？
トップページは、インデックスページなので当然、目次のページです。
そのコーナーにある各ページについて分かりやすくひとめで知りたいページへたどり着けるようなページにすべきです。

どうすれば、そういった見やすいページになるでしょう。
いちばん分かりやすいのは画像です。
その画像の下にページタイトル。
文字に見出しも設定しましょう。
さらに簡単な説明文を入れます。
これでそのページがどんなページなのか分かってもらえます。

さらに、それぞれのページがひと目で分かるように、並べておきます。
パソコンの画面では、横長に表示させたいので、フッタを作るでやった分割を入れて段を作れば良いですね。

テンプレートが使える

うーん、ちょっと面倒くさそうな感じですね。
はじめから、段組みとか見出しの設定とかやってもらうわけにはいかないでしょうか。
はい、用意してあります。
BiNDには、よく使うようなブロックの内容はテンプレートに用意してあります。
じゃあ、最初からそれ使えば良いんじゃないのとお思いでしょう。
私もやっちゃいましたが、見出しの使い方も段もましてやドレスとの関係も知らないまま、それを使うとどうなるでしょう。
一瞬で破綻します。
基本的な事を理解しないとテンプレートは使えません。
どうしてこうなった、が分からないとちょっとしたミスの修正さえできないからです。
ここまで、読んで来られた方は、そういった基本を理解されています。
ですから、テンプレートが使えるようになったのです。

テンプレートの使い方

それでは、基本を理解した上でテンプレートを使っていきましょう。
メインのブロックでブロックエディタを開いてください。
左下にある、ブロックテンプレートのボタンをクリックします。

ブロックテンプレートのウィンドウが開きました。
この中からテンプレートを選ぶとおおよその見た目がブロックエディタの中に自動的に入ります。
もちろん、文字や画像は一時的なものです。
具体的な内容は修正変更が必要です。

ブロックテンプレートウィンドウの左側がカテゴリーです。
スマートモードとエディタモードとありますが、あまり気にしなくて大丈夫です。
最終的には、いつものブロックエディタでの編集をやります。
今回は、インデックスですのでスマートモードの画像/ギャラリーから目次を選択します。
画像＋見出し＋段になってますね。
クリックで選択してから適用をクリックします。

見慣れないブロックエディタになりました。
これはスマートモードでテンプレートを使うとこのようになりますが、使いにくいの普通のに戻します。
左下のエディタモードのボタンをクリックします。
スマートモードに戻れませんとアラートができますので、はいをクリックします。

ブロックエディタに戻ってきました。
すでに分割やセンタリング、画像、文字が入力されています。
3段も設定済みですが、すべて何を意味しているか分かりますね。
これなら修正できるはずです。

内容を修正する

それでは、ブロックエディタを修正していきましょう。
１番上の灰色の四角は画像です。
これを変更します。
変更するのには、灰色をクリック、すると右側の表示が変わります。
画像を変更をクリックして、画像を選んでください。
OKでブロックエディタに戻り、画像にリンクも適用しておきます。
画像を変更のすぐ上、クリック設定をクリックしてください。
リンクを設定した時と同じものがでてきます。
移動させたいページにリンクを設定してください。

文字に移ります。
大見出しにページの名前を入力します。
もちろん、すでにある文字は消去します。
小見出しリードは使いません消去です。
その下本文にページの内容を簡潔に説明します。
さらに、その下にページへのリンクを作っておきます。

なかなかの作業でしたがどうでしたか
そうそうリンクのボタンも設定しておきましょう。
リンクをはるでやったものです。
右下のデザインをクリックし、開いたウィンドウでデフォルトを選んでOKです。

これで、このコーナーにある１ページ目の紹介ができました。
以降、同じように2ページ目、3ページ目を修正します。
4ページ以上ある時は、ブロックを増やして同様にテンプレートを選ぶか、ブロックを複製します。
ブロックの複製は、ブロックにマウスを合わせると左側に出てくるメニューから複製を選んでください。
ページの数が3の倍数にならない時は、テンプレートにはじめからあった内容を消去するだけです。
編集が終わったら適用クリックして変更を確定し、閉じます。
プレビューモードで確認しみましょう。
目次ができあがりました。

スマートフォンでの表示は、段の無い縦長になっているので違和感がありません。
これで、トップページの内容作りは終了です。
新しいコーナーがいくつかあって、そこにもトップページを作っている場合は、それぞれを編集してください。

今回、はじめてテンプレートを使いましたがいかがでしたか？
正直、編集作業的には、テンプレート無しでも変わらないと思います。
ただ、分割の線を忘れたり段の設定を忘れたり、見出しをつけなかったりとミスがあります。
そういったものがあらかじめあるのは、少し安心です。
また、ブロックエディタの使い方としてテンプレートから学ぶものもあったりします。
表現方法は、ものすごく多彩です。
たとえブロックエディタの中身がめちゃくちゃになっても、削除して最初からやり直せば良いだけです。
いろいろ、テンプレートを試してみるのはおすすめします。

次回は、ホームページを作ります。

素人がwebサイトを作るにはどうしたらいいか #11

BiNDというソフトを使った、初心者向けのwebサイト制作案内です。

第11回は”インデックスページの役割”です。

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp

前回のフッタ作りでページの全体像が見えてきましたが、ここでページ作りとは少し離れます。
今回のインデックスページは、webサイト作りに関係する部分です。
インデックスというページを作ります。

インデックスというページ

インデックスページについて説明します。
役割は、2つです。

1つめは、省略です。
インデックスページは、URLに書かなくて構いません。
省略できます。
例えば、宮田屋旅館のwebサイトは、http://miyataya.jpですが、このURLで表示されるのはhttp://miyataya.jp/index.htmlです。
末尾にあるindex.htmlがインデックスページのファイル名です。
そのディレクトリにindex.htmlというページがあれば、これを表示すると決められているためです。

ディレクトリ？
ディレクトリは、パソコンでいうフォルダと同じです。
たくさんあるページを階層的に分類するために作ります。
なんか面倒くさそうだなと思うかもしれませんが、放置するともっと面倒になるので、できるだけディレクトリで分けてください。

2つめは、目次です。
インデックスは、日本語で目次の意味です。
つまりインデックスページの内容は、目次となるものが適当です。
かつてのwebサイトはホームページとも言われていました。
ホームページは、最も上位のディレクトリにあるインデックスページのことです。
最も上位なので、webサイト全体の目次です。
したがって、そのページがwebサイトを表しているとも言えたために呼ばれたのではないかと思います。

インデックスページを追加

それでは、実際にBiNDでインデックスページを作っていきます。
今回は、ページを追加するまでにします。
インデックスページの内容作りは次回です。

BiNDを起動してください。
サイトシアターから自分のwebサイトを選択して編集を選び、このサイトを編集をクリックします。
まず、ページを追加します。
#5でやったやり方と同じです。
左側のページが並んでいる上、四角+をクリックして「空白ページを追加」をクリックします。

NewPageが追加されました。

名前を付ける

このページを最も上位のディレクトリにあるインデックスページ、そう「ホームページ」にします。
そのために、このページの名前を変更しましょう。
NewPageと書いてある右側の歯車アイコンをクリックしてページの設定を開きます。

ページの設定ウィンドウが開きました。
ここまで、ページを増やすでやったのと同じです。
同様にページ名にBiNDで表示する名前。
ページタイトルにブラウザで見た時の履歴やお気に入りで表示される名前を入力します。
ここは、ホームとするのが良いでしょう。
少し違うのは、この欄のもっと右側、ファイル名に「index」を入力します。
これで、このページがインデックスページとなります。
入力したら、適用をクリックします。

どうなりましたか？
以下のアラートが出ましたね。
インデックスページについて説明した通り、ひとつのディレクトリにはひとつのインデックスページしか置けないのでこうなりました。
実は、このwebサイトを最初に作った時に、自動的にインデックスページは作られていたのです。
大切ですから。
最も最初に作ったページがインデックスページとなっているはずですので、そのページの名前を変更します。

アラートをOKをクリックして閉じてから、設定のウィンドウも閉じるをクリックして戻ります。
プレビューの画面になりますので、さきほどと同様に左側のページがたくさん並んでいる所から最初に作ったページをクリックして選択。
表示された歯車をクリックして設定ウィンドウを開きます。
ファイル名が「index」となっていますので、これを消去してそのページの名前を何でも良いので入力します。

適用、閉じるとクリックしたら、改めてNewpageの名前を変更してください。
今度はいかがでしたか？
アラートが出ませんでしたね。
これで、ホームページが追加されました。
あなたのwebサイトのURLでこのページが最初に表示されるようになったのです。

ディレクトリを追加

次にディレクトリを追加します。
ディレクトリは、階層分けするフォルダのような役割をするものですね。
このディレクトリをBiNDではあらかじめ作っておけます。
ただ、ちょっとややこしいのはBiNDではディレクトリともフォルダとも言わず、コーナーといいます。
なぜこの名前なのかは意味不明です。
ですが、BiNDのコーナーとは、ディレクトリと同じと覚えるしかありません。
ディレクトリ＝コーナーです。

コーナーの作り方は、新規のページを作る時と同じ、メニューからコーナーを追加をクリックします。
簡単です。

新規コーナーを作成ウィンドウが開きました。
ここで名前を入力します。
コーナー名がBiNDで表示される名前です。
インターネットのURLになるディレクトリ名を入力します。

コーナー名の付け方

コーナー名はいい加減に入力してはいけません。
その下に分類するページすべてが分かる名前にしてください。
カテゴリーとなる名前です。
鯛とかヒラメとかのページを分類するならコーナー名は「魚」
コーヒーや紅茶ページだったら「飲料」、米や麦とかだったら「穀物」のような感じです。

なぜ、そのようなコーナー名にするのか？
ひとつは、メニューになるかもしれないからです。
メニューをヘッダに作りましたが、すべてのページをあのスペースには表示できません。
ページが多くなったら、ページを分類して、その分類した名前を表示させた方が分かりやすいですね。
この名前がコーナー名です。
かなり目立ちます。

もうひとつは、パンくずリストに表示されるからです。
パンくずリストというのは、ページの上の方にあって、ホームから始まるディレクトリを追って、今見ているページまでの階層を表示するのもです。
ホーム>フルーツ>パパイヤ
といったものを見た事があると思います。
このパンくずリストにもコーナー名が表示されます。
いい加減にすると見に来た人が混乱します。

ディレクトリ名のほうは、それほど神経質にならなくても良いですが、ある程度はコーナー名に近い半角の英数字を入力してください。

OKをクリックするとコーナーが追加されます。
左側のページが並んでいる所にフォルダのアイコン付きでコーナーが入っています。

リストを整理する

このままではこのコーナーは空です。
分類したいページをコーナーに入れていく必要があります。
入れ方は、コーナーに分類したいページをこのリストでクリックして選択、それをコーナーまでドラッグしてください。
ドラッグは、マウスのボタンを押したまま移動させる事です。
ドラッグさせていくと、コーナーのところで名前の前に+が表示されます。
そうなったら、マウスのボタンを押すのをやめます。
これで、コーナーに分類できました。
分類したいページすべてをドラッグしてコーナーに入れてください。
コーナーに入ったページは少し右側に名前がずれるのでわかります。

はい、新しいコーナーにページが分類されました。
ネットとしては、新規ディレクトリにページが分類されたことになります。

各コーナーにもインデックスページを作る

新しいディレクトリができたということは、URLでこのディレクトリまで指定した場合、表示されるのはこのディレクトリの中のどのページでしょう？
正解は、どれも表示されません。
厳密には、ディレクトリにあるファイル名が表示されますが、いかにも素人って感じです。
また、このディレクトリの目次のようなページも必要です。
そうですね、インデックスページを追加しましょう。
インデックスページはwebサイトのトップにあるホームページだけではありません。
ディレクトリを作ったら、各ディレクトリに追加します。

BiNDでページを追加してください。
インデックスページを追加したいコーナーをクリックしてから追加します。
または、追加したいコーナーを選んで追加をクリックします。
名前の変更ウィンドウを開いてください。
名前を入力します。
ページ名は、コーナー名＋トップ
ページタイトルはwebサイト名＿コーナー名+トップにします。
そして、ファイル名は、もちろん「index」です。

適用、閉じるとクリックしてインデックスページが追加されているのを確認します。

以上でインデックスページを作るは終了です。
次回は、今回作ったインデックスページの内容を編集します。

素人がwebサイトを作るにはどうしたらいいか #10

初心者向けに、押さえたいコツと実践的な方法を紹介しています。

第10回は”フッタを作る”です。

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp

前回は、ヘッダを作りました。
ヘッダとともにロゴも作りました。
今回は、フッタを作っていきます。
フッタは、#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段に変更するのも忘れずに。

適用と閉じるで戻り、プレビューを確認しておきます。

これで、フッタは完成です。

察しの良い方は、ヘッダとフッタを共有しておけば良いのかなとお思いでしょう。
大正解です。
これまで作ったページのヘッダとフッタに今回作ったものを、ブロックの共有に登録して設定してください。
共有はブロック単位ですので、ブロックを追加しながら設定します。

次回は、インデックスを作る、です。

素人がwebサイトを作るにはどうしたらいいか #9

初心者向けに、押さえたいコツと実践的な方法を紹介しています。

第9回は”ヘッダを作る”です。

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp

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サイトにあうように加工できます。
これだけで、やりたいと思う事はできると思いますので、ぜひ活用してください。

次回は、フッタを作る、です。

素人がwebサイトを作るにはどうしたらいいか #8

初心者向けに、押さえたいコツを中心に実践的な方法を紹介しています。

第8回は”ブロックを共有”です。

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp

今回のテーマは、ブロックの共有です。
そのままです、ブロックを共有します。
ブロックとは、これまでやってきた通り、ブロックエディタで編集する部分ですね。
ページの中に見出しでいうタイトルで分けて作っていったものです。
#5でやりました。
このブロックを共有できるように設定します。

ブロックを共有する理由

なぜ、共有するのかを説明します。
前回、#7でメニューを作りました。
メニューは、各ページの同じ場所にあるのが親切と解説しました。
前回のページだけではなく、別のページにも当然設置しなくてはいけません。
どうやって設置すべきか？
パソコンの操作に慣れている人なら、コピーしてペースト(貼り付け)すればと考えるでしょう。
それでもできます。
できますが、webサイトに変更があった時、どうしますか？
webサイトは、割と変更が多いです。
ページもどんどん増えていきます。
メニューに増えた部分のリンクを作りたくなります。
すると、メニューの内容が変わりますね。
100ページ、コピー＆ペーストしてメニューを作ったら、また変更後の内容で100ページ同じ事をしなくてはいけません。
やれません、やる気もありません、webサイト放棄します普通。
そこで、ブロックの共有を使います。
1度ブロックに共有の設定をすると、ブロックの内容を変更した時、変更の内容は共有しているすべてのブロックに反映します。
100ページに共有ブロックを設置してあれば、そのうちの１ページの中の共有ブロックを変更すると100ページ全部、変更後の内容になります。
とんでもなく便利な機能です。
多くのwebサイト作成サービスに実装されている機能ではありますが、BiNDのブロックで編集するやり方とブロックの共有がすごく相性が良いので、非常に使いやすいです。
この機能だけでもBiNDを買う価値があります。

ブロックエディタを表示する

それでは、実際にブロックの共有を設定してみましょう。
BiNDを開きます。
ヘッダでブロックエディタを表示させてください。
表示のやり方は大丈夫でしょうか。
すべての手順をすべて覚えようとすると覚えられません。
手順はたくさんありますから。
そうではなく、自分が今、何をするのかを覚えれば操作できます。
今は、ページを編集するのですから、編集というボタンがでたらクリックすれば良いのです。
パソコンの画面にヒントが出ているみたいなものです。
良く画面を見て、ブロックエディタを表示させてみましょう。

共有にする

ブロックエディタが表示できたら、ウィンドウの右側、三角マークに、なし、と書いてあるところをクリックしてください。
プロックを共有にするというメニューが出るのでクリックします。

共有ブロック名の入力が表示されます。
ここに、ブロックの名前を入力します。
分かりやすい名前にしてください。
例として「メニュー」を入力しています。
もっと細かい名前でも構いません。
「ヘッダ内横長メニューサイト全体用」くらい分かりやすくても良いです。
決して「共有1」とかにしないでください。
名前を入力したらOKをクリックします。

はい、ブロックが共有されました。
簡単ですね。
さっきの右側の三角マークに入力した名前が入っていると思います。
そして、ブロックエディタが緑色になりました。
この緑色が共有しているブロックの合図です。
最初に説明した通り、ブロックを共有すると、このページだけではなく共有しているブロック全部で同じ内容になります。
ですので、この緑色が表示されたら、少し慎重になりましょう。

共有ブロックを設置

違うページにこの共有ブロックを設置します。
今のブロックエディタを閉じたら、ウィンドウ左側のリストで共有ブロックを設置したいページをクリックして移動します。
ページの構造が表示されている画面になったらヘッダへマウスをもっていき、出てきたメニューの編集をクリック。
ブロックエディタが表示されました。
ここは、なにも入力していないので、空白です。
このまま、さきほどと同様に右上の三角マークと「なし」と書いてあるところをクリックします。
すると今度は、さっき共有したブロックの名前が下のほうに表示されています。
これをクリックします。

アラートがでますので、はいをクリック

ブロックエディタの内容が書き換えられました。
そして、このブロックは共有した内容と同じになりました。
このようにして今まで作ったページに共有ブロックを設定していきます。

ブロックエディタを閉じて、ウィンドウ上部の編集を終了するをクリックしプレビューモードにしてみます。
メニューが表示されました。

めちゃくちゃ便利ですね。

変更はどのブロックでもOK

共有したブロックですが、内容を編集する場合、どのブロックで編集すれば良いでしょう。
どのブロックでも編集できます。
最初に設定したブロックでなくとも、共有しているブロックならどこでも構いません。
もちろん編集した内容は、すべての共有しているブロックに反映します。
自由度が高いです。
ちょっとここだけ変えよう♪　なんていつもの調子で編集したら共有ブロックだったなんて事があったりましす。
気付かないでそのまま公開してしまいました、私は。
ですので、ブロックエディタが緑色になっていたら、ちょっと待てよ、共有ブロックだぞと慎重に編集してください。

たまに、共有はしたくないけどブロックは使いたい事があります。
その時は、共有を設定した時と同じ三角マークのメニューの下に、共有を解除、があるのでそれをクリックします。
すると、そのブロックは共有されなくなります。
ブロックエディタに共有していた時の内容はそのまま残っていますが、編集しても他のページに影響しません。

今回は、メニューを共有しました。
このように便利な機能なので、他のブロックにも応用できます。
ヘッダやフッタはほとんど共有です。
その他にも、季節のバナー広告を各ページに設定するとか、パンくずリストを表示する、といった内容のブロックを共有するなど使いみちがたくさんあります。

以上で共有ブロックの便利機能を紹介しました。
次回は、ヘッダを作る、です。

素人がwebサイトを作るにはどうしたらいいか #7

全くwebサイト作りの経験の無い方向けにその作り方を紹介しています。

第7回は”メニューを作る”です。

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp

前回では、文字にリンクを設定しました。
今回のメニュー作りは、そのリンクの応用です。
ですのでリンクが分かっていれば、できたも同然。
分かってなかったら、すみません、もう1度#6を読んで理解しておいてください。

メニューとは

簡単にメニューについて説明しておきます。
webサイトを作っていくと、ページがたくさん増えます。
たくさん増えたページへのリンクをまとめたものがメニューです。
リンクが1ヶ所にあれば便利ですもんね。
メニューの場所は、ページの最初、上の方に置きます。
多くのwebサイトがそうしてますので、変な所にあっても見に来た人が迷うだけです。
ですから妙なこだわりは捨てて、シンプルに上の方ですぐ分かる場所にしてください。
#1で紹介した、ページの構造を思い出してください。
ページの上の方にあるのは、ヘッダ。
そうです、メニューはヘッダに入れます。

スマートフォンでの表示や、ちょっとしたコツは実際に作りながら説明したいと思います。
では、メニュー作りを始めましょう。

ブロックエディタを表示

BiNDを起動します。
いつものブロックエディタを表示するまでの手順です。
そろそろ覚えてしまっているかもしれませんが、一応説明します。
サイトシアターが出たら、webサイトのアイコンの編集をクリック。
このサイトを編集をクリック。
プレビュー画面になったら、ウィンドウ上部の編集するボタンをクリック。
ページの構造が表示されたら、1番上のヘッダにマウスを合わせて、出てきた左側のメニューの編集をクリックします。

ブロックエディタが出てきました。

メニュー項目を入力

メニューとして表示したい文字を入力していきます。
改行しながら入力してください。

入力が終わったら、リンクを作ります。
#6のやり方です。
リンクにしたい文字を、カーソルをドラックして選択状態にしたら右側のリンクをクリック。
リンク先からリンクしたいページを選びます。
すべての文字にリンクを設定してください。

メニューにする

リンクができたら、メニューを作ります。
最初に、今作ったリンクをすべて選択します。
全部のリンクをなぞるようにカーソルをドラックするか、編集メニューからすべて選択をします。
リンクが灰色の選択状態になったら、ブロックエディタの上にある、メニューのスタイルをクリックしてください。
スタイルが表示されました。
この中からメニューの見た目を選びます。
好きな見た目を選んで構いません。
例としてシンプルカラー(小)の中央揃えにしてみます。

ブロックエディタでの表示が変わりました。
今まで本文となっていた所が色付きのAになりました。
このAはメニューのスタイルを表しています。
別のスタイルを選ぶとアルファベットが変わります。
また、ブロックエディタ内のメニューが細い線で囲まれたと思います。
この線の内側が1つのメニューとしてまとめられた部分です。
ですから、後からリンクを付け足しする時も、この線の中に入るように入力してください。

はい、これでメニューが完成です。
ブロックエディタ右下の適用をクリックして今回の変更を確定してください。
しばらくお待ち下さいが消えたら、その横の閉じるをクリックします。
ページの構造の画面に戻りましたので、ウィンドウ上の編集を終わるをクリックしてプレビュー画面にします。

完成

ヘッダにメニューができました！
#2で紹介したドレスが設定されているので、すでに見た目も違和感の無いものになっています。

それでは、スマートフォンでの表示も確認しておきましょう。
プレビュー画面の右上、スマートフォンっぽいアイコンをクリックして表示方法を変えます。
いかがでしょう。
すっかりメニューは消えましたね。
代わりに3本線の正方形が出てきました。
そうです、スマートフォン表示にすると、メニューは自動でスマートフォン用に置き換えてくれるのです(便利)
私達は、何もする必要ありません。
この3本線をクリックすると、スマートフォンでタップした時の表示のされ方が確認できます。

パソコン用の表示に戻します。
さっきのスマートフォンっぽいアイコンの隣、パソコンっぽいアイコンをクリックします。

メニューの見た目を変える

できたメニューのスタイルを変えてみましょう。
まず、ヘッダのメニューを作ったブロックエディタを表示します。
やり方は…大丈夫ですね。
ブロックエディタが表示されたら、メニューのリンクが線で囲まれている内側にカーソルをもっていきます。
リンクの横辺りをクリックする良いでしょう。
すると、ブロックエディタの上、メニューのスタイルのアイコンが黒く反転しました。
ここをクリックしてスタイルを表示させます。
先程と同様にスタイルを選びます。
例として角丸の中央寄せにしてみます。
ブロックエディタのメニューのところにあるアルファベットが変わりました。
変更を適用してプレビューに戻ってみましょう。
見た目が変わりました。

このように簡単に好きな見た目に変えられますので、いろいろ試してみてください。
少し動きのあるメニューが良いときは、モーションメニューから選びます。

メニューは、見に来た人が頻繁に使うものなので重要です。
見やすさもさることながら、できるだけ手順を少なく探しているページにたどり着けるようにすると親切です。
そのための設定がいくつかあります。
階層構造にするとか、常に表示するようにするとかです。
これらもそれほど難しくなくできますが、それにこだわり過ぎてしまうと肝心のwebサイト作りが滞ってしまいます。
ですから、今回はここまでをメニュー作りとします。
気になる所の調整は、webサイトが完成してから説明したいと思います。

次回は、ブロックの共有、について説明します。

素人がwebサイトを作るにはどうしたらいいか #6

初めての方にも分かりやすく、順をおってwebサイトの作り方を紹介しています。

第6回は、”リンクをはる”です。

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp

前回までで、ページを作り、内容を増やしました。
今回は、リンクについてです。
リンクがどういったものかは説明不要かと思います。
クリックしたりタップすると別のページへ移動するしかけですね。
リンクは、多くが文字にありますが、画像であったりボタンにあったりします。
インターネットがパソコンだけの時は、文字で問題ありませんでしたが、スマートフォンに適したリンクの表示も必要です。
リンクの設定、その表示を作っていきます。

ブロックエディタを開く

BiNDを起動してください。
サイトシアターが表示されたら、webサイトのアイコンの編集、このサイトを編集するとクリックします。
今まで作ってきたページが表示されました。
ウィンドウ上部の、このページを編集、をクリックして、ページの構造が見える編集モードにします。
リンクを設定したいブロックへカーソルをあわせて、左側に出るメニューから編集を選びます。
はい、ブロックエディタが開きました。
文字で書くと長いですが、10秒くらいの作業時間です、覚えてしまった方が早いです。

リンクの位置

ブロックエディタで、リンクを作りたい場所にカーソルもっていきます。
リンクが作られる文字を入力して、その文字の先頭から最後までカーソルをドラッグして選択状態にします。
ドラッグは、マウスのボタンを押したまま移動させる事です。

リンクはこの選択された文字に作られます。
ですので、いままで入力してきた文字も、選択状態にすればどこにでもリンクは作れます。
ただし、いきなりリンクがあってもなんのリンクかよく分かりませんから、どのページに進むリンクなのか分かる文字にすべきです。
また、リンクの位置もよく分かる場所が適当です。
ブロックエディタの上部からセンタリングを選んで、選択した文字だけ真ん中に移動させます。

リンクを設定する

では、実際にリンクを作ります。
ブロックエディタの右側、アイコンがたくさん並んでいるところから、リンクのアイコンをクリックしてください。

はい、これでリンクになりました。
簡単ですね。
ただ、このリンクがどういう働きをするのか設定が必要です。
それは、いま選んだブロックエディタ右側のアイコンがたくさんあった場所で設定します。
リンクを作ると、今までと見た目が違っていると思います。
ここで様々な設定をします。

まず、どのページに移動するのか指定しましょう。
右側のリンク先と書かれた下の枠、右側の三角をクリックします。
すると、このwebサイトの名前があります。
ここにマウスを合わせると今まで作ったページが表示されます。
移動させたいページをクリックしてください。

リンク先が設定できました。
BiNDはこの辺りは秀逸なんですよね。
webサイト内でのリンクはこのように超簡単です。

webサイト内でのリンクは上の方法ですが、インターネットの全く別のページへ移動させたい事があると思います。
その場合のやり方です。
移動先の設定は、上と同じ場所でやります。
違うのは、リンク先を三角から選ぶのではなく、枠の中にURLを直接入力します。

これでリンク先の設定ができました。

新規ウィンドウでリンク先を開く

このリンクは、クリックするとページが移動しますが、移動先のページは今ブラウザに表示されているページを書き換えて表示します。
つまり、今見ているページはブラウザの戻るボタンをクリックしないと見れません。
そうではなく、リンク先のページは、新たなウィンドウやタブに表示したい場合があると思います。
そういった時の設定です。

先程、URLを入力した下のほうにターゲットというボタンがあるのでクリックしてください。
ターゲットウィンドウが開きました。
これが、リンク先のページをどのように開くかの設定です。
ターゲットという枠の右側の三角をクリックするとメニューがでます。
ここから、_blankをクリック、OKをクリックします。

この設定で、リンク先のページは新たなウィンドウに表示されます。
他にも設定がありますが使いません。
新たなウィンドウで開きたい時は、blank。
それ以外の場合は、設定不要です。

では、ブロックエディタの適用をクリックして今回の変更を確定してください。
しばらくお待ち下さいが、消えたらその横の閉じるをクリックします。
ウィンドウ上の編集を終了するをクリックしてプレビューモードに戻ります。
リンクを作った文字にポインタを合わせると、文字の色が変わると思います。

リンクを見やすく

リンクができたはできましたが、これがリンク？って感じですね。
文字の文言からなんとなく分かる程度です。
パソコンならこれでも良いと思いますし、文中に出てくるリンクならこのままで構いません。
ただ、スマートフォンではスルーされるでしょう。
されなくても、タップしずらいです。
ですので、もっとタップしやすく、見やすいリンクに変更します。

変更するには、画像を用意するパターンが多いです。
画像のリンクはわかりやすいです。
慣れてきたら画像を使っても良いでしょう。
今回は、もっと簡単にスタイルシートを使います。
スタイルシート？…どこかで聞いたような、そうです、ドレスの元ネタですね。
ドレスも簡単でしたが、今回も難しくありません。

ここまでやってきたリンクを設定するところまで操作してください。
ブロックエディタが表示されましたか？
先の設定でブロックエディタの中にリンクができています。
まず、これをクリックします。
四角の枠に緑の縁取りができて選択されていることが分かります。
これをすると、右側のところの表示変わって、設定が現れます。
ここの１番下、デザインと書いてある枠の横の三角をクリックします。

リンクのデザインウィンドウが開きました。
下の方にいろいろ細かくありますが、ここはいじらないで。
はじめに、class名の横の枠の三角をクリックして出てきたメニューから.btn-defaultを選びます。
こういう訳のわからん英語はいらんのですが、ここだけです。
何をしているのかというと、今後、見た目が同じリンクのデザインを作ったほうが良いので、その時にこのclassから.btn-defaultを選ぶと同じのになるよ、ということです。
ですから、今回はデザインを選びますが、以降はclass名から.btn-defaultを選択するだけです。

では、デザインを選びましょう。
その横のテンプレートをクリックします。
いろいろ出てくると思いますので、お好きなものを選びます。
選んだら、OKで前のウィンドウに戻り、保存をクリックします。
ブロックエディタに戻ったら適用をクリックして今回の変更を確定。
閉じてからプレビュー画面にてください。

リンクがボタンに変わりました。
このウィンドウの右上にあるスマートフォンっぼいボタンをクリックしてスマートフォンでの表示を確認しましょう。
タップしやすくなりましたね。

以上で、リンクをはるは終了です。
次回は、メニュー作りをします。

最終回は、”アップロードする”です。

なぜサーバーにファイルをコピーするのか？

設定ウィンドウを開く

サーバー情報を入力する

SEO対策は必要なし

検索サイト向けの設定はしておく

アップロードする

最後に

第14回は最終仕上げ、”微調整をする”です。

文字の大きさは無視する

ドレスの編集ウィンドウを開く

文字サイズはem

メニューを固定する

余白を調整する

段の幅を調整

文字を重ねる

第13回は、”ホームページを作る”です。

6秒ルール

スライド画像の作り方

ブロックの横幅を変更

タイトルを追加

新着情報を入れる

第12回は”インデックスページの内容を作る”です。

前回のおさらい

ブロックを共有しておく

共有ブロックを設置

トップページは目次

テンプレートが使える

テンプレートの使い方

内容を修正する

第11回は”インデックスページの役割”です。

インデックスというページ

インデックスページを追加

名前を付ける

ディレクトリを追加

コーナー名の付け方

リストを整理する

各コーナーにもインデックスページを作る

第10回は”フッタを作る”です。

上へ戻るボタンとは

タグについて

戻るボタンを挿入

タグを修正

サイトマップの作り方

分割は段

分割を設定

リアル情報の追加

第9回は”ヘッダを作る”です。

ヘッダはロゴ

ブロックを追加する

ロゴ作りはサポートソフトを使う

ソフトを起動する

テンプレートを編集

枠を合わせる

第8回は”ブロックを共有”です。

ブロックを共有する理由

ブロックエディタを表示する

共有にする

共有ブロックを設置

変更はどのブロックでもOK

第7回は”メニューを作る”です。

メニューとは

ブロックエディタを表示

メニュー項目を入力

メニューにする

完成

メニューの見た目を変える

第6回は、”リンクをはる”です。

ブロックエディタを開く

リンクの位置

リンクを設定する

新規ウィンドウでリンク先を開く

リンクを見やすく