11年連続市場シェアナンバーワンのホームページ作成ソフト「ホームページ・ビルダー」。個人の趣味のためのホームページ作成だけでなく、個人商店や個人事務所、中小企業などでの利用も増えています。本書はこのホームページ・ビルダーの最新版に対応、操作方法を基本から応用まで詳細に解説します。
刷新されたインターフェースや、新機能「フルCSSプロフェッショナルテンプレート」や「瞬間デザインチェンジ」「かんたんアクセス解析サービス」「Flash作成機能」「iPhone、iPad対応」「ツイッター連携」「安心バックアップ・移行ツール」などに対応。初心者から上級者まで、ホームページ・ビルダーを学ぶ上で、まさにパーフェクトな1冊です。
本書はホームページビルダーの基本からハイレベルな操作方法まで、徹底的に解説する初級~中級者向けの解説書です。
[Chapter 1] 編集モードを選んでページを作ろう
section 1 「どこでも配置」モードでページを作る
step 1 編集スタイル、編集モードを選んで新規作成
step 2 ページサイズを設定する
step 3 ページタイトル、背景、文字色、BGMを選ぶ
step 4 「どこでも配置」モードで文字を入力する
step 5 テキストボックスの幅を決めて入力する
step 6 テキストボックスのサイズや位置を変える
step 7 素材集からイラストを貼る
step 8 素材集のロゴを貼る
step 9 文字や画像をページの中央に揃える
step 10 ホームページを保存する
step 11 ホームページ・ビルダーを終了する
section 2 「標準」モードでページを作る
step 1 標準の作業環境で新規ページを作成
step 2 素材集から背景画像を選ぶ
step 3 「ページの属性」でタイトルと色を指定
step 4 文字を入力する
step 5 素材集からイラストや水平線を貼る
step 6 ロゴを作る
step 7 ロゴ画像の大きさを変更する
step 8 ボタンを作る
step 9 文章や画像を中央揃えにする
section 3 仕上がりを確認してサーバーに送る
step 1 保存しておいたホームページを開く
step 2 プレビュー画面で確認する
step 3 ブラウザーで確認する
step 4 FTPの設定を新規に作成する
step 5 ホームページをサーバーに転送する
step 6 転送できたかどうか確認する
[Chapter 2] 文字と段落の書式を整える
section 1 段落書式から始まる書式設定
step 1 入力後に文章を追加する
step 2 段落単位で移動する
step 3 テキストファイルをページに読み込む
step 4 見出しや引用の段落書式を指定する
step 5 段落全体を右揃えや中央揃えにする
step 6 インデントで余白を広げる
section 2 文字のデザインにこだわる
step 1 文字サイズを指定する
step 2 文字の色を変える
step 3 文字飾りを付ける
step 4 文字にルビ(ふりがな)を付ける
step 5 文字デザインを一括で指定する
step 6 水平線でページを区切る
section 3 列記する項目はリストでまとめる
step 1 リストを入力する
step 2 入力済みの文章をリストに変更する
step 3 説明付きのリストを入力する
step 4 階層構造を持つリストを作る
step 5 番号なしリストを番号付きリストに変更する
step 6 リストマークを別の記号やアルファベットに変える
[Chapter 3] 表を使う・表で作る
section 1 基本的な表を作ってみる
step 1 表の枠を挿入する
step 2 表の内容を入力する
step 3 行や列を増やす
step 4 行や列を減らす
step 5 表題を付ける
step 6 表をページの中央揃えにする
step 7 セルの中の文字位置を変更する
section 2 表のデザインにこだわる
step 1 Excel の表データを読み込む
step 2 表の背景色を指定する
step 3 表の位置を中央揃えにする
step 4 表の枠線を指定する
step 5 列の幅を指定する
step 6 複数のセルを1つに結合する
step 7 セルを分割する
step 8 セル内の文字サイズを変更する
step 9 行や列の先頭セルを見出しの書式にする
step 10 セルの色、文字の色を指定する
step 11 セル内で文字の上下位置を変更する
step 12 セル内で文字の左右位置を変更する
section 3 表を使ってページをレイアウト
step 1 レイアウト用の枠を作る
step 2 表の枠内にホームページを読み込む
step 3 表の枠を使ってページの書式を整える
[Chapter 4] リンクを張りサイトを作る
section 1 ホームページやメールへのリンクを張る
step 1 同じサイト内のページへジャンプするリンク
step 2 リンクの設定を確認する
step 3 ウィザードを使わずにファイルへのリンクを設定
step 4 パスワード付きのリンクを設定する
step 5 メールへのリンクを設定する
step 6 別のサイトへのリンクを設定する
step 7 ページの特定箇所をリンク先に指定する
step 8 ページ内の見出しにリンクする目次を作る
section 2 ウェブサイトを管理する
step 1 ウェブサイトを新規に作成する
step 2 ビジュアルサイトビューで確認する
step 3 ビジュアルサイトビューでリンクを設定する
step 4 ビジュアルサイトビューでページを開く・閉じる
step 5 ウェブサイトを閉じる・開く
step 6 ウェブサイトのファイルをまとめて転送する
section 3 サイトを自在に結ぶリンクメニュー
step 1 リンクメニューの設定を始める
step 2 リンクメニューの内容を設定する
step 3 リンクメニューの書式を変更する
step 4 リンクメニューを見やすく設定する
step 5 「サイト共通メニュー」でリンクメニューをコピー
step 6 スタイリッシュ エフェクトをページに適用する
step 7 リンクメニューの内容を書き換える
step 8 ヘッダーのロゴを修正する
step 9 スタイリッシュ エフェクトのデザインを調整する
[Chapter 5] 画像ファイルをページに貼る
section 1 「写真挿入ウィザード」で画像をきれいに貼る
step 1 「写真挿入ウィザード」で画像を貼る
step 2 画像をページの中央揃えにする
section 2 画像を自由にレイアウト
step 1 「画像ファイルの挿入」を使って画像を貼る
step 2 画像の大きさを変える
step 3 画像の横に文字を回り込ませる
step 4 回り込みを途中で解除する
section 3 貼り付け後の画像を加工する
step 1 画像に縁取りを付ける
[Chapter 6] 画像ファイルを準備する
section 1 色合いの補正、トリミング、サイズ変更
step 1 ウェブアートデザイナーを起動する
step 2 画像の色合い・明るさ・鮮やかさを補正する
step 3 必要な部分だけをトリミング
step 4 画像サイズを変更する
step 5 オブジェクトをホームページ用に保存する
section 2 画像に特殊効果を加える
step 1 画像に特殊効果でアンシャープマスクをかける
step 2 キャンバス全体をファイルに保存する
step 3 画像に写真効果のクロスを指定する
step 4 画像に色調効果のセピアを指定する
step 5 画像に色温度効果の朝夕を指定する
section 3 透かしを入れて不正コピーを防ぐ
step 1 デジすたマーカー2 を起動する
step 2 不正コピー防止の「透かしスタンプ」を設定する
step 3 見えない「透かしラベル」を入れる
step 4 「透かしラベル」を抽出する
[Chapter 7] 画像を効果的に見せる
section 1 画像と説明文を「アルバム」のように配置する
step 1 「アルバム」で写真をレイアウトする
step 2 「アルバム」に文章を入力する
section 2 拡大画像にリンクした画像一覧を作る
step 1 「サムネイル」を挿入する
step 2 サムネイルに説明文を付ける
step 3 サムネイルの動作を確認
section 3 背景や表に画像を貼る・貼った画像を管理する
step 1 オリジナルの背景画像を設定する
step 2 表の背景画像を設定する
step 3 表のセルに画像を貼る
step 4 ページに貼った画像を管理する
[Chapter 8] 写真を使って動きを出す
section 1 スライドショーで次々に画像を表示
step 1 「スライドショー」を挿入する
step 2 スライドショーの動きを確認する
section 2 マウス操作で画像が変わるロールオーバー&メッシュ効果
step 1 「ロールオーバー効果」の画像を挿入する
step 2 「メッシュ効果」の画像を挿入する
step 3 「吹き出し」を挿入する
section 3 静止画からアニメーションを作る
step 1 静止画を元にアニメーションを作る
step 2 ウェブアニメーターを起動する
step 3 文字アニメーションを作成する
step 4 アニメーションをホームページへ送る
[Chapter 9] オリジナルのボタンや地図を描く
section 1 オリジナルのロゴやボタンを作る
step 1 ボタンの枠を作る
step 2 「ロゴの作成」機能でボタン用の文字を作る
step 3 ロゴとボタンを組み合わせる
step 4 ボタンをパーソナルフォルダへ送る
step 5 同様にほかのボタンを作る
section 2 図形を組み合わせて地図を描く
step 1 キャンバスの大きさと色を指定する
step 2 線を描く
step 3 図形を描く
step 4 オブジェクトを回転・移動・サイズ変更する
step 5 オブジェクトの色を変える
step 6 オブジェクトを複製する
step 7 文字を入力する
step 8 「ウェブアート素材」の図形を使う
step 9 キャンバスを保存する
section 3 画像の特定箇所からリンクするイメージマップ
step 1 イメージマップにする画像を貼る
step 2 イメージマップを設定する
[Chapter 10] フレームでページを分割
section 1 フレームの枠組みを作成する
step 1 「フレーム設定ページ」を作成する
step 2 フレーム内に既存のページを読み込む
step 3 フレームごとに背景色を指定する
step 4 フレームを指定して文字を入力する
step 5 フレーム内に画像を貼る
step 6 画像と文字を重ねた「合成画像」を作る
step 7 「フレーム設定ページ」にタイトルを付ける
step 8 フレームに関連するページをすべて保存する
section 2 フレームを指定してリンクを張る
step 1 リンク用のボタンを配置する
step 2 ターゲットを指定してリンクを設定する
step 3 ボタンにロールオーバー効果を指定する
step 4 トップページに戻るリンクを設定する
section 3 フレームの書式を設定する
step 1 フレームの横幅を指定する
step 2 フレームの高さを指定する
step 3 フレームの境界線を非表示にする
step 4 「フレームなし」ページを作る
[Chapter 11] ビデオやFlashで動きを出す
section 1 動画ファイルを編集してオリジナルビデをを作る
step 1 ビデオ作成を始める
step 2 素材となるビデオファイルを選択する
step 3 ビデオにさまざまな効果を加える
step 4 BGMを指定する
step 5 ビデオプロジェクトを保存する
step 6 プロジェクトファイルを開く
step 7 作成したビデオを確認する
step 8 ビデオクリップをトリミングする
step 9 クリップを移動する
step 10 クリップの長さを変える
step 11 ビデオに付属する音声をカットする
step 12 クリップを追加する
step 13 ビデオファイルをホームページに貼る
section 2 Flashタイトル、iPhone/iPadタイトルを付ける
step 1 Flash タイトルを作成する
step 2 Flash タイトル全体の表示方法を指定する
step 3 画像ごとに表示設定を変更する
step 4 画像の上に文字を載せる
section 3 ブログパーツやYouTube動画を使う
step 1 ブログパーツの挿入を始める
step 2 貼り付けるブログパーツを指定する
[Chapter 12] 「クイック」で素早くきれいに作る
section 1 デザインの手間を省く「クイック」でサイトを作成
step 1 「クイック」を起動する
step 2 新しいサイトを作る
step 3 ページのヘッダーを変更する
step 4 ページのフッターを変更する
step 5 サイトの色合いを変更する
step 6 文字を入力する
step 7 サンプル画像を差し替える
step 8 写真ボックスに新しい画像を貼る
section 2 「クイック」でページや記事を追加する
step 1 新しいページを追加する
step 2 新しい記事を追加する
step 3 日記用のページを追加する
step 4 日記の記事を追加する
section 3 カレンダーや最新記事リストを自動作成
step 1 カレンダー型リンクを付ける
step 2 「最近の記事」一覧を表示させる
step 3 すべてのページを保存して、クイックを終了
[Chapter 13] テンプレートでお気楽サイト作成
section 1 レイアウトを選ぶだけの「かんたんページ作成」
step 1 「かんたんページ作成」を起動する
step 2 ページの構成を決める
step 3 サイト全体のデザインを決める
step 4 サンプルの文章、画像を書き換える
step 5 サイト全体の編集モードや保存方法を選ぶ
step 6 「レイアウト用素材」で簡単に記事を追加
section 2 「プレミアムテンプレート」にデザインも構成もおまかせ
step 1 プレミアムテンプレートを起動する
step 2 プレミアムテンプレートのデザインを選ぶ
step 3 トップページのタイトルとロゴを書き換える
step 4 サンプルの画像を入れ替える
step 5 サンプルの文章を書き換える
step 6 サイトを保存する
step 7 サイトを修正する
section 3 「フルCSSテンプレート」でサイトを作る
step 1 フルCSS テンプレートでサイトを作る
step 2 フルCSS テンプレートの特徴を理解する
step 3 ロゴの画像を入れ替える
step 4 ヘッダーの画像を入れ替える
step 5 リスト項目を修正する・追加する
step 6 リンクメニューやサイドメニューを修正する
step 7 リンクの設定を変更する
step 8 サイトの共通部分を同期する
step 9 サイトの全体像を確認する
[Chapter 14] HTMLとCSSについて知ろう
section 1 HTMLを見る・変えてみる
step 1 HTMLについて知ろう
step 2 HTMLソースを表示する
step 3 HTMLソースの変化を見る
step 4 HTMLソースを書き換える
step 5 基本的なHTMLタグを覚えよう
section 2 CSSを使ってデザインを変更する
step 1 CSS について知ろう
step 2 CSS タグの使い方は3通り
step 3 CSS タグのセレクタは3通り
step 4 「エディターズ」スタイルで表示する
step 5 インラインスタイルシートを使う
step 6 埋め込みスタイルシートを使う
step 7 スタイルシートマネージャでCSS を設定する
step 8 埋め込みスタイルを追加する
section 3 外部スタイルシートファイルで複数ページをデザイン
step 1 素材集のスタイルシートファイルを適用する
[Chapter 15] ビジネスに役立つページ
section 1 地図やアフィリエイトをページに付ける
step 1 地図サービスに申し込む
step 2 Googleマップをページに挿入する
step 3 アフィリエイトの設定を始める
step 4 アフィリエイトIDを取得する
step 5 アプリケーションIDを取得する
step 6 掲載するアフィリエイト商品を選ぶ
step 7 最新のアフィリエイト商品を自動表示
section 2 アクセス解析でサイトの状況を確認
step 1 アクセス解析の利用手続きを始める
step 2 ホームページ・ビルダーのユーザー登録をする
step 3 アクセス解析の利用登録を終える
step 4 サイトをアクセス解析の対象にする
step 5 ページごとにアクセス解析の指定をする
step 6 解析結果を表示する
section 3 SEO対策で顧客を引き寄せる
step 1 XMLサイトマップを作成する
step 2 XMLサイトマップを検索サイトに登録する
step 3 SEO 設定をチェックする
step 4 SEO チェックを使ってSEO対策
step 5 検索サイトに登録する
[Chapter 16] 情報交換に役立つページ
section 1 日記やTwitterを使って情報を発信
step 1 Web 日記を作る
step 2 Web 日記をいったん終了する
step 3 Web 日記に記事を追加する
step 4 ツイートボタンを付ける
step 5 ツイッターボタンの動作を確認する
section 2 アンケートを使って意見を集める
step 1 アンケートのページを作る
step 2 選択式の設問を設定する
step 3 記述式の設問を追加する
step 4 レイアウトや回収方法を指定する
step 5 作成したアンケートの動作を確認する
section 3 ブログの作成・更新を楽にする
step 1 ブログサービスに新規登録する
step 2 ブログに記事の投稿ができるように設定する
step 3 ブログの記事をホームページ・ビルダーで書く
[Chapter 17] 携帯電話用のサイト作成
section 1 携帯電話用のページを作る
step 1 携帯電話用の新規ページを作る
step 2 ページの属性を設定する
step 3 ロゴを挿入する
step 4 文字や水平線を入力する
step 5 素材集からイラストを挿入する
step 6 PC用のページを携帯用に変換する
step 7 携帯ページでリンクを設定
section 2 携帯電話用ページに画像を貼る
step 1 携帯用ページに画像ファイルを貼る
step 2 「携帯サムネイル」を挿入する
step 3 サムネイルの動作を確認する
section 3 プレミアムテンプレートを使って携帯サイトを作る
step 1 携帯用のプレミアムテンプレートを起動する
step 2 プレミアムテンプレートのデザインを選ぶ
step 3 ページの内容を作成する
step 4 サイトを保存する
step 5 プレビューで動きを確認する
内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。
正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。
本書の書影(表紙画像)をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影(表紙画像)以外のご利用については、こちらからお問い合わせください。