ホームページ作成講座 応用編

6月に引き続き、ホームページ作成講座の応用編の講師依頼を頂きました。
その際のテキストの目次と、実際の講座内容の覚書です。
募集要項としては、PC操作ができ、Wordなどの操作ができ、HPをすでに持っているなど、HPの基礎がわかっている方向けの応用編です。実際、6月の基礎編にも参加していただいた方が数人、今回もお見えになっていました。
環境は同じく、Windows7とHPビルダー18を使用しています。

以下テキストの目次です。ページ数は60ページくらいでした。

○●Lesson1●○
リスト項目の編集
1》リスト項目の変更
2》リスト項目の削除
3》リスト項目の複製
4》リスト項目の順序の入れ替え
5》項目のリンクの変更
6》リスト項目の追加に関する注意事項
7》バナースペースのリンクを変更する
○●Lesson2●○
画像の編集 応用編
1》画像のサイズを編集する 「合成画像の編集」
2》画像のサイズを編集する 「ウェブアートデザイナー」
3》画像サイズを縮小する 「縮小専用AIR」
○●Lesson3●○
ソースの編集(商品詳細の追加と削除)
1》商品詳細の追加
2》商品詳細の削除
3》コメントアウトを使った非表示
4》見出しの適用
5》ソースをコピーする際の注意点
6》文章を貼り付ける
○●Lesson4●○
CSSの基礎
1》スタイルを指定できる要素
2》表のスタイルをCSSで指定する
3》文字部分へのスタイルの設定
4》書式設定の方法
○●Lesson5●○
公開前にしておきたいこと
1》地図の作成
2》QRコードの作成
3》SEO対策
4》電話番号にリンクをつける
5》作成済みページをサイトとして登録する

今回は、実作業を多く取り入れることにしました。
6月の講習にに参加していた方もいらしたので、その後実際作成したとして、作りながら不便に思う点についてを重点的に補足していく感じですかね。
私個人はHPビルダーを2000というバージョンから使用していますが(調べたら、これ、バージョンとしては4にあたるそうです。ほぼ毎年新しいバージョンが発売され、今年の10月には20が発売されると思います)初心者がHPを作成するにはとても良いソフトだと思います。
ですが、自分のこだわりが出てくる中級以上になると、あれをああしたい、これをこうしたいといった要望の実現が大変になるんですね。
初心者の時はなんとなく、ソフトで作ったものの部分を差し替えてなんとか作るんですが、もっと細かい部分を修正しようとするとどうしてもHTMLソースやCSSを読み解いたり、編集したりする必要があるし、その部分はHPビルダーとしてサポートの対象外だったりするので・・・。

全部とはいきませんが、作り始めてまず最初に躓きそうな部分を中心に応用編を構成してみました。
これができれば、まぁまぁ自分が作りたいページに近づくのではないかな、と。
今回はビルダーのバージョンが18だったので、レスポンシブデザインについては口頭での説明のみになりましたが、これからサイトを作成する方には、すべてのテンプレートがレスポンシブデザイン対応になっているHPビルダー19の購入、または、秋まで待って20の購入をおすすめしました。

2015年7月21日 | カテゴリー : HPビルダー | 投稿者 : なべ先生

ホームページ作成講座 基礎編

中小企業の初心者向けのホームページ作成講座での講師の依頼を頂きました。
6月に、3時間×2回にわたって行った座基礎編について、どんな内容をやったのか、書いておきます。
対象者は、PC操作ができて、Word程度の操作ができる方。HP作成に関しては初心者を対象としています。
Windows7にHPビルダー18がインストールされた環境での実施でした。

特に要請があったわけではないのですが、前職で使用していたテキストがあったのと、自分がやりたいようにやりたかったので、テキストは自作しました。前職のテキストも自作だったので、それをベースにしています。

ただし、前職ではマンツーマンでの指導だったので、今回はセミナー用に、一般向けのテキストにすることと、7月に応用編が予定されていたので、ちょっと高度な内容は応用編に回すことにしました。

で、作成したテキストの目次がこんな感じです。

