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

概 要

ホームページビルダー19では従来の自由なホームページ作成機能に加え、とにかく手軽にホームページができる「ホームページ・ビルダーSP」機能が追加され、これまで以上にお手軽にホームページを作ることができるようになりました。本書は、ホームページ・ビルダーSPの使い方はもちろん、ホームページ・ビルダーで自分が思うとおりのページを作るためのノウハウをあますことなく解説します。集客できる本格派サイト作りがわかります!

著者 金城俊哉
価格 本体2980円(税別)
ISBN 978-4-7980-4242-8
発売日 2014/12/12
判型 B5変
色数 4色
ページ数 792
CD/DVD
ダウンロード
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

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

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

サポート

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

サポート情報へのリンク

目次

Chapter 0 ゼロからスタート!

0.1 「ホームページ」で何ができるの?

0.1.1 ホームページで情報を発信

「何かをしたい」からホームページを作るのですね

Webサイトの種類

0.2 ホームページ作成をゼロからスタート!

ホームページ・ビルダーの操作手順をおぼえよう

ホームページ・ビルダーでのWebサイト作成の手順

0.3 本書の読み方

最初から順番に読まなくたっていい!

Chapter 1 インターネットとWebサイト

1.1 インターネットとWebサイトの仕組み

1.1.1 そもそもホームページ・ビルダーの「ホームページ」って何?

ホームページとは

WebサイトとWebページ

1.1.2 インターネットとWebサイトの仕組み

インターネットでつながっているからWebページが見られる

インターネットの住所は「URL」

メモ Webの通信方法

1.1.3 Webサイトの開設に必要なものは

WebサーバーとURLの用意

Webページの用意

Chapter 2 ホームページ・ビルダーで何ができる?

2.1 ホームページ・ビルダーに同梱されている2つのソフト

2.1.1 ホームページ・ビルダー19 SP

ホームページ・ビルダーSPはこんなソフト

2.1.2 ホームページ・ビルダークラシック

ホームページ・ビルダークラシックで何ができるの?

メモ 「テンプレート」ってそもそも何?

2.1.3 ホームページ・ビルダーを使ってWebページを作る手順

ホームページ・ビルダーSPでWebページを作成する

メモ Webオーサリングツール

メモ ホームページ・ビルダー19 SPと「かんたんホームページ・デビュー」は何が違うの?

ホームページ・ビルダークラシックでWebページを作成する

2.2 ホームページ・ビルダーに搭載されている便利な機能

2.2.1 ホームページ・ビルダーには便利な機能がこんなにある

ホームページ・ビルダーの便利な機能を見る

ウェブアートデザイナー

Chapter 3 ホームページ・ビルダーSPでかんたんホームページ作成

ホームページ・ビルダーSPで「最もカンタン」に、「素早く」ホームページを作ります

3.1 ホームページ・ビルダーSPでサイトのページをまとめて作成

アテンション Chapter3のサンプルデータについて

3.1.1 サイトを用意して指定したデザインのWebページを作る

Webサイトとローカルサイト

ホームページ・ビルダーSPはサイトに必要なページを一気に作成する

ホームページ・ビルダーSPでサイトを作成する

メモ 「ガイドメニュー」の内容

メモ テンプレートの種類

3.1.2 サイトに作成されたWebページを確認しよう

サイト内に作成されたWebページを確認する

Webページの構成を確認しよう

メモ ローカルサイトの自動保存

ヒント サイトのデータはどこに保存されているの?

3.1.3 サイトを保存してからもう一度開いてみよう

サイトを保存して閉じる

サイトを開く

3.2 文字を編集しよう

3.2.1 ヘッダーのテキストとメインの文章を書き換える

ヘッダーのテキストを編集する

ヒント 見出し文字の書き換えについて

メモ 住所と電話番号の書き換えはほかのページにも反映される

メインの文章を書き換える

3.2.2 リストの部分を書き換える

「トピックス」の文章を書き換える

ヒント 画面を広く使いたい!

3.2.3 リストの項目を追加/削除する

「トピックス」に新たな項目を追加する

リストの項目を削除する

ヒント 編集領域の倍率を変更するには

3.2.4 文字の大きさや太さ、色を変更する

フォーカス枠の上部のボタン

メインの文章をピンク色の太字にする

3.3 ページの見た目をカスタマイズしよう

