ホームページ・ビルダー17 パーフェクトマスター

概 要

初心者からプロまで幅広い支持を得ているホームページ作成ソフト「ホームページ・ビルダー17」の操作ガイドです。最新のバージョン17では、WordPressが連携できるようになったことで、ブログ感覚でサイトを更新できるようになりました。本書では、ホームページ・ビルダーの便利な機能と使い方を画面を使ってわかりやすく説明します。また、プロがデザインした高品質な「フルCSSプロフェッショナルテンプレート」も収録されているので、業種や目的を選んでテキストや画像を入れ替えれば見栄えのするサイトをすぐに作ることができるほか、TwitterやFacebookなどのソーシャルメディアにも対応しています。サンプルのダウンロードサービス付き。

著者 高見有希
価格 本体2900円(税別)
ISBN 978-4-7980-3591-8
発売日 2012/11/30
判型 B5変
色数 4色
ページ数 884
CD/DVD
対象読者 初級
シリーズ パーフェクトマスター
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

Chapter 1 ホームページ・ビルダーを使う前に

1.1 ●ホームページ・ビルダーを使ってできること

1.1.1 インターネットとホームページの仕組み

インターネットとは

コラム wwwの生まれたところ

ホームページとは

ホームページの構造

1.1.2 ホームページ作成の基本的な流れ

コラム ホームページを作成する前に

1.1.3 ホームページ・ビルダーのおもな機能

3つの編集スタイル

かんたんナビ

フルCSSテンプレートの利用

スマートフォン用機能の利用

かんたんホームページ・デビュー機能の利用

豊富なサンプル素材の搭載

ふりがな(ルビ)の入力に対応

合成画像の編集

Flashタイトルの作成

レイアウト部品の挿入

吹き出しの作成

文字アニメーションの作成

ページ間のリンク

リンクメニューの作成

表組み(テーブル)へのデザインの適用

スタイルシートの利用

アルバム、サムネイル、メッシュ効果、スライドショーの作成

スタイリッシュエフェクトの利用

携帯ページの作成

アンケートの作成

ソーシャルネットワーク用のボタンの設置

日記ページの作成

カレンダーの挿入

プログの作成・編集・投稿

アクセス解析サービスの搭載

QRコードの作成

ページのアクセシビリティ度のチェック

Yahoo!地図とGoogleマップの挿入

アフィリエイトの挿入

SEO対策支援機能の搭載

サイトがすばやく作成できるホームページ・ビルダー クイック

かんたんWordPressデビュー

コラム ホームページビルダー16で追加されたその他の機能

1.2 ●付属アプリケーションを使ってできること

ウェブアートデザイナー

デジすたマーカー2

ウェブアニメーター

ウェブビデオスタジオ

コクピット

ダヴィンチ・カート

CSSエディター

aDesigner

携帯サイト転送ツール

ファイル転送ツール

安心バックアップ・移行ツール

SEOナビ

1.3 ●ホームページ・ビルダーのインストール

1.3.1 インストールの前に動作環境を確認する

ホームページ・ビルダー17の動作環境

1.3.2 ホームページ・ビルダー17をインストールする

ホームページ・ビルダーをインストールする

1.3.3 インストール後に機能を追加、削除する

機能を追加または削除する

1.4 ●ホームページ・ビルダーの起動と終了方法

1.4.1 スタートメニューから起動する

ホームページ・ビルダーをスタートメニューから起動する

1.4.2 タスクバーに表示したアイコンから起動する

タスクバーにアイコンを表示する

コラム ホームページ・ビルダー クイックを起動する

コラム 保存していないページがあるときは

1.4.3 ようこそダイアログボックスの機能

ようこそダイアログボックスの使い方

1.4.4 ホームページ・ビルダーを終了する

ファイルメニューから終了する

閉じるボタンで終了する

かんたんナビバーの閉じるボタンで終了する

1.5 ●ガイドマップを利用する

1.5.1 ガイドマップを開く

ガイドマップを開いて情報を見る

1.5.2 ホームページ・ビルダーのヘルプを見る

オンラインヘルプを見る

Q&A

Chapter 2 ホームページ作成の基本

2.1 ●ホームページ・ビルダー17の画面

2.1.1 ホームページ・ビルダーの画面構成

かんたん編集スタイルの画面構成

スタンダード編集スタイルの画面構成

コラム ナビメニューと13種類のビューは開閉できる

エディターズ編集スタイルの画面構成

2.1.2 標準モードとどこでも配置モードの違い

標準モード

どこでも配置モード

2.1.3 表示モードを切り替える

編集優先

表示優先

アウトライン

2.2 ●テンプレートを使ってページを作成する

2.2.1 かんたんホームページ・デビュー機能を利用する

かんたんホームページ・デビュー機能でページを作成する

2.2.2 ページを保存する

ページを上書き保存する

コラム フルCSSテンプレートの利用

ページにファイル名を付けて保存する

コラム 「素材ファイルをコピーして保存」ダイアログボックスの機能

2.2.3 ページを閉じる

編集中のページを閉じる

コラム 再編集用フォルダについて

ページをまとめて閉じる

2.2.4 フルCSSテンプレートを利用する

フルCSSテンプレートを使って一般のページを作成する

コラム デザイン、カラー、レイアウトを簡単に変更できる

2.2.5 フルCSSスマートフォンテンプレートを利用する

コラム フルCSSテンプレートを利用して1ページだけを作成する

2.2.6 ベーシックテンプレートを利用してページを作成する

サンプルテンプレートを使ってページを作成する

デザインテンプレートを使ってページを作成する