○●Lesson1●○
ホームページの基礎知識
1》ホームページの「ソース」って何?
2》Webブラウザって何?
3》ブラウザでホームページを表示する仕組み
○●Lesson2●○
作成前に知っておきたいこと
1》著作権について
2》商用利用と団体利用について
3》ファイル名には半角の英数小文字を使う
4》本文であっても半角カタカナは使用しない
5》機種依存文字・環境依存文字は使用しない
6》ファイル名や保存場所を勝手に変更しない
7》拡張子を変更・削除しない
8》ファイルサイズに注意する
○●Lesson3●○
画像データの取り扱いについて
1》「元画像は加工しない」
2》「拡大しない」
3》「縦横比を変えない」
4》画像ファイルの種類と特徴
○●Lesson4●○
ホームページの公開方法について
1》ホームページを公開する場所
2》トップページのファイル名
3》ファイルの名前や保存場所と転送場所
○●Lesson5●○
作成方法の選択
1》フルCSSテンプレートとWordPressテンプレート
2》それぞれの特長とメリット・デメリット
3》ホームページビルダーの画面構成
○●Lesson6●○
フルCSSサイトの新規作成と編集
1》フルCSSテンプレートからサイトを作成する
2》基本情報の修正をする
3》共通部分の同期
4》ページの編集
5》文字の編集と段落(フォーカス枠)
6》新しい段落(フォーカス枠)の作り方
7》見出しの適用
○●Lesson7●○
TOP画像の加工と編集
1》TOP画像を編集する(写真の追加と編集)
2》TOP画像を編集する(文字の追加と編集)
3》TOP画像を編集する(図形の追加)
○●Lesson8●○
画像の挿入と回り込み
1》画像の差し替え
2》画像の挿入
3》回り込み(スタイル使用)
4》回り込み(スタイル未使用)
5》代替テキストとタイトル
○●Lesson9●○
リンク
1》ページへのリンク
2》URLへのリンク
○●Lesson10●○
表の作成
1》表の挿入
2》表のツールバーの表示
3》スタイルを適用した表の作成
4》表作成の注意事項
○●Lesson11●○
サイトの管理
1》サイトとは?
2》仮のサイトを作ることのメリット
3》起動時にサイトを開く方法
4》ファイルの移動・削除・ファイル名の変更
5》サイトのチェック
6》サイトの転送
○●Lesson12●○
検索サイトへの登録
1》HPビルダーの機能を使った登録

テキストは表紙などを含めて70ページちょっと。前のテキストからは半分以上差し替えだったので、作るのは大変でしたが、当日セミナーで説明するにはとても便利でした(と、自画自賛)

基本がHP初心者向けなので、まずはHPって何?というところから。
その他に、初期費用がどれくらいかかるか、維持費はどれくらいかかるか、自分で作成するとその後の更新はどうすればいいか、など。
初日の1時間半近くは眠くなりそうな講義中心でしたが、後半は実際HPビルダーを使用してサイトを作成するところをやってもらいました。
写真を差し替えたり、ロゴを作成して入れたり、連絡先をご自分の会社のものに変えたりして、仮ですが、自分がサイトを作るとしたら、のイメージづくりには役に立ったかな。

2日目はページ内の編集中心で、商品写真を入れたり、文章を追加したりという実際に作成したら発生するであろう作業が中心になりました。センターのPCを使用しましたが、希望者にはUSBメモリ等で会社の商品の写真などをお持ちいただき、実際にページにあてはめたりもしてもらって、その時にどんなことに注意するか、などを話しながらでした。そんなに大きな会場ではなかったのと、サポートの先生が来てくれていたので、作業自体はどの参加者の方も問題なく進んだと思います。
7月には応用編を予定しています。

2015年6月15日 | カテゴリー : HPビルダー | 投稿者 : なべ先生

WordPressでユーザー様に今後の更新をしていただく手法

教えて!なべ先生!のHPはHPビルダーVer.19のWordPressテンプレートを使用して、デザイン部分を作成し、日々のブログの更新はWordPress側から追加しています。

現在作成中のVieniVieniのHPも同じ手法で作成しています。
これは、今後の更新をお店サイドでやっていただくためなんですね。

HP作成を会社等に頼むと、

初期費用が安い
HP作成費用は安く、その分毎月の管理費がかかる。大幅なページ更新・追加は別料金
HP作成料のみだが、割高
作成しかしないので、あとの更新は自分でやってね、のデザイン買い切り型。月々の費用は発生しないが、更新などは自分で。大幅な更新や追加はやはり別料金

導入は安いけど、月々の管理費を払うか、導入は高いけど、あとは自力でランニングコストを抑えるか。
でも、自力と言われても、HPの知識なんかないし、どうすればいいの?という方にはWordPressがちょうどいいのです。
なべ先生のページはブログを使用していますが、商品やメニューを追加・更新したい職業の方も、最初に設定さえしておけば、ブログ感覚で追加・更新・削除などができるんです。