3.3.1 トップページのロゴを変更する

社名のロゴを書き換える

ティップス タイトルロゴの背景色を変更する

メモ タイトルロゴをまるごと別のデザインにする

3.3.2 メインの背景イメージを変更しよう

メインのイメージをまったく別のイメージに変更する

メモ グリッドを表示して正確な位置に配置する

アテンション 変更したイメージをもとに戻す

3.3.3 ロゴイメージを最初から作る

メインのロゴ入りイメージを新しく作り変える

3.3.4 リストのデザインをまるごと入れ替える

リストにデザインを適用して項目を目立たせる

3.3.5 ページの見た目をブラウザーで確認しよう

まずは[プレビュー]ウィンドウで確認

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

3.3.6 スマホ向けのページをプレビューする

スマートフォン用の画面に切り替えてみよう

メモ キャンバス上に配置したイメージのサイズを変更する

3.4 便利なパーツを配置しよう

3.4.1 [パーツ一覧ビュー]から好きなパーツを配置してみよう

まずはどんなパーツがあるのか見てみよう

パーツを配置してみよう

メモ パーツのサイズ変更

メモ パーツの配置

3.4.2 サイドバーにテキストボックスを配置してみよう

テキストボックスの配置

3.4.3 ページに画像を挿入してみよう

ページ上にイメージパーツを配置する

ヒント 配置したパーツを別の場所へ移動するには

ヒント いらなくなったパーツを削除するには

3.4.4 地図を配置する

ページ上に地図を配置しよう

3.4.5 SNSのボタンを配置する

SNSボタンを配置する

ツイートボタンを設定してみる

ヒント サイトナビゲーションをメインのイメージの下に追加する

ヒント Yahoo!mapsを利用する

ヒント 挿入した表の行や列を追加/削除するには

3.5 サイトの構造を変更する

3.5.1 サイトに新しいページを追加する

新規のページをサイトに追加する

ワンポイント テンプレートから新規ページを作成する

ヒント [ページの新規作成]ダイアログボックスの[親ページ]って何?

3.5.2 ページのタイトルを変更する

「プライバシーポリシー」のページを「個人情報の取り扱いについて」に変更する

3.5.3 閲覧者からの問い合わせを受け取るようにする

問い合わせフォームの仕組み

問い合わせフォームが動作するように設定する

3.6 サイトをインターネットで公開する

3.6.1 サイトを公開するための準備

[転送設定]を起動して設定を行う

ワンポイント [プロバイダの選択]でプロバイダーを選択したときの画面

メモ Webサイトをホームページ・ビルダーSPから開く

3.6.2 サイトのデータをサーバーに転送する

データをアップロードしてサイトを公開する

ヒント 「レンタルサーバー」って何?

ヒント ドメインってどうやったらもらえるの?

Chapter 4 まっさらな状態からナビゲーションメニュー付きのページを作成しよう

まっさらな状態からナビゲーションメニュー付きの本格的なWebページを作成する

4.1 Webページの保存場所を作成しよう

4.1.1 パソコンに「ローカルサイト」を作成しよう

「ローカルサイト」はパソコン上のWebサイト

ローカルサイトを作成する

メモ 不要になったローカルサイトを削除するには

4.1.2 ローカルサイトとトップページの中身がどうなっているか確認しよう

ローカルサイトの中身を確認する

トップページがどうなっているのか確認しよう

4.1.3 hpbクラシックの画面を理解しよう

ビューの表示/非表示の切り替え

「かんたん」「スタンダード」「エディターズ」の画面

4.1.4 サイトを閉じる/開く

ローカルサイトを閉じる

ローカルサイトを開く

4.2 30分でわかるHTMLとCSS!

4.2.1 HTMLの設定はタグで行う

HTMLの書き方のキモ

見出しや段落を設定するタグ

タグでマークアップしてみよう

HTMLドキュメントの構造

4.2.2 CSSでページの見栄えを設定する

CSSで文字の色を指定する

CSSで見出し1の文字を赤にする

4.2.3 まずはCSSの書き方をマスターしよう

CSSを記述する

メモ 「セレクター」って何の役目をするの?

4.2.4 セレクターを使ってCSSを適用しよう

タイプセレクター

クラスセレクター

IDセレクター

ヒント クラスセレクターとIDセレクターを使い分けよう

4.2.5 HTMLのタグの役割

HTMLのタグを付ける意味

HTMLドキュメントとCSSファイルを別々にするメリット

メモ HTMLドキュメントにコメントを入れる

ヒント 大文字を使う? それとも小文字?

メモ HTMLのバージョン

ティップス 複数セレクター

メモ CSSのバージョン

4.3 ナビゲーションメニュー付きの2段組ページのレイアウトを設定しよう

4.3.1 HTMLのバージョンとページタイトルを設定しよう

HTMLのバージョンとWebページのタイトルを設定する

4.3.2 Webページをブロックで使い分けよう(レイアウトコンテナの設定)

HTMLドキュメントをレイアウトコンテナでブロック化する

メモ index.htmlのヘッダー情報に追加されているコード

4.3.3 ページの余分なスペースを取り除く

ページの端に余分なスペースが表示されないようにする

メモ 作成したCSSルールの修正

4.3.4 HTML要素の余白について(マージンとパディング)

まずは「ボックス」について知ろう

具体的なボックスを見てみよう

マージンの設定

パディングの設定

メモ 適用したCSSルールを解除する

4.3.5 ページ全体のレイアウトを設定する

ページの外側に枠線を表示してページ全体をセンタリングさせよう

4.3.6 ヘッダーのスタイルを設定してタイトル用のイメージを表示する

ヘッダーのスタイルを設定する

4.3.7 サイドバーをページの左に貼り付けよう

IDセレクターを使ってサイドバーのCSSルールを定義する

メモ 背景イメージを表示するためのCSSルール

4.3.8 メインコンテンツをサイドバーの右側に表示しよう

IDセレクターを使ってメインコンテンツのCSSルールを定義する

4.3.9 フッターをページ下部に表示しよう

フッターのスタイルを設定する

4.3.10 ナビゲーション用のメニューを作ろう

まずはメニュー用のテキストを入力して箇条書きを設定する

メニュー用のテキストにリンクを設定しよう

ナビゲーションメニューにCSSルールを適用してメニューらしい外観にする

リンクボタンを作成する

メモ ヘッダーの文字

項目がポイントされると色が切り替わるようにする

コラム [カーソル位置]パネル

4.3.11 テキストを入力する

メインコンテンツのテキストを入力する

サイドバー用のテキストの入力とマークアップ

フッター用のテキストを入力する

4.3.12 テキストのスタイルを設定する

h1要素のCSSルールを作成する

h2要素のCSSルールを作成する

ヒント CSSを適用していないのにh1要素やh2要素の文字が大きく表示されるのはなぜ?

h3要素のCSSルールを作成する

h4要素のCSSルールを作成する

メインコンテンツの段落のスタイルを設定する

サイドバーの段落のスタイルを設定する

4.4 CSSルールの外部ファイルへの書き出しとサブページの作成

4.4.1 CSSルールを専用のファイルに書き出す

HTMLドキュメントのCSSルールをCSS専用ファイルに書き出す

メモ 外部ファイルに書き出したCSSルールを編集する

4.4.2 サブページを作成してリンクを設定する

トップページのナビゲーションメニューにリンクを設定する

ヒント Webページの配色を考える

トップページをまるごとコピーしてサブページ用の土台を用意する

表示中のページのメニュー項目をハイライト表示する

リンク先のページの設定

メモ CSSエディター

Chapter 5 縦型のナビゲーションメニューを配置したページを作成する

縦型のナビゲーションメニューを配置したWebページの作成

5.1 縦型のナビゲーションメニューを配置したページの構造を決めよう

5.1.1 HTMLのバージョンとページタイトルを設定しよう

HTMLのバージョンとWebページのタイトルを設定する

5.1.2 Webページの構造を決めよう

ヘッダー/フッターとレイアウトコンテナを配置する

メモ リストを設定するul要素

5.2 CSSルールを作成してページをレイアウトする

5.2.1 ページ全体をセンタリングさせよう

body要素に背景色とマージン/パディングを設定する

メモ RGB

ページ全体のレイアウトコンテナにセンタリングを設定する

5.2.2 ヘッダーに背景イメージとボーダーを表示しよう

ヘッダーのスタイルを設定する

5.2.3 縦型のナビゲーションメニューを作ろう

これから作成するナビゲーションバー用のCSSルール

ナビゲーションメニューをページの右側に配置して全体のスタイルを設定しよう

リストにスタイルを設定してボタンスタイルのメニューを作ろう

5.2.4 メインコンテンツをページの右側に配置しよう

メインコンテンツにスタイルを設定してページの右側に配置する

5.2.5 フッターをページの最下部に配置しよう

フッターをページの一番下に配置する

5.2.6 見出しや段落のスタイルを設定する

ヘッダーの段落スタイルを設定する

見出し1(h1要素)のスタイルを設定する

見出し2(h2要素)のスタイルを設定する

見出し3(h3要素)のスタイルを設定する

メインコンテンツの段落スタイルを設定する

見出し1の一部のテキストにスタイルを設定する

メインコンテンツのテキストを入力する

5.2.7 外部スタイルシートへの書き出し

HTMLドキュメントのCSSルールをCSS専用ファイルに書き出す

5.3 ページにイメージを配置しよう

5.3.1 メインコンテンツにイメージを配置する

ページの中にイメージを貼り付ける

5.3.2 CSSルールを作成してイメージの横にテキストを回り込ませる

イメージに適用するCSSルールを作成する

イメージにCSSルールを適用する

メモ 「回り込み」の意味

Chapter 6 大型のナビゲーションバーを配置したHTML5完全対応ページを作成する

HTML5の新要素を利用したWebページの作成

6.1 Webページの骨格を決める

6.1.1 ページの基本構造の設定とテキストの入力

HTMLのバージョンとWebページのタイトルを設定する

ヘッダー、メインコンテンツ、サイドバー、フッターを配置しよう

6.1.2 ヘッダーを作り込む

ヘッダーにリストを挿入する

ヘッダーにイメージを配置する

6.1.3 メインコンテンツをセクションごとに区分けしよう

section要素ってどう使えばいいの?

メインコンテンツに2つのセクションを配置する

ワンポイント カーソルがうまく移動できないよ!

設定されたsection要素を確認しよう

メモ テーマカラーとコンビネーションカラー

6.1.4 サイドバーを作ろう

サイドバーに4つのセクションを配置する

各セクションの段落の先頭にイメージを配置する

6.1.5 3つのセクションを配置したフッターを作ろう

footer要素内部に3つのsection要素を配置する

フッターの最下部に段落を1つ配置しよう

6.1.6 最後にページ全体を1つのレイアウトコンテナにまとめておこう

ページ全体を1つのレイアウトコンテナにまとめる

6.1.7 HTMLドキュメントを確認して本項の作業を完了しよう

これまでに書き出されたHTMLのコードを確認する

6.2 CSSルールを適用してページのレイアウトと見栄えを設定しよう

6.2.1 ページ全体の「枠」を決めるCSSルールを作成する

body要素に適用するCSSルールを作成する

ページ全体をまとめたレイアウトコンテナに適用するCSSルールの作成

6.2.2 基本要素のスタイルを設定する

見出しと段落に適用するCSSルールの作成

6.2.3 ヘッダーに適用するCSSルールを作成する

header要素とヘッダー内の2つのイメージに適用するCSSルールの作成

6.2.4 ナビゲーションバーのスタイル設定する

nav要素に含まれる要素に適用するCSSルールを作成する

6.2.5 メインコンテンツとサイドバーを2段組で表示する

ページ全体のレイアウトコンテナにCSSルールを適用しよう

メインコンテンツのスタイル設定

サイドバーのスタイル設定

スタイル適用後のメインコンテンツとサイドバーの位置を確認する

6.2.6 サイドバーの要素をブロック状に表示する

section要素をブロック型にして縦に並べる

ボックス要素の角を丸くして影を付ける

サイドバーのイメージと見出しのスタイル設定

ティップス セクション関連の要素に適用するCSSルールを作成する

6.2.7 フッターのセクションを3段組で表示する

まずはフッターをページ最下部に配置するためのスタイルを設定しよう

フッター最下部の著作権表示の段落に適用するCSSルールの作成

6.2.8 リンク先が表示中のページだとわかるようにしておこう

表示中のページのリンクの色を目立たせる

6.2.9 テキストを入力してページを完成させる

ダミーのテキストを本文用のテキストに書き換えてみよう

ティップス 古いブラウザーにCSS3の仕様を適用する

ヒント テキストの拡大表示に対処する

ティップス HTML5の新要素を旧バージョンのIEに認識させる

Chapter 7 テキストの配置とページ全体の操作

ドキュメントにおけるテキストの配置とスタイルの設定を極める

7.1 テキストの入力とスタイルの設定

7.1.1 テキストの入力と段落の設定

新規のページにテキストを入力する

7.1.2 見出しの設定

見出しを設定する

設定した見出しを通常の段落に変更する

7.1.3 他のファイルからテキストをコピーする

メモ帳のテキストデータをコピー&ペーストでページ上に貼り付ける

ヒント Wordから文字をコピーするとどうなる?

7.1.4 段落を区切り線を使って分割する

段落間を水平線で区切る

メモ 水平線

7.1.5 リスト形式でテキストを配置する

テキストを箇条書きで表示する

7.1.6 セクションごとに番号を付ける

セクションごとに連番を振る

7.2 テキストのスタイルを設定する

7.2.1 テキストの外観をCSSルールで設定する

CSSの3種類のセレクター

CSSの保管場所

7.2.2 段落のテキストのスタイルを設定する

ページ内のすべての段落のテキストを青にする

7.2.3 クラスセレクターを使用してテキストにスタイルを設定する

2つ目の段落のテキストのサイズと段落回りの余白を設定する

7.2.4 IDセレクターを使用してテキストにスタイルを設定する

1つ目の段落のすべてのテキストを「太字」に設定する

7.2.5 段落内の特定のテキストだけにスタイルを設定する

段落の冒頭の文字だけを赤で表示する

7.2.6 テキストに設定できるスタイルはこれだ!

[スタイルの設定]の[フォント]タブの設定項目

[スタイルの設定]の[文字のレイアウト]タブの設定項目

7.2.7 テキストの背景色の設定

特定の段落に背景色を設定する

特定のテキストだけに背景色を設定する

ティップス 段落の背景にイメージを表示するワザ

7.2.8 ページの本文に対してレイアウト用のスタイルを適用する

ページの本文の左右にスペースを入れる

Webブラウザーでプレビューしてみる

ヒント 本文の左右のマージンについて

7.2.9 テキストブロックの表示

テキストブロックを設定するCSSルールの作成

Webブラウザーでプレビューしてみる

ティップス テキストブロックの横に後に続く要素を回り込ませる

ティップス テキストブロックにスクロールバーを表示する

メモ スタイリッシュエフェクトでページのデザインを一括設定

ヒント Webページの配色を考える

Chapter 8 イメージの配置と効果の設定

イメージを自在に配置してスタイルを設定しよう

8.1 イメージを配置するテクニックをマスターしよう

8.1.1 イメージの基礎知識

Webで利用できるイメージのファイル形式

8.1.2 イメージを配置する

イメージを配置する

[フォルダビュー]を使ってイメージを挿入する

ホームページ・ビルダーの素材集からイメージを挿入する

メモ 配置したイメージを別のイメージに交換する

8.1.3 挿入したイメージのサイズを変更する

イメージのサイズを変更する

8.1.4 画像のトリミング、回転、特殊効果

画像の一部をトリミングする

ホームページ・ビルダーで行えるその他の加工処理

8.1.5 イメージにフォトフレームを付ける

イメージをフォトフレームで装飾する

フォトフレームの再編集

8.1.6 イメージにロゴや吹き出しを追加する

イメージにロゴを付け加える

8.1.7 デジカメの写真を配置する

デジカメの写真を加工してページに貼り付ける

8.2 CSSを利用してイメージをレイアウトする

8.2.1 Webページにイメージを配置してレイアウトする

イメージだけを配置してレイアウトの設定を行う

8.2.2 イメージをボーダーで縁取る

イメージにCSSを適用してグレーの枠で回りを縁取る

8.2.3 名前付きのCSSルールをイメージに適用する

クラスセレクターを設定したCSSルールをイメージに適用する

メモ [属性]ダイアログボックスを使ってサイズを変更する

8.2.4 レイアウトコンテナを利用してイメージを配置する

レイアウトコンテナを使ってイメージを配置する

8.2.5 イメージとテキストを一体化して配置する

イメージの横にテキストを並べて表示する

8.2.6 段落の中にイメージを配置する

イメージとテキストを埋め込んだ段落を縦に配置する

ヒント 段落間のスペースを空ける

8.2.7 イメージを配置した段落をブロック状にして並べよう

まずはレイアウトコンテナ全体が横に伸びないようにする

ティップス 「レイアウト枠」を使ってイメージを配置する

Chapter 9 リンクの設定

サイト内のページへのリンクを設定しよう

9.1 リンクの設定

9.1.1 ウィザードを使ってテキストにリンクを設定する

リンク作成ウィザードでリンクを設定する

ヒント リンクの[ターゲット]って何?

9.1.2 [属性]ダイアログボックスでリンクを設定する

[属性]ダイアログボックスでテキストにリンクを設定する

9.1.3 ツールバーを使ってリンクを手早く設定する

[URL]ツールバーを使ってリンク情報を書き込む

メモ リンクを設定するときの「相対パス」

9.1.4 リンク情報の編集と削除

リンク情報を編集する

リンクの設定を解除する

9.1.5 イメージにリンクを設定する

リンクボタン用のイメージにリンクを設定する

9.1.6 Web上のページへのリンクを設定する

他のサイトのページへのリンクを設定する

9.1.7 メール送信用のリンクを設定する

メール送信用のリンクを設定する

9.1.8 イメージの一部にリンクを設定しよう

1つのイメージの領域ごとに異なるリンクを設定する

9.2 リンクメニューとサイトマップの作成

9.2.1 ウィザードを使ってリンクメニューを作成する

「リンクメニュー新規作成ウィザード」でサイト内のリンクをまとめて作成する

リンクメニュー新規作成ウィザードの機能

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

サイトマップのページを作成する

ヒント 「CSIM」とか「NCSA」「CERN」って何ぞや?

コラム サイトマップへのリンクをお忘れなく

9.3 ページ内の「目次」を作成する

9.3.1 ページ内部の目次を作成する

ページ内部に目次を作成して配置する

Chapter 10 イメージを魅力的に見せるテクニック

複数のイメージを「効率的に」かつ「面白く」見せる

10.1 フォトアルバムを作る

10.1.1 ページ上にフォトアルバムを配置しよう

[アルバム作成ウィザード]でアルバムを作成する

10.2 スライドショーで写真を切り替えるページの作成

10.2.1 ウィザードを使ってスライドショーを配置しよう

[スライドショー作成ウィザード]でスライドショーを配置する

コラム Internet Explorerにおけるスライドショーの実行

10.3 サムネイルを利用してカタログページを作る

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

[サムネイル作成ウィザード]でサムネイルを作る

コラム [リンク先の設定]にある[ページ]って何?

コラム サムネイルの編集と削除

10.4 マウスポイントで瞬時に画像を切り替える

10.4.1 2枚のイメージでロールオーバーを実現する

[画像のロールオーバーウィザード]でロールオーバーの設定を行う

10.4.2 ロールオーバーでイメージを歪めて見せる

ロールオーバーでもとのイメージを歪めたイメージにスワップする

10.5 画像の一部をブロック単位で別の画像に切り替える

10.5.1 メッシュ効果を利用して画像の一部だけをロールオーバーさせる

ウィザードを使ってメッシュ効果を設定する

10.6 テキストにアニメーションを設定する

10.6.1 パラパラまんが風の文字アニメーションを作成する

メモ アニメーションの保存

10.7 Flashタイトルを作成してヘッダーに配置する

10.7.1 Flashアニメーションを設定したイメージをヘッダーに配置する

ヘッダー用のイメージにフェードインするアニメーションを設定する

10.7.2 複数のイメージを切り替えるアニメーションを設定する

2枚のイメージを交互にフェードインさせる

10.8 jQueryフォトモーションを作成する

10.8.1 「フォトモーション」を起動してスライドショーを作成する

サムネイル付きのスライドショーを作成する

ティップス 写真が横にスクロールする「カルーセル」を作成する

10.8.2 写真にズーム機能を付ける

ズーム機能が付いた写真を配置する

Chapter 11 フルCSSテンプレートを利用したスタイリッシュなサイトの作成

フルCSSテンプレートで「素早くカンタン」に「プロ並みのページ」を作る

11.1 フルCSSテンプレートでサイトを作成

11.1.1 フルCSSテンプレートでサイトのページを一括で作成する

フルCSSテンプレートから好みのスタイルを選択してサイトを作成

11.1.2 ページのテキストを書き換える

テンプレートで作成したページの本文を書き換える

11.1.3 ナビゲーションメニューの項目名を書き換える

メニューの項目名とリンク先のページのファイル名を変更する

ワンポイント ステータスバーにタグ属性を表示する

メモ 「隠れ文字」

11.2 レイアウトの変更

11.2.1 サイトのレイアウトを一括して変更する

サイト内のページのデザインを一括してまったく違うデザインに変える

11.2.2 配置済みのイメージを別のイメージに変更する

ページ上部のメインのイメージを取り換える

11.2.3 メインの背景画像をウェブアートデザイナーで編集する

ページ上に配置済みのイメージを編集する

メモ メインのイメージに埋め込まれた「隠し文字」も変更しておこう

11.2.4 [合成画像の編集]でイメージを手軽に編集する

[合成画像の編集]でバナーのイメージを編集する

ティップス リスト項目を追加する

11.2.5 ナビゲーションメニューとバナーの項目順を入れ替える

ナビゲーションメニューとバナーの項目の順番を入れ替える

ティップス 共通部分を書き換えてサイト内のすべてのページに反映させる

11.3 フルCSSテンプレートを利用したスマホ用ページの作成

11.3.1 フルCSSテンプレートのサイトにスマホ用サイトを追加する

PC版のサイトにスマートフォン用サイトを追加する

ワンポイント [サイドバーを表示しない]を[タイトル画像を指定する]

ティップス フルCSSテンプレートからスマホ専用サイトを作成する

11.4 フルCSSテンプレートで作成したサイトのページ構成を変える

11.4.1 必要がないページを削除してリンクも削除する

自動的に作成された「活動報告」のページを削除する

ティップス サイト内に新規のページを追加する

ティップス フルCSSテンプレートのPCページとスマホページを同期させる

Chapter 12 Webサイトの公開

ローカルサイトのデータを転送してWeb上で公開しよう

12.1 ローカルサイト内のデータをWebサーバーに一括転送する

12.1.1 転送先の情報を登録する

転送先の情報の登録

12.1.2 ローカルサイトのデータをまとめてアップロードする

ローカルサイトを開いた状態ですべてのデータをアップロードする

12.1.3 指定したページだけをアップロードする

ローカルサイトの指定したファイルだけをアップロードする

メモ 転送対象

12.2 ファイル転送ツールでアップロードする

12.2.1 ファイル転送ツールを起動して転送先を登録する

アップロード先の情報を登録する

12.2.2 Webサーバーに接続する

ローカルサイトの内部を表示する

Webサーバーに接続する

12.2.3 ファイルをアップロードする

ローカルサイトのデータをアップロードする

ティップス 転送時間を予約しておく

Chapter 13 特殊な用途のWebページの作成

日記のページや地図のページを作成しよう

13.1 日記ページの作成

13.1.1 日記を書いてページに貼り付ける

Web日記を作成してページ上に貼り付ける

13.1.2 日記を追加する

ショートカットから[Web日記]を起動して新しい日記を追加する

メモ [Web日記]における転送予約

メモ Web日記の削除

ティップス 日記のサイトにカレンダーページを配置する

13.2 アンケートページの作成

13.2.1 アンケート用のページを作成する

ウィザードでアンケートページを作成する

13.3 GoogleマップとYahoo!ロコ-地図を表示する

13.3.1 Googleマップを表示する

Googleマップで南青山一丁目の地図を表示する

メモ 「Yahoo!ロコ-地図」をページに配置する

13.4 ブログを開設して記事を投稿する

13.4.1 ブログを開設する

メニューの[新規ブログの開設]からブログの開設手続きを行う

13.4.2 ブログの情報をホームページ・ビルダーに登録する

ブログの情報を登録する

13.4.3 ブログに記事を投稿する

ブログの記事を作成する

作成した記事を投稿する

13.4.4 投稿済みの記事を書き換える

投稿した記事を書き換えて再投稿する

ヒント ホームページ・ビルダーで投稿していない記事を開くには

13.4.5 [ブログビュー]を使ってブログの記事を管理する

[ブログビュー]を表示して投稿済みの記事を編集する

メモ [ブログ記事投稿ビュー]

ティップス 更新PINGを送信する

ティップス 既存のWebページからスマホ用のページを作る

ティップス サイト全体のWebページを変換してスマホ用ページを新たに作成する

ティップス QRコードを埋め込む

ティップス 「ツイート」ボタンや「いいね!」ボタンを配置する

PR

秀和システム