マニュアル ホームページ ビルダー 18 編 本書について本書は ホームページ ビルダー 18 を使用しているものとして解説しています 表記について OS 画面 Windows 7 上で使用しているものとして解説しています ホームページ ビルダーは スタンダード スタイルの 標準 モードで使用しています 画面は 主に 1024 768 ピクセル ( ドット ) で使用しています お使いの OS やディスプレイの設定によっては 画面表示や画面の大きさ OS の操作が本書と異なる場合があります マーク 表記 メニュー名 コマンド名 ダイアログボックス名 ダイアログボックス内のタブ名 項目名は [ ] で囲んで表記しています ダイアログボックス内のボタンは OK のようにグレーので表記しています Web 画面内のボタンは ファイルを選択のようにで表記しています コマンド名が階層になっているときは - でつないで表記しています 参照の記載紹介している機能に関する説明が ホームページ ビルダー 18 に付属の入門編 PDF マニュアルやテクニック編 PDF マニュアルにある場合は 次のように参照先を記載しています 表記例 説明 入門編 PDF 7-22 アクセス地 入門編 PDF マニュアルを参照する場合は 入門編 PDF というマークに続けて ページ番号とタイ 図を設定する トルを記載しています テクニック編 17.2. 安心バック テクニック編 PDF マニュアルを参照する場合は テクニック編というマークに続けて タイトルを記 アップ 移行ツール 載しています 記載された会社名 製品名等は 各社の登録商標もしくは商標 または弊社の商標です サーポートサービスについてホームページ ビルダーの HTML ソース Java アプレット Java スクリプト スタイルシート CGI などの編集支援 検索サイトなど他社サービスに関する質問については サポートサービスを行っていません hpb ダッシュボードプラグインで追加されるメニューやコマンド以外は サポートサービスを行っていません 2013 株式会社ジャストシステム
目次 テンプレートを利用したホームページ作成 テンプレートのページと手順を確認する 1-1 ページの確認 1-1 手順の確認 1-3 作成前の確認事項 1-4 のインストール 1-4 サーバー動作環境と必要な情報 1-4 サイトを作成する 2-1 編集するページを開く 2-4 ページや構成を編集する 3-1 ビューとメニュー 3-2 編集できる個所を確認する 3-3 操作の対象を選択する 3-4 サイトのページで使用できる機能 3-5 文字を編集する 3-6 タイトル画像やトップ画像を編集する 3-7 投稿記事一覧の設定をする 3-11 投稿記事一覧の表示項目 3-13 ページの構成や属性を変更する 3-15 メニューの構成を変更する 3-17 メニューの表示順 階層を変更する 3-17 メニューを新しく追加する 3-19 ページのデザインを変更する 3-20 編集したページを保存する 3-21 既存のサイトから内容を移行する 3-22 サイトを公開する 4-1 手順 1 : 設定をする 4-2 ホームページ ビルダーサービスを使う 4-2 そのほかのプロバイダーやサーバーを使う 4-5 手順 2 : サイトを転送する 4-8 手順 3 : データを反映する 4-10 つづく
記事を投稿する 5-1 記事を投稿する 5-1 投稿した記事を編集する 5-5 コメントを承認する 5-6 集客の工夫をする 6-1 問い合わせフォームを設定する 6-1 ソーシャルボタンを追加する 6-3 かんたんアクセス解析をする 6-5 手順 1 : サイトをアクセス解析の対象にする 6-6 手順 2 : かんたんアクセス解析の結果を確認する 6-8
テンプレートを利用したホームページ作成 を使うと ブログを書くような感覚で文章 豊富なテンプレート や写真を投稿して 誰でもどこからでもホームページ を更新できます ホームページ ビルダーと組み合わ 多彩な用のテンプレートから選択して 好 みに合ったデザインのサイトを作成できます せて使うことで より簡単にホームページを作成 管 業種ごとに必要なページがあらかじめ用意されてい るので 編集しやすいのが特長です どのテンプレー トも 作成後にデザインを簡単に変更できます 理 運用できます から 会社 作成 更新 記事の投稿 外出先 から 自宅から 記事の投稿 を利用したホームページ サイ ト には 便利な点がたくさんあります どこからでも簡単に更新 サイトは インターネットに接続するこ とができれば 自宅のパソコンや外出先のスマー トフォンなど どこからでも記事の投稿や更新が かんたんデビュー かんたんデビューでは 画面の指示に従っ て進めば サイトの作成と環境の構築ができます 初めてにチャレンジする方も安心です できます 複数人でホームページ更新 サイトは ページの枠組みの部分と記 事を投稿する部分とが別々に管理されています 内容の更新も別々に行えるため サイトの管理は 決めた担当者が行い 日々の新しい記事の投稿は 誰でもが行う といった運用ができます 1つのサイトで複数の閲覧機器に対応 サイトは パソコンやスマートフォンな どの閲覧機器に応じて自動的に最適な形式で表 示されます サイトを複数作成する必要がありま せん J-Licenseの場合は 表示される画面が異なります
1 1 1
3-1 4-10 p hpb 3 1 news() news 3-11 1 2
q 1 W 2-1 3-1 3-3 W 4-1 1 W 4-2 2 4-8 3 W 4-10 3-6 3-7 3-11 3-15 3-17 3-20 W 5-1 1 3
1-4 p J License 10GB 50GB 3.4 PHP5.2.4 MySQL5.0.15 URL Apache mod_rewrite 1 URL http://ja.wordpress.org/ URL http://www.justsystems.com/jp/links/hpb/wpsv.html p CGI Webhttp://hpbs.jp/ 1 4
1 Just MySQL FTP FTP *1 FTP *2 URL *1 FTP ID *2 1 5
1 3. 1-4 2 2 1. 3. 3 2. 2. 1. p Webhpb hpb Web J-License 2 1
4 1. 3. 2-2 p 2 3. 4. 1. 2. 4. OK 5. q 2. p 4 3. 3-15 1 2 2
5 1. SEO 3. 4-1 2 4. 2. 1. 3. 2. 3-1 p / SEO p 2 3
1 1. 1. 2 1. 2 2. 2. 3. 3. 3. q o 2 4 HTML
PHP 3-1 pphp 3-3 3-6 3-7 3-11 3-15 3-17 3-20 3-21 1817 3-2 3-7 18 pphp HTML1PHP PHP HTML 3 13
3 23
*1 *1 3-17 3-2 3-11 5-1 3-2 3 33
3 4 3 o 1 1 3-7
q / DOCTYPE SEO 1 OGP HTML HTML adesigner RSSRSS 1 SEOSEOhpb SEO for - BGM Excel ODF Flash iphone/ipad Web Web PDF 6-1 PDF 6-3 PDF 6-5 Java ActicX Internet Explorer - X-UA- Compatible SSI 3 53
3 6 1. 3. 3 2. 4. Backspace Delete qseo SEO SEO SEO p p
タイトル画像やトップ画像を編集する タイトル画像やトップ画像は 文字や複数の画像 背景色などを重ねて 1つの画像に見せている ものです 重ねられている文字や画像は 合成画像の編集 機能でまとめて変更できます ここでは トップページに含まれるトップ画像を編集します 3-10 pタイトル画像の文字を変更する タイトル画像 3 ページや構成を編集する トップ画像 1 2 画像を選択する 1. トップ画像をクリックします 1. 2. 文字を編集する 1. オブジェクト一覧 から変更したい文字を選択し ます 文字は ロゴ と表示されています 1. 2. 画像の周囲に ハンドルマーク が付いたフォー カス枠が表示されることを確認します ハンドルマーク が表示されない場合は 画像をもう一度ク リックします 2. 編集 をクリックします 2. かんたんナビバー下段の 画像の調整 合成画像 の編集 を選択します 合成画像の編集 ダイアログボックスが表示され ます 3 7
3 83. ARM 15 6. 3 3 4. 5. q 1. 2. 1. 1. 2. 3. 3.
4. 5 4 1. 2. 3 1. 5. 3 1. 3. 4. OK 5. XY0 3 93
3 105 1. OK 3 p 1. 2. 3. 3-7 2 4. OK 5. CSS 6. p 1. 2. p PDF 7-10 1
1-1 1-2 1 1. 2. 3. FAQ 4. 4. 3. 3 113
3 123 2 1. faqfaq 1. 2. 3. 2. 3. 11 3-13 4. 4. 5. 6. 8. 5. 6. more 11 7. 3-14 p 8. OK 9. OK
1 1 1 3 133
3 143 p FAQ FAQ FAQ FAQFAQ FAQFAQ 1. 2. 3-14 p 3. OK 5-3 4 p ****cat 1 faq(faq)3040 FAQ FAQ 1. 2. 3. 1 4. OK 1 5. 3. 1 ***
1 1. 2. 2. 3. 3. 4. 4. 1 3 153
3 162 1. 6. 3-11 1 3. 2 7. 7. OK 3 2. 3. 4. 7. 5. p 2. 3. 4. 3 1. 2. 3-17
3-15 1. 2. 3-18 p 3. 11 2. 3. 4. 3 173
3 185. 7. 8. 3 6. p 1. 2. OK p
1. 5. OK 6. 2. 3. 4. 3-17 2.4. 3-18 p 7. 1. 2. 3. URLURL 4. 5. OK 5. 6. 6.7. 3. 4. 3 193
ページのデザインを変更する テンプレートで作成したサイトは ページのデザインを簡単に変更することができます q編集しているタイトル画像も変更されます ページのデザインを変更すると 編集しているタイトル画像も 新しく選択したデザインのタイトル画像に置き換わります 新しいデザインに合わせて 編集しなおしてください トップ画像を編集している場合 画像の編集方法によっては トップ画像も置き換わる場合があります 新しいデザインに合わせて 編集 しなおしてください 3 1. かんたんナビバーの デザイン変更 をクリックし ます ページや構成を編集する 1. 2. デザインを選択します 2. 2. 4. ページ一覧 でページのタイトルを順番に選択し て プレビュー に表示されるデザインを確認し ます 5. OK をクリックします デザインを選択する画面に戻ります 6. OK をクリックします 7. デザインの変更を確認するメッセージが表示され るので はい をクリックします ページのデザインが変更されます 3. 3. プレビュー をクリックします 3 20
1. p ** * p.zip.zip / 17.2. 3 213
3 22 HTML 3 q 3-7 3-15 3-17 1 2-4 2 1. 2. 3. 4. 5.
3 1. 2. 3. 1.2. 3 233
4 1 W 4 1 W 4-2 2 4-8 3 W 4-10 p2 2 4-8 2 4-10 3
1 2 4-2 4-5 1 1-4 p 2 1. 2. 2 1. 2. 2. Just 3. FTP FTP FTP 4 24
4 33 4 1. 2. 1. 3 1. 4-3 p 4 2. 1. 3. 3. URLURL URL p q admin Just 2. 2
1. OK 2. 4-8 2 p 4-10 3 Just 4 44
4 5 q MySQL 1-4 4 1 1-4 FTPFTPFTP URL 2 3 1. 2. 2. 3 1. 2. FTP 4 1.
4 4. URL 1 1. FTP 1 FTP 1 FTP 1 1 1. 2. 4. 1 3 2. 2. 2 3 2. 1 3 2. 1 2 3 2. q public_html public_html 3. o 3. 5 1. 4 2. 4-3 p 2. 1 MySQL 3. URL URL URLURL URL /wp-admin 4-9 p 1. 2. 4 64
4 74 6 4-6 o 1. 2. 3. q 2. 3. 4-8 2 6 3. 4-11 2
2 q PHP 3-1 pphp 1. 2-4 2. 2. 3. 4. 4-9 p 3. 4. 4-9 o 5. 4-10 3 4 84
4 94 o 1-4 4-9 p p 1. 2. 3. OK 4. p php 1. FTP 17.4 wp-content/themeshpb18t 1 backup. zip 1 yymmddhhnnss 2.
3 4-10 phpb q 2 1 1. 1. 2. admin Just 2. q adminadmin Web http://hpbs.jp/support/admin.html 8 phpb hpb hpb phpb 5-1 4 104
4 11hpb hpb F5 2 1. 4 2. p hpb 1. hpb 2.
3. 5. 4. o hpb URL URLURL/wp-admin 4 124
5 1 5 hpb 1 1. 1 2 1 2. 2 phpb hpb hpbhpb hpb
2 3 1. hpb 1. 2. 3. 2. 3. 5. 2. 3. 2. 3. 4. 5. 5 25
5 36. 7. 4 1. 1 2 + 1 2-1. 2 4-3. 5 3-1. 3-2.6. 2.
3. 3. 5 1. 2. 2. 1. 4. 5 45
5 5 1. 5-1 1 4. 5 2. hpb 3. 5. 6.
1. 5-1 1 2. hpb 3. 5 65
6 1 6 q hpb CGI 1. 5-1 1 2. 3. 4. 5. 6. 6. 5.
7. 8. 3. q1 11 6-2 p p PDF 7-20 2 4. p 1. 2. 2. 2. 3. 4. OK 5. OK hpb 6-1 3. 5. 6 26
6 3 Twitter Facebook Twitter miximixi Facebook Google +1 Evernote 6 1. 5-5 1 2. 3.
4. 5. 6. 5. 4. pfacebookmixi Facebook!!Facebook ID ID miximixi! mixi/mixi!mixi 6 46
かんたんアクセス解析をする ホームページのアクセス解析を行い その結果を確認して ホームページを改善する手がかりにし ます J Licenseの場合 かんたんアクセス解析はご利用いただけません hpb ダッシュボード 6 アクセス数が 増えているわ 集客の工夫をする 訪問者がページを閲覧 アクセス解析サーバー アクセス解析結果を確認 閲覧情報を蓄積 手順 1 サイトをかんたんアクセス解析の対象にする 6-6 2 かんたんアクセス解析の結果を確認する 6-8 pアクセス解析とは アクセス解析とは ホームページに何人くらいの閲覧者が来ているか どのようなキーワードで検索されているかなどを知る 方法です 訪問者の傾向や興味のポイントがわかるので ホームページの運用や改善の参考にすることができます pかんたんアクセス解析とは ジャストシステムが運営するアクセス解析サービスです サイトのアクセス解析の結果を ブラウザーで確認する ことができます 6 5
1 1 1. 5-1 1 2. 3 2 1. 3. 6 66
6 73 4. hpb 1. hpb Just 6 2. 1. 2. 3. OK Web p hpb
2 1 Web 1. 5-1 1 2 1. hpb qweb qweb 6 86