HP作成といわれるとハードルが高いけど、文字打ちくらいならできる!という方は、多いと思います。実際自分でブログをやられている方とか、facebook等使用されている方も多いと思いますので、その感覚で更新していただければ良いのです。
しかも、最初にカテゴリを登録しておけば「夏の新メニュー」を「季節のおすすめ」と「新着情報」に同時掲載したり、TOPページに「季節のおすすめ」が更新されたことを通知する文章を出したり、そのまま内容を出したりすることもできます。
カテゴリ分けをしておけば、のちに自分自身やHPを見にきた方が興味のあるカテゴリの内容をまとめて確認することもできます。
HP作成の知識がなくてもページの更新ができて、更新する方も見に来た方もわかりやすいページ作成ができるので、今後もしばらくはWordPressを使用したHPが活用されることでしょう。

さて、ここからは覚書です。
WordPressでブログ等を更新する際に、初期設定のタグだけではちょっと・・・という場合。
プラグインでタグを追加できます。その方法は以下。
まずプラグインの新規追加で「AddQuicktag」を検索してインストール、有効化します。
次にこちらのサイトから
http://wp-material.net/addquicktag/
addquicktag_material_1.0.json
というファイルをダウンロードし、プラグインの設定画面からインポートすると、テキスト画面に「dl」や「dd」のボタンが出現します。これでページの上のほうに書いたような説明付きリストの挿入も楽々!

HPビルダーVer.19とWordPressを使ってサイトを作成してみよう。

って、それでできたものがこのページなんですけどね。

なべ先生はHPビルダー2000(たぶんVer.で言い換えると4かな)から、ずっと愛用しています。
初めてホームページを開設したのは、平成12年2月2日のことでした。
当時父親がカラオケスナックを経営しており、そこのホームページが欲しいと言われたのが始まりです。(この後も、父は無茶ぶりをし続け、それに応えていくうちにできることが増えたので、ある意味今日のなべ先生が居るのは父のおかげかもしれません)

ソフト自体はとても使いやすいと思います。初心者でも簡単に!とのことで、過去には
「どこでも配置モード」
「ホームページビルダー・クイック」などを搭載し、評判がアレなまま消えていきましたが、本家のソフトはとっても良くできていると思いますよ♪

今回Ver.19では、新たに「ホームページビルダーSP」とやらが搭載されました。ドラッグ&ドロップでページが作れる!レスポンシブデザインにも対応!」ということで華々しくデビューしましたが、さてさて、どうなることやら・・・・・。

HPビルダーVer.19のSP、触ってみましたが、やはり簡単に作れる分、自由度が下がるかなと。まったくの初心者が作るには良いのかもしれませんが、自分の好きに変更したい人には向かないかもしれません。
地図も、クラシックなら細かい設定ができて、地図の中心点をずらしたり、マーカーを付けたり、マーカーに文字を表示したりできるのですが、SPモードだとその辺の細かい設定はできませんでした。
ただ、SPは今回初めて搭載されたモードなので、今後に期待でしょうか。
フルCSSテンプレートも、最初のころから比べると格段にきれいに、使いやすくなっていますしね。

というわけで、今回はVer.19クラシックで、WordPress(以下WP)テンプレートを使用して作ってみました。

以下自分用の忘備録

レンタルサーバ内に、先にフォルダを作成し、そのフォルダにWPをインストールすることで、複数のWPサイトを管理できる。
ロリポップの場合、ロリポップのユーザー専用ページから「簡単インストール」でWPを先にインストールしておくと設定が簡単。
データの保存場所は以下の通り
「C:\Users\(ユーザー名)\AppData\Roaming\Justsystem\Homepage Builder Version 19\wordpress\wpsite(作成日時)」
なべ先生のHPは、WPテンプレートにあるものを使用していますが、テンプレートにあったものはポイントとなる色が全部Greenだったので自分のHPのテーマカラーである青に全部書き換え。
その際、リストマーク等で使用されている画像を、上記のデータ保存場所から呼び出して色を変更して保存。
変更にはHPビルダー付属のウェブアートデザイナーを使用し、ファイルはそのまま上書き。
その後、CSSで色コードを検索し、Greenの部分をそれぞれ「置換」で自分の使いたい青に変更。
これをすることで、スマホから表示するときのメニューの色なども変更できた。
結構手間はかかっているが、その分納得のいく形になったので満足。
ただし、これらの変更は一切HPビルダーでサポートされていないので、変更は自己責任で!!