かんたんページ作成機能を使ってページを作成する

コラム プレミアムテンプレートの利用

コラム 複数ページを選択した場合は

PCページを使って複数ページを作成する

コラム 素材集の写真を利用する

コラム ウィザードの基本操作

コラム ビジュアルサイトビューからページ編集画面に切り替えるには

2.3 ●白紙からページを作成する

2.3.1 白紙のページを作成し、ページタイトルなどを設定する

白紙のページを作成する

コラム かんたんナビやツールバーを使って白紙のページを作成する場合

かんたんページ設定を使ってページの基本設定を行う

コラム サウンドファイルの挿入方法

コラム ページのタイトルについて

2.3.2 背景に壁紙を貼り付ける

ファイルから壁紙を貼り付ける

素材集から壁紙を貼り付ける

コラム 壁紙をテスト貼り付けする

2.4 ●既存のページを開く

2.4.1 保存してあるページを開く

開くダイアログボックスから開く

ファイルメニューの履歴から開く

コラム 開くダイアログボックスの編集するモードについて

2.4.2 プレビュー表示でページを確認する

プレビュータブで確認する

ブラウザーでプレビューする

コラム 対応ブラウザー

2.4.3 表示するページを切り替える

ウィンドウメニューを使ってページを切り替える

ページ一覧ビューを使ってページを切り替える

2.5 ●かんたんWordPressデビューでホームページを作成する

2.5.1 かんたんWordPressデビュー機能でページを作成する

かんたんWordPressデビュー機能でページを作成する

WordPressメニューからサイト新規作成する

かんたんナビバーから、かんたんWordPressデビューをはじめる

かんたんWordPressデビューで作成したページを開く

コラム かんたんWordPressデビューでつくったサイトを公開するには

2.6 ●かんたん WordPress デビューの画面の基本操作

2.6.1 WordPressサイトの画面構成

編集するページを開く

編集領域のサイト画面を切り替える

ブラウザーでページを確認する

閲覧機器ごとの見え方を確認する

2.7 ●WordPressサイトのページを編集する

2.7.1 WordPressサイトで編集できる箇所の確認

2.7.2 編集したい部分を選択する

WordPressサイトで作成したページのデザインを変更する

2.8 ●WordPressサイトで作成したページの構成の変更をする

2.8.1 ページを追加する

かんたんナビバーから、WordPressサイトにページを追加する

メニューの文字列や順番を変更する

ページに投稿する内容を設定する

既存のサイトから内容を移行する

コラム Word Pressサイトのページで使用できないホームページビルダーの機能

Q&A

Chapter 3 文字の入力と編集

3.1 ●文字を入力する

3.1.1 標準モードで文字を入力する

標準モードで入力する

標準モードで入力した文字を削除する

3.1.2 どこでも配置モードで文字を入力する

かんたん編集スタイルで入力する

コラム テキストボックスの大きさをあらかじめ決めておく

スタンダード編集スタイルで入力する

どこでも配置モードで入力した文字を削除する

コラム 文字の入力と段落の関係について

3.1.3 キーボードから入力できない文字を入力する

特殊な文字を入力する

コラム HTMLにおける特殊文字について

3.1.4 縦書きの文章を入力する

縦書きの文字列を入力する

コラム 縦書きの英数字を入力する場合

入力した縦書きの文字列を編集する

3.1.5 新たな段落を作成する

標準モードで標準の段落を作成する

コラム 現在の日付や時刻を入力する

どこでも配置モードで標準の段落を作成する

種類を指定して段落を作成する

コラム 次行の段落を標準に戻すには

コラム 作成できる段落の種類

コラム [Enter]キーを押すだけで改段落するには

3.1.6 段落の行揃えを変更する

標準モードで段落の行揃えを変更する

コラム 書式ツールバーのボタンを使って行を揃える

どこでも配置モードで段落を左右中央に配置する

3.2 ●テキストファイルを使用する

3.2.1 テキストファイルを挿入する

テキストファイルを表に変換する

コラム どこでも配置モードでテキストボックスを移動するには

コラム 通常のテキストファイルとして挿入する場合は

コラム [挿入]メニューの[ファイル]の各コマンドについて

3.3 ●文字に飾りを付ける

3.3.1 文字のサイズを変更する

文字サイズを大きくする

3.3.2 文字のフォントや色を変更する

文字フォントと文字色を変更する

コラム 文字列の選択方法

3.3.3 文字にふりがな(ルビ)を入力する

文字にふりがな(ルビ)を付ける

3.3.4 文字飾りを指定する

文字列を斜体にする

3.3.5 文字飾りを取り消す

文字列の斜体を取り消す

コラム 設定できる文字飾りの種類

3.4 ●見出しを作る

3.4.1 見出しの段落を挿入する

見出し2を挿入する

コラム どこでも配置モードで見出しを挿入するには

3.4.2 通常の段落を見出しに変更する

見出しレベルを選択して変更する

属性ダイアログボックスで変更する

3.4.3 見出しのレベルをまとめて変更する

見出しエディターで見出しのレベルを変える

コラム ツールバーから見出しを選択する

3.5 ●文章を箇条書きにする

3.5.1 標準的な箇条書きを作成する

番号なしリストを作成する

3.5.2 番号付きの箇条書きを作成する

番号付きリストを作成する

3.5.3 マークのない箇条書きを作成する

マークなしリストを作成する

コラム 説明付きリストとは

Q&A

Chapter 4 ページに画像を挿入する

4.1 ●文章を水平線(区切り線)で区切る

4.1.1 ページに水平線を挿入する

標準モードで水平線を挿入する

4.1.2 挿入した水平線を編集する

水平線の太さ、幅などを変更する

水平線を削除する

4.1.3 飾りの付いた区切り線を挿入する

区切り線を挿入する

どこでも配置モードの場合

4.2 ロゴ画像をページに配置する

4.2.1 タイトルロゴを作成する

文字をデザイン画像にする

コラム ロゴを見出しに設定する

コラム 挿入したロゴを編集する

4.2.2 吹き出しを作成する

吹き出しをページに挿入する

4.3 画像をページに挿入する

4.3.1 デジカメ写真をページに挿入する

写真挿入ウィザードを使ってデジカメ写真を挿入する

4.3.2 画像ファイルをページに挿入する

ファイルから挿入する

素材集から挿入する

コラム ホームページに使える画像の形式は3つ

コラム HTML内の画像の指定について

4.4 挿入した画像を編集する

4.4.1 画像を加工する(切り抜き、効果、回転)

画像を切り抜く(トリミングする)

画像に効果をかける

画像を反転する

コラム 画像の編集ダイアログボックスを使って画像を編集する

4.4.2 画像にフォトフレームを付ける

画像にイラストフレームを付ける

4.4.3 合成画像を編集する

フォトフレームを編集する

新たに画像を合成する

4.4.4 画像の大きさを変える

画像の大きさを拡大、縮小する

コラム 画像のサイズ指定について

4.4.5 画像を移動、コピー、削除する

画像を移動する

画像をコピーする

画像を削除する

コラム グリッドとルーラーを使う

コラム クリップボードを利用する

4.4.6 画像の水平位置を変える

標準モードで画像を左右中央揃えにする

どこでも配置モードで画像を左右中央揃えにする

4.4.7 画像と文字の配置を変える

画像に文章を回り込ませる

回り込みを解除する

画像と文字の上下の位置関係を変更する

コラム 画像の周りに枠線を付ける

4.4.8 画像に代替テキストを付ける

貼り付けた画像に説明を付ける

コラム ページに使われている画像の代替テキストをチェックする

Q&A

Chapter 5 ページにリンクを設定する

5.1 ●リンクを設定する

5.1.1 ページにリンクを設定する方法

リンク作成ウィザードを使って設定する

属性ダイアログボックスを使って設定する

コラム [属性]ダイアログボックス[リンク]画像の各画面タブシートについて

5.1.2 別のページへのリンクを設定する

ページへのリンクを作成する

URLへのリンクを作成する

コラム リンクのターゲットについて

プレビューで設定を確認する

5.1.3 同じページ内でリンクを設定する

リンク先にラベルを付ける

ラベルへのリンクを設定する

プレビューで設定を確認する

コラム リンクのタグと属性について

5.1.4 メールへのリンクを設定する

メールを送信できるリンクを作成する

プレビューで設定を確認する

コラム パスワード付きのリンクを設定する

5.2 ●ページやサイトにリンク付きの目次を作成する

5.2.1 見出しへのリンク付き目次を作成する

リンク付き目次を作成してページに挿入する

プレビューで設定を確認する

5.2.2 ほかのページへのリンク付き目次を作成する

サイトマップを作成する

プレビューで設定を確認する

コラム URLツールバーでリンク先を変更する

5.3 ●リンクメニューとサイト共通メニュー

5.3.1 新たにリンクメニューを作成する

リンクメニューをページに挿入する

5.3.2 新たにサイト共通メニューを作成する

サイト共通メニューをページに挿入する

コラム サイト共通メニューを挿入したページの保存

5.3.3 作成済みのメニューを別のページに挿入する

作成済みのリンクメニューをほかのページに再利用する

コラム リンクメニューやサイト共通メニューを編集する

コラム リンクメニューとサイト共通メニューの特徴(まとめ)

5.4 ●イメージマップを作成する

5.4.1 イメージマップを設定する

ページ上の画像にリンクを設定する

コラム イメージマップの種類

Q&A

Chapter 6 ページに画像効果を挿入する

6.1 ●文字アニメーションを作成する

6.1.1 文字アニメーションをページに挿入する

文字アニメーションを作成する

コラム 文字アニメーション効果の種類

コラム 挿入した文字アニメーションを編集する

プレビューで動作を確認する

6.2 ●アルバムを作成する

6.2.1 ウィザードを使ってアルバムを作成する

アルバム作成ウィザードを使う

ページ上のアルバムを完成させる

6.3 ●スライドショーを作成する

6.3.1 ウィザードを使ってスライドショーを作成する

スライドショー作成ウィザードを使う

コラム IEでJavaScriptが動かない場合

プレビューで動作を確認する

6.4 ●サムネイルを作成する

6.4.1 ウィザードを使ってサムネイルを作成する

サムネイル作成ウィザードを使う

コラム 別ウィンドウに画像を表示する

プレビューで動作を確認する

コラム アルバム、サムネイル、スライドショーを管理できるWebフォトギャラリー

6.5 ●画像にロールオーバー効果をかける

6.5.1 2枚の画像からロールオーバー効果のかかった画像を作成する

2枚の画像でロールオーバー効果を設定する

プレビューで動作を確認する

6.5.2 ページ上の画像にロールオーバー効果を挿入する

ページ上の複数の画像にロールオーバー効果を設定する

6.6 ●画像にメッシュ効果をかける

6.6.1 2枚の画像からメッシュ効果のかかった画像を作成する

2枚の画像でメッシュ効果を設定する

プレビューで動作を確認する

コラム メッシュ効果はロールオーバー効果

6.6.2 1枚の画像からメッシュ効果のかかった画像を作成する

1枚の画像でメッシュ効果を設定する

プレビューで動作を確認する

6.7 ●Javaアプレットを挿入する

6.7.1 素材集のJavaアプレットを挿入する

Javaアプレットの動作や情報を確認する

Javaアプレットを挿入する

プレビューで動作を確認する

6.7.2 Javaアプレットを編集する

Javaアプレットのパラメータを変更する

6.8 ●Flashタイトルを挿入する

6.8.1 Flashタイトルを作成する

画像ファイルからFlashタイトルを作成する

プレビューで動作を確認する

6.8.2 Flashタイトルを編集する

挿入したFlashタイトルを編集する

コラム Flashタイトルの画像ごとに効果を設定する

コラム 背景画像をFlashタイトルに変換する

Q&A

Chapter 7 ページに表を挿入する

7.1 ●表の枠を作成する

7.1.1 シンプルな表を作成する

行数と列数だけを指定して表の枠を作成する

7.1.2 表の属性を追加した表の枠を作成する

枠線を入れ、ページ幅に合わせた表の枠を作成する

7.1.3 スタイルを適用した表の枠を作成する

スタイルセットを選択して表の枠を作成する

コラム 表の枠が小さいのが気になるという場合は

コラム 表の挿入ダイアログボックスを使わずに表の枠を作成する

表(テーブル)の仕組み

7.2 ●表にデータを入力する

7.2.1 文字を入力する

表題を挿入する

セルに文字を入力する

コラム セル間を移動するキー

7.2.2 画像を挿入する

サイズを指定して画像を挿入する

サムネイル画像を挿入する

コラム 外部の表データを取り込む

7.3 ●表の行や列、セルを編集する

7.3.1 行/列を追加する

行(列)を追加する

7.3.2 行/列をコピーする

行(列)をコピーする

行(列)を貼り付ける

7.3.3 行/列を削除する

行(列)を削除する

コラム 複数の行や列を追加、コピーするには

表全体を削除する

コラム 削除方法いろいろ

7.3.4 セルを結合する

隣接するセルを結合する

隣接する3つ以上のセルを結合する

7.3.5 セルを分割する

セルを2つに分割する

セルを3つ以上に分割する

7.4 ●表の属性を変更する

7.4.1 表全体の属性を変更する

表の幅、罫線、背景色を設定する

コラム 属性ビューを使って表の属性を設定する

表にデザインを設定する

表に適用したデザインの設定を解除する

コラム 属性ダイアログボックスの表の列タブについて

コラム 表の中の文字を小さくするには

7.4.2 行や列、セルの属性を変更する

列の幅(セルの幅)を設定する

行の高さ(セルの高さ)を設定する

見出し行のセルすべてに共通の設定をする

Q&A

Chapter 8 スタイルシートをページに適用する

8.1 ●スタイルを設定する

8.1.1 スタイルシートについて

スタイルシートとは

スタイルシートの記述法

スタイルシートの適用方法

スタイルシートマネージャについて

8.1.2 ページ内の同じ要素にスタイルを設定する

ページ全体の文字色を変更する

段落の左右にマージンを設ける

表に罫線を設定する

プレビューでスタイルを確認する

コラム HTMLファイルの中にSTYLE要素でスタイルを定義する場合

8.1.3 クラス単位でスタイルを設定する

クラス単位のスタイルを定義する(見出しに利用可能なスタイルを作成する)

クラス単位のスタイルを適用する

コラム CSS3の先進的な機能を利用する

8.1.4 ID単位でスタイルを設定する

ID単位のスタイルを定義する(ヘッダー部分のスタイルを作成する)

ID単位のスタイルを適用する

8.1.5 ページ内の要素に直接スタイルを設定する

style属性を使ってスタイルを設定する(特定の段落だけにスタイルを設定する)

コラム 特定の文字列にスタイルを設定する

8.1.6 設定したスタイルを解除する

スタイルシートマネージャを使って設定したスタイルを解除する

コラム style属性を使ってスタイルを定義する場合

style属性を使ったスタイルを解除する

コラム スタイルの設定ダイアログボックスの各タブシートについて

8.2 ●外部スタイルシートを利用する

8.2.1 既存の外部スタイルシートを利用する

素材集の外部スタイルシートを使う

素材集以外の外部スタイルシートを使う

コラム 外部スタイルシートをHTMLファイルとリンクさせる場合

8.2.2 外部スタイルシートを新規に作成する

スタイルシートファイルを作成する

CSSエディターでスタイルを設定する

8.2.3 外部スタイルシートの適用を解除する

外部スタイルシートとのリンクを削除する

8.2.4 外部スタイルシートをサイトに適用する(サイトスタイルの適用)

素材集の外部スタイルシートを適用する

素材集以外の既存の外部スタイルシートを適用する

サイトスタイルを確認する

8.2.5 サイトスタイルの適用を解除する

サイトスタイルを解除する

8.3 ●スタイリッシュエフェクトを使う

8.3.1 スタイリッシュエフェクトをページに適用する

編集中のページに対して効果を適用する

8.3.2 スタイリッシュエフェクトを変更、調整する

スタイリッシュエフェクトのテーマやイメージを変更する

スタイリッシュエフェクトのレイアウトを変更する

スタイリッシュエフェクトの効果を調整する

コラム スタイリッシュエフェクトの調整ダイアログボックスの調整項目

8.3.3 スタイリッシュエフェクトに対応した部品を使う

スタイリッシュエフェクト対応のレイアウト用素材を使う

コラム 拡大表示ボタンをページに挿入する

8.3.4 スタイリッシュエフェクトの適用を解除する

ページに適用した効果を解除する

8.3.5 スタイリッシュエフェクトをサイトに適用する

サイトのページに対して効果を一括適用する

8.3.6 スタイリッシュエフェクトのサイトへの適用を解除する

サイトに適用した効果を解除する

コラム プレミアムテンプレートとフルCSSテンプレート

8.3.7 デザインチェンジ機能を使う

デザインとレイアウトをすばやく変更する

Q&A

Chapter 9 フレームを使ったページを作成する

9.1 ●フレームで区分けしたページを作成する

9.1.1 ウィザードを使ってフレームを作成する

新規にフレームを作成する

フレームの仕組み

9.1.2 フレームを保存する

フレーム内ページを保存する

フレーム設定ページを保存する

コラム フレーム設定ページを先に保存すると

コラム 名前を付けて保存したあとのファイルの保存方法について

9.2 ●既存のページをフレームで区分けする

9.2.1 フレームを追加する

新規にフレーム設定ページを作成する

既存のページをフレーム設定ページにする

コラム トップページの内容とフレームなしのページの内容を同じにするには

9.2.2 フレームを削除する

追加したフレームを削除する

9.3 ●フレームを使ったページを編集する

9.3.1 フレームを使ったページにタイトルを設定する

フレーム設定ページにページタイトルを設定する

9.3.2 フレームのサイズを固定する

フレームのサイズを設定する

9.3.3 フレームの境界線を設定する

境界線の太さを指定する

コラム フレームサイズの指定方法とアスタリスク(*)の使い方について

境界線を非表示にする

9.3.4 フレーム名を設定する

フレーム名を変更する

9.3.5 フレームにリンクを設定する

リンク先のページを指定のフレームに表示する

Q&A

Chapter 10 携帯電話用のページを作成する

10.1 ●携帯ページを作成する

10.1.1 携帯ページを新規作成する

白紙のページから携帯ページを作成する

プレビューで動作を確認する

コラム ページ保存時の画像形式の変換

コラム Yahoo!ケータイ、EZweb対応ページを作る

コラム 携帯電話型プレビュー画面の機能

10.1.2 携帯ページをテンプレートから作成する

かんたんページ作成を使って作成する

コラム ホームページ・ビルダーの体験版

10.2 ●既存のページを携帯ページに変換する

10.2.1 作成したページを携帯ページに変換する

単一のページを変換する

コラム モバイルサイトコンバーター「MSC」

10.2.2 サイト全体のページを携帯ページに変換する

サイト全体のページを変換する

コラム QRコードを作成、挿入する

10.3 ●パソコン用とスマートフォン用のページを一元管理する

10.3.1 フルCSSテンプレートで作成したページをスマートフォン用ページに変換する

フルCSSテンプレートで作成したページを元にスマートフォン用ページを作る

10.3.2 パソコン用のページとスマートフォン用のページを同期する

10.3.3 スマートフォンサイトに自動転送するリダイレクと機能を使う

パソコン用のページにスマートフォンへのリダイレクト設定を行う

10.4 ●携帯ページ用の機能を利用する

10.4.1 携帯ページ用の挿入機能を利用する

携帯サムネイルを挿入する

コラム ターゲットブラウザーで扱える画像の形式

コラム iモードページ用の文字コード

コラム ページ容量を知るには

コラム 1行に表示できる文字数を変更する

iPhone/iPadタイトルを挿入する

携帯絵文字を挿入する

10.4.2 携帯ページをチェックする

タグの対応をチェックする

ページ容量を確認する

10.5 ●スマートフォン用の機能を利用する

10.5.1 スマートフォン用にページ属性の設定を行う

スマートフォンタブで設定を行う

コラム 同じページ内のリンクにスクロールで移動する

10.5.2 アコーディオン機能で内容を開閉できる見出しを作る

見出しにアコーディオンを設定する

コラム スマートフォンに適したCSS3のスタイルシートを使う

コラム スマートフォンに関連したその他の新機能と追加機能

Q&A

Chapter 11 ホームページを公開する

11.1 ●サイトを作成し、登録する

11.1.1 サイトを作成する

パソコン上に仮想サイトを作成する

コラム ページ一覧タブの表示を切り替える

11.1.2 サイト内のページを開く、閉じる

サイト内のページを開く

開いているサイトを閉じる

11.2 ●サイトを管理、メンテナンスする

11.2.1 サイトを編集する

サイトをコピーする

サイトを削除する

コラム サイトの設定を変更する

11.2.2 サイトにページを追加する

ビジュアルサイトビューのリンク画面

新規にページを追加する

コラム ビジュアルサイトビューのアイコン

既存のページを追加する

サイトへの追加を取りやめる(リンクを削除する)

11.2.3 サイト内のファイルを編集する

ビジュアルサイトビューのフォルダ画面

ファイル名を変更する

コラム ファイル名の命名作法

未使用ファイルを転送対象ファイルに変える

11.2.4 サイトの情報を更新する

サイトを編集して更新する

11.2.5 サイトサマリー(RSS)を設定する

サイトのサマリー情報を設定する

ページのサマリー情報を設定する

サイトサマリーへのリンクを挿入する

コラム ある程度できあがったサイト内でファイル名を変更する

11.2.6 サイト内をチェックする

サイトをまるごとチェックする

コラム ページごとまたは個別の項目ごとに再チェックを行う

コラム sDesignerでアクセシビリティーチェックを実行する

11.3 ●サイトを転送する

11.3.1 転送する前に確認する

ホームページの動作を確認する

トップページのファイル名について

転送先サイトのFTPサーバー名とフォルダー名

転送時に使用するFTPアカウント名とFTPパスワード

コラム ホームページの動作確認の要点

11.3.2 転送先の情報を設定する

転送設定を作成する

11.3.3 サイト単位で転送する

サイトをまるごと転送する

ホームページをWebブラウザーで確認する

11.3.4 ページ単位で転送する

ページ転送を行う

11.3.5 転送時間を予約する

転送予約を設定する

転送予約を管理する

11.3.6 トップページの切り替えを設定する

切り替えページを設定する

切り替えページを編集する

トップページの切り替えを有効にする

コラム サイトの開閉とビジュアルサイトビューの表示/非表示について

コラム サイトの転送がうまくいかない場合

コラム FTPSを利用してより安全に転送を行う

11.4 ●WordPressサイトを公開する

11.4.1 WordPressの設定をする

WordPressの設定をする

コラム プロバイダの設定項目

11.5 ●WordPressサイトを転送する

11.5.1 WordPressサイトを転送する

WordPressサイトを転送する

11.5.2 WordPressサイトにデータを反映させる

WordPressにログインして、WordPressサイトにデータを反映させる

Q&A

Chapter 12 特定用途のページを作成する

12.1 ●日記ページを作成する

12.1.1 日記を新規作成する

ページに日記を挿入する

12.1.2 日記を追加する

デスクトップから日記を追加する

コラム ホームページ・ビルダーで日記ページを開く場合

コラム Webカメラ機能で一定時間ごとに撮影した画像をホームページに送信する

12.1.3 日記のページにカレンダーを挿入する

カレンダーを作成する

コラム カレンダーの挿入機能で予定表を作る

12.2 ●アンケートページを作成する

12.2.1 アンケートを作成する

ウィザードを使ってアンケートを作成する

コラム 記述式設問について

アンケートの動作を確認する

コラム CGIを使ったアンケート

12.3 ●Yahoo!地図とGoogleマップを表示する

12.3.1 Yahoo!地図をホームページに表示する

Yahoo!地図のアプリケーションIDを取得する

Yahoo!地図をホームページに挿入する

Yahoo!地図を編集する

12.3.2 Googleマップをホームページに表示する

GoogleマップのAPIキーを取得する

Googleマップを挿入する

Googleマップを編集する

コラム ○秒後に自動的に別ページにジャンプする

12.4 ●アフィリエイト広告の入ったページを作成する

12.4.1 アフィリエイト情報を設定する

アフィリエイトのサービスプロバイダー情報を設定する

コラム アフィリエイトの対応プロバイダーについて

12.4.2 アフィリエイト商品をページに挿入する

アフィリエイトビューの商品検索タブから挿入する

コラム 挿入形式をポップアップ表示にした場合

12.4.3 アフィリエイト部品をページに挿入する

アフィリエイトビューの部品タブから挿入する

12.5 ●ブログを開設する

12.5.1 ブログを開設、登録する

ブログを開設する

ブログ情報を登録する

12.5.2 記事を作成する

ブログに投稿する記事を作成する

作成した記事をパソコンに保存する

コラム ブログから記事を取得するには

12.5.3 記事を投稿する

保存した記事を開く

投稿する

投稿した記事をブラウザーで確認する

コラム 投稿済みの記事を修正するには

12.6 ●ブログビューを利用する

12.6.1 ブログ記事を編集する

投稿済みのブログ記事を編集する

未投稿のブログ記事を削除する

12.6.2 ブログ記事をプレビューする

ブログ記事をブラウザーでプレビューする

12.6.3 更新PINGを送信する

送信済みのブログ記事に更新PINGを送信する

コラム 更新時にPINGを送信する

12.6.4 トラックバックURLを指定する

外部ブログのトラックバックURLを指定する

12.6.5 ブログ記事をホームページに書き出す

ブログ記事全体をホームページに書き出す

一部のブログ記事をホームページに書き出す

12.6.6 画像や動画ファイルをアップロードする

ファイルをアップロードしてブログ記事内に活用する

12.6.7 ブログ記事内の用語を検索・置換する

ブログ記事内の用語を検索する

ブログ記事内の用語を置換する

コラム ブログ記事投稿ビュー

12.7 ●ブログパーツビューを利用する

12.7.1 ブログパーツビュー

ブログパーツを登録する

ブログパーツをブログに挿入する

コラム ブログパーツのファイル化

12.8 ●検索サイトで上位にランクされるようにする

12.8.1 SEO設定を行う

ページのSEO設定をする

SEOチェックの設定をする

12.8.2 XMLサイトマップを作成する

XMLサイトマップを作成する

XMLサイトマップを登録する

12.8.3 ソーシャルネットワーク用のボタンを挿入する

ツイートボタンを設置する

その他のソーシャルネットワーク用のボタンを設置する

コラム ソーシャルネットワーク用のボタンで利用されるページ情報を設定する

12.9 ●アクセス解析を利用する

12.9.1 かんたんアクセス解析の利用手続きをする

かんたんアクセス解析サービスの利用手続きをする

かんたんアクセス解析のアカウントを設定する

12.9.2 サイトをアクセス解析対象に設定する

アクセス解析をするサイトを登録する

コラム 特定のページをアクセス解析の対象から外すには

12.9.3 アクセス解析の結果を確認する

アクセス解析チャートビューを表示する

アクセス解析の結果を確認する

12.9.4 WordPressサイトをアクセス解析の対象にする

WordPressサイトをアクセス解析の対象にする

12.10 ●公開中のWordPressサイトに記事を投稿する

12.10.1 公開中のWordPressサイトに記事を投稿する

記事を投稿する

12.10.2 公開中のWordPressサイトに投稿した記事を編集する

WordPressサイトに投稿した記事を編集する

12.10.3 閲覧者が付けたコメントを承認する

コメントを承認する

12.11 ●プラグインを利用する

12.11.1 FlipClip(フリップクリップ)を利用する

e-shopsカートを利用する

サイトサーブ・ストアツール 商品タナ作成を利用する

12.12 ●WordPressサイトの集客に役立つ機能を利用する

12.12.1 問い合わせフォームを設定する

問い合わせフォームを設定する

12.12.2 WordPressサイトでソーシャルボタンを設定する

ソーシャルボタンを設定する

Q&A

Chapter 13 プログラム関連機能を操作する

13.1 ●JavaScriptを利用する

13.1.1 特定の要素にイベントを設定する

ステータスバーにメッセージを表示するイベントを設定する

ブラウザーで動作を確認する

コラム スクリプトがブラウザーにブロックされる

コラム イベントの設定とイベント属性について

13.1.2 レイアウト枠に動きを付ける(ダイナミックHTMLの利用)

レイアウト枠を挿入し、効果を設定する

ブラウザーで動作を確認する

13.1.3 ページにスクリプトを挿入する

素材集のスクリプトを挿入する

スクリプトを作成して挿入する

コラム CGIとSSI

13.2 ●HTMLソースファイルを編集する

13.2.1 エディターズスタイルでHTMLソースを編集する

エディターズ編集スタイルに切り替える

ページ/ソースタブでHTMLソースを直接編集する

13.2.2 ソース編集の環境を整える

ソースのフォーマットを決定する

HTMLソースの表示をカスタマイズする

コラム 覚えておきたいXHTML編集の注意事項

13.2.3 HTMLタグを操作する

タグの挿入機能を使う

タグ一覧ビューを使ってタグの属性を指定する

13.3 ●HTMLソースファイルをチェックする

13.3.1 HTMLのエラーをチェックする

HTMLエラーの自動修正機能を設定する

HTMLの構文をチェックする

コラム [HTML構文エラーを自動修正する]のオプションについて

13.3.2 外部リンクをチェックする

他のサイトへのリンクをチェックする

コラム サイト全体のクリーンアップを行う

13.3.3 無駄なタグがないかをチェックする(HTMLのクリーンアップ)

クリーンアップのチェック項目を設定する

HTMLをクリーンアップする

13.3.4 ページの使いやすさをチェックする(アクセシビリティのチェック)

アクセシビリティメータを設定する

アクセシビリティを手動でチェックする

コラム HTMLクリーンアップの対象項目について

Q&A

Chapter 14 付属ツールを使う1?GIF、JPEG関連

14.1 ●ウェブアートデザイナーを使う

14.1.1 ウェブアートデザイナーを起動する

ホームページ・ビルダーから起動する

ホームページ・ビルダーから画像を読み込ませて起動する

画面各部の名称と機能

コラム キャンバスのサイズを変える

コラム ウェブアートデザイナーで使用できる画像ファイル形式

14.1.2 写真イメージを補正する

色調を補正する

明るさとコントラストを補正する

コラム 画像の補正について

14.1.3 写真イメージに効果をかける

特殊効果をかける

ボタン効果をかける

影効果をかける

14.1.4 ロールオーバー付きのボタンを作成する

ウェブアート素材を利用してロールオーバーを作成する

コラム 作成したボタンをグループ化する

14.1.5 図形を作成する

直線を描く

コラム 操作ツールバーのボタン機能

折れ線を描く

手書き風の曲線を描く

四角形を描く

文字を入力する

コラム 文字の書体やサイズを指定する

14.1.6 画像を編集する

オブジェクトを拡大、縮小する

コラム 色や線などを指定してオブジェクトを作成する

複数のオブジェクトを整列する

オブジェクトの重なりを変更する

オブジェクトを回転する

オブジェクトを反転する

14.1.7 画像を保存する

ウェブアートデザイナーのファイルとして保存する

コラム 複数のオブジェクトをまとめて拡大、縮小するには

Web用の画像として保存する

14.1.8 画像をホームページ・ビルダーに送る

選択した画像を送る

コラム ホームページ・ビルダーから画像を読み込むには

14.2 ●デジすたマーカー2を使う

14.2.1 デジすたマーカー2を起動する

ホームページ・ビルダーから起動する

14.2.2 透かしスタンプを入れる

画像にイラストの透かしスタンプを入れる

コラム 透かしスタンプの種類

14.2.3 目に見えない透かし(透かしラベル)を入れる

画像に透かしラベルを入れる

14.2.4 透かし入りの画像をホームページ・ビルダーへ送る

透かしスタンプ入りの画像をホームページ・ビルダーへ送る

コラム 透かしラベル入りの画像をホームページ・ビルダーへ送る

コラム 透かしラベルの抽出について

コラム デジすたマーカー2で使用できる画像ファイル形式と制限事項

14.3 ●ウェブアニメーターを使う

14.3.1 ウェブアニメーターを起動する

ホームページ・ビルダーから起動する

コラム スタートアップダイアログボックスの機能について

ホームページ・ビルダーからGIF画像を読み込ませて起動する

画面各部の名称と機能

14.3.2 アニメーションを作成する

ウィザードで作成する

14.3.3 アニメーションを編集する

フレームを追加する

フレームを削除する

コラム ウェブアニメーターで使用できる画像ファイル形式

フレームを移動する

フレームをコピーする

属性フレームの設定を変更する

コラム フレームの設定を一覧する

個々のフレームの設定を変更する

14.3.4 アニメーションを保存する

アニメーションに名前を付けて保存する

コラム アニメーション全体の再生時間を変更するには

コラム アニメーションを最適化する

14.3.5 アニメーションをホームページ・ビルダーに送る

作成したアニメーションを送る

Q&A

Chapter 15 付属ツールを使う2?動画/マルチメディア/CSS/FTP

15.1 ●ウェブビデオスタジオを使う

15.1.1 ウェブビデオスタジオを起動する

ホームページ・ビルダーから起動する

コラム ウェブビデオスタジオへようこそダイアログボックスの機能について

画面各部の名称と機能

モニターのボタン機能

編集領域の機能

コラム トラックの機能

コラム ウェブビデオスタジオで使用できる各種ファイル形式

15.1.2 ビデオを作成する

ウィザードでビデオを作成する

コラム 素材として利用できるムービーファイルの形式

ビデオをプレビューして確認する

15.1.3 ビデオを編集する

クリップの長さを調整する

クリップを追加する

コラム クリップの詳細設定を行う

15.1.4 ビデオプロジェクトを保存する

プロジェクトに名前を付けて保存する

コラム ビデオ出力の設定

15.1.5 ビデオをホームページ・ビルダーに送る

ビデオファイルを出力して送る

コラム 出力ファイルの種類について

15.2 ●CSSエディターを使う

15.2.1 CSSエディターを起動する

ホームページ・ビルダーから起動する

ホームページ・ビルダーから外部スタイルシートを読み込ませて起動する

画面各部の名称と機能

15.2.2 CSSソースを記述する

スタイルの設定ダイアログボックスを使って記述する

記述したスタイルを変更する

プレビューでスタイルを確認する

15.2.3 CSSソースをチェックする

CSSソースを整形する

コラム @ルールを設定する

CSSソースの文法をチェックする

15.3 ●ファイル転送を使う

15.3.1 ファイル転送を起動する

ホームページ・ビルダーから起動する

画面各部の名称と機能

15.3.2 サーバーに接続する

転送設定を登録する

サーバーに接続する

15.3.3 ファイルをサーバーに転送する

選択したファイルを転送する

15.3.4 サーバー上のファイルを操作する

サーバーからファイルをダウンロードする

サーバー上のファイルを削除する

コラム サーバー上のファイルを操作する

Q&A

Chapter 16 ホームページ・ビルダー クイックを使う

16.1 ●ホームページ・ビルダー クイックの起動方法

16.1.1 ホームページ・ビルダー クイックを起動する

スタートメニューから起動する

ウィザードの指示に従って操作する

16.1.2 ホームページ・ビルダー クイックの画面

画面各部の名称と機能

コラム スタイルビューの操作方法

16.2 ●ホームページ・ビルダー クイックによるページ編集

16.2.1 ページのスタイルを変更する

スタイルビューを使ってテーマやレイアウトを変更する

16.2.2 ページのヘッダー/フッターを編集する

ヘッダーバナーを編集する

16.2.3 ページを追加する

目次にページを追加する

目次からページを外す

16.3 ●ホームページ・ビルダー クイックによるページ転送

16.3.1 転送先の情報を設定する

新しい転送設定を作成する

コラム 「Just MyStage」から「ホームページ・ビルダーサービス」へ

16.3.2 ページを転送する

サイト単位で転送する

16.4 ●Qパーツでリンクする

16.4.1 日記の追加・編集・リンクしたカレンダーを作成する

日記を追加してQパーツ一覧ビューに登録する

Qパーツ一覧ビューに登録した日記を編集する

日記とリンクしたカレンダーを作成する

コラム アクセシビリティ

16.4.2 新規作成したページをQパーツ一覧ビューに登録・リスト化する

新規作成したページをQパーツ一覧ビューに登録する

新規作成したページをリストにする

Q&A

Appendix 資料

Appendix1 ●ホームページ・ビルダー 17の仕様

app.1.1 ホームページ・ビルダー 17と各種ツールの使用可能ファイルについて

app.1.2 HTMLタグ対応状況一覧

app.1.3 スタイルシート(CSS)対応状況一覧

CSSレベル2(CSS2)

CSSレベル3(CSS3)

Internet Explorer拡張

Appendix2 ●編集スタイル別ツールバー一覧

app.2.1 かんたん編集スタイルのツールバーとかんたんナビの機能

かんたんナビバーの機能

かんたツールバーの機能

かんたんナビメニューの機能

app.2.2 スタンダードとエディターズ編集スタイルのツールバーの機能

標準ツールバーの機能

書式ツールバーの機能

表示ツールバーの機能

挿入ツールバーの機能

表ツールバーの機能

フレームツールバーの機能

URLツールバーの機能

ズームツールバーの機能

入力部品ツールバーの機能

スタイルクラスツールバーの機能

Appendix3 ●ホームページ・ビルダー 17の付属素材

app.3.1 フルCCSテンプレート一覧

フルCSSテンプレート

フルCSSスマートフォンテンプレート

app.3.2 ベーシックテンプレート(ひな形)一覧

PCページに用意されているテンプレート

携帯ページに用意されているテンプレート

入門用PCページに用意されているテンプレート

app.3.3 スタイルシート一覧

ホームページ・ビルダーに用意されているスタイルシート

app.3.4 スタイリッシュエフェクトの配色一覧

PR

秀和システム