はじめてのホームページ・ビルダー21

概 要

「ホームページ・ビルダー」は専門知識がなくてもきれいで本格的なホームページが作れるソフトです。そのため、個人はもとより、お店や企業でも根強い人気があります。本書は、初心者を対象に、ホームページ・ビルダーの基本操作から、ページの作り方、見栄えをよくするためのCSSの設定、公開方法までをていねいに解説します。さらに、FacebookやLINEといったSNSとの連携方法、スマートフォン用サイトの作成手順も説明しています。

著者 桑名由美
価格 本体1500円(税別)
ISBN 978-4-7980-4618-1
発売日 2016/10/26
判型 B5変
ページ数 264
CD/DVD
ダウンロード
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

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

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

サポート

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

サポート情報へのリンク

目次

■第1章 ホームページの基本について知っておこう

●1 そもそもホームページってどんなもの?(ホームページの概要とブログとの違い)

ホームページとは、インターネット上の家やお店のようなもの

ブログとは何が違うの?

●2 ホームページの仕組みってどうなっているの?(ホームページの構成要素)

ホームページの構成とは?

ページとページの間を自由に移動できる

ホームページを訪問するには

●3 ホームページの裏側にある「HTMLファイル」って何?(ホームページを作るための言語)

ホームページの裏側を見てみよう

ホームページを見られるのは「ブラウザー」のおかげ

HTMLを見るには

●4 ホームページを作るには何が必要なの?(準備するもの)

パソコンとインターネット環境

Webサーバー

ホームページ作成ソフト

ホームページ・ビルダーってどんなソフト?

■第2章 ホームページを作る準備をしよう

●5 クラシックとSPがあるけどどっちを使えばいいの?(ホームページ・ビルダーの2種類のソフト)

クラシックとSPってどう違うの?

SPってどういうことができるの?

ホームページ・ビルダーSPとクラシックの特徴

●6 ホームページ・ビルダー21 クラシックを起動/終了してみよう(ソフトの起動/終了)

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

ホームページ・ビルダー21 クラシックを終了する

●7 サイトを作成してみよう(新規サイトの作成)

「スイーツショップ」のサイトを作成する

白紙のページを作成する

●8 サイトを閉じる/開くには(サイトを開く/閉じる)

サイトを閉じる

サイトを開く

サイトを閉じずにページだけ閉じる

●9 ホームページ・ビルダー21 クラシックの基本画面を見てみよう(画面各部の名称と意味)

「スタンダード」スタイルの[標準モード]

●10 3つの編集スタイルは何が違うの?(各編集スタイルの特徴)

3つの編集スタイル

●11 本書で作るホームページを確認しておこう(作成するホームページの概要)

2~8章で作成するホームページ

9章以降で作成するホームページ

●12 わからないことがあったら(ヘルプ画面)

ヘルプ画面を開く

■第3章 サイトの入り口になる、メインのページを作ってみよう

●13 ページタイトルを設定するには(ページタイトルの設定)

「属性」ダイアログでページタイトルを設定する

●14 背景に色を付けるには(ページの背景色)

背景色を設定する

背景色を解除する

●15 文字や画像を配置するボックスを作成するには(レイアウトコンテナ)

レイアウトコンテナを挿入する

●16 タイトルの画像を用意するには(タイトルロゴ)

タイトルロゴを作成する

●17 デジカメで撮った写真を追加するには(画像の挿入)

画像を挿入する画像に代替テキストを設定する

●18 写真を切り抜くには(画像のトリミング)

画像の必要な部分を切り抜く

●19 写真に文字を入れるには(写真と画像の合成)

写真に文字を追加する

●20 リンク用のボタンを作るには(リンクボタン)

ボタンを作成する他のボタンを作成する

●21 文章を入力するには(フォーカス枠)

文字を入力する

●22 著作権を入力するには(特殊文字の入力)

コピーライトを入力する

●23 内容を区切る線を入れるには(水平線)

水平線を挿入する

●24 太字や斜めの文字にするには(文字飾り)

文字列を斜体にする文字列を太字にする

●25 ページを上書き保存するには(ページの保存)

上書き保存する

●26 どのように公開されるかを確認するには(ブラウザーでの確認)

ブラウザーで確認する

■第4章 作ったページをスタイルシートで見栄え良く仕上げよう

●27 CSS(スタイルシート)とは(CSSファイルの概要)

CSSとは?

CSSの記述方法

複数のCSSファイルを使える

CSSファイルのメリット

●28 スタイルを記述するファイルを作成するには(CSSファイルの作成)

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

●29 ページ全体のフォントの種類を設定するには(フォントのスタイル設定)

フォントのスタイルを設定する

●30 内容全体を中央に配置するには(配置のスタイル設定)

全体を囲むレイアウトコンテナを作成する

全体を中央に配置するスタイルを設定する

●31 ページの背景に画像を設定するには(背景画像のスタイル設定)

背景画像のスタイルを設定する

●32 レイアウトコンテナに背景色を設定するには(レイアウトコンテナの背景色)

レイアウトコンテナに背景色のスタイルを設定する

●33 レイアウトコンテナに余白を設定するには(レイアウトコンテナの余白)

レイアウトコンテナに余白のスタイルを設定する

●34 フッターの文字列を中央に配置させるには(フッターのスタイル設定)

文章を中央に配置するスタイルを設定する

■第5章 メインのページからつながる他のページも作成しよう

●35 ページを複製して保存するには(ページの複製)

ページを複製する名前を付けて保存する

トップ画像のレイアウトコンテナを削除する

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

●36 内容がわかるように見出しを作成するには(見出しの作成)

見出しを作成する

●37 スタイルシートを使って見出しを目立たせるには(見出しのスタイル設定)

見出しにスタイルを設定する

●38 表を使って内容を見やすくするには(表の挿入)

表を挿入する

●39 表の中に文字を入力するには(セルへの文字入力)

セルに文字を入力する

●40 行や列を挿入/削除するには(行と列)

行を追加する行を削除する

●41 スタイルシートを使って表を中央に配置するには(表のスタイル設定)

表を中央に配置する

●42 箇条書きを作成するには(リストの作成)

リストを挿入する

●43 画像にフレームを付けるには(フォトフレームの設定)

画像の下に文字を入れるフォトフレームを設定する

●44 リンクを設定するには(リンクの設定)

サイト内の別のページにリンクする

他のホームページへリンクする

●45 同じページの他の位置にリンクするには(ラベルの設定)

ラベルを作成する

ラベルをリンク先に設定する

●46 全体のリンクを確認するには(ビジュアルサイトビュー)

ビジュアルサイトビューでリンクを確認する

■第6章 ホームページをインターネットに公開して、みんなに見てもらおう

●47 ホームページを公開するとは(ホームページの公開に必要なこと)

ホームページを公開するとは転送前に必要なこと

●48 転送前にサイトをチェックするには(まるごとチェック)

まるごとチェックする

アクセシビリティのエラーを修正する

スペルミスを修正する

●49 不要なファイルを削除するには(ファイルの削除)

ビジュアルサイトビューを開くファイルを削除する

●50 ファイル名を変更するには(ファイル名の変更)

ビジュアルサイトビューでファイル名を変更する

●51 転送の設定をするには(転送設定)

サイトの転送設定をする

●52 サーバーへ転送するには(ファイル転送)

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

●53 サーバー上の不要なファイルを削除するには(サーバーからのファイル削除)

不要なファイルを削除する

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

●54 ファイル転送ツールを使うには(ファイル転送ツール)

ファイルを転送する

●55 不要なサイトを削除するには(サイトの削除)

サイト一覧からサイトを削除する

■第7章 人が集まる、もう一歩進んだホームページにしよう

●56 ボタンをポイントしたときに画像が変わるようにするには(ロールオーバー効果の設定)

ロールオーバー効果を設定するロールオーバー効果を確認する

●57 オリジナルの画像を作成するには(バナーの作成)

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

バナーの土台を作る

写真を追加する文字を作成する

作成したバナーをページに貼り付ける

●58 複数の写真を合成するには(写真の合成)

写真を追加する

他の写真になじませる

●59 画像に動きの効果を付けるには(フォトモーション)

フォトモーションを設定する

●60 QRコードを挿入するには(QRコード)

QRコードを作成する

●61 ページにキーワードや紹介文を設定するには(metaタグへのキーワード設定)

キーワードを設定する

紹介文を設定する

●62 SEO対策ができているかをチェックするには(SEOチェック)

「SEOチェック」を行う

●63 アクセス状況を調べるには(アクセス解析)

アクセス解析サービスを使えるように手続きする

ページを解析対象にする

アクセス解析をする

ブラウザーでアクセス解析の結果を見る

●64 自動巡回プログラムに認識してもらえるようにするには(XMLサイトマップの作成)

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

Search Consoleにサイトを追加する

ダウンロードしたファイルをサーバーへ転送する

XMLサイトマップをGoogleへ送信する

●65 ページのリンク一覧を作るには(サイトマップの作成)

サイトマップを作成する

■第8章 いろいろなWebサービスを利用して、連携や機能の追加をしよう

●66 TwitterやFacebook・LINEなどのボタンを挿入するには(SNSとの連携)

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

●67 ホームページ・ビルダーを使ってブログに投稿するには(ブログとの連携)

ブログの設定をする

記事を入力する

記事を投稿する

記事を編集する

●68 YouTubeの動画を貼り付けるには(YouTubeとの連携)

YouTubeの埋め込みコードをHTMLとして貼り付ける

●69 地図を貼り付けるには(地図の挿入)

Googleマップを挿入する地図を編集する

■第9章 テンプレートを使って、プロ並みのホームページを作ってみよう

●70 フルCSSテンプレートを使うには(フルCSSテンプレート)

フルCSSテンプレートのサイトを作成する

●71 作成したページのデザインやレイアウトを変更するには(デザインチェンジ)

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

●72 他のページと共通する箇所を一括で変更するには(共通部分の同期)

共通部分を同期する

●73 トップページの写真を別の写真にするには(画像のトリミングとサイズ調整)

トップページの写真を入れ替える

合成された画像を入れ変える場合

●74 ページ内の写真を他の写真に変えるには(写真の変更)

写真を変更する

●75 新たにページを追加するには(テンプレートからのページの追加)

同じデザインのページを追加する

●76 リスト項目を編集するには(リスト項目の編集)

リスト項目名を変更する

リスト項目の順序を入れ替える

●77 問い合わせフォームを使えるようにするには(問い合わせフォーム)

フォームを設定する

■第10章 スマートフォン用のサイトを作成しよう

●78 フルCSSテンプレートを使っていないサイトにスマートフォンサイトを追加するには(スマートフォン用サイトの作成)

既存のサイトにスマートフォンサイトを追加する

●79 スマートフォンサイトの文字や画像を変更するには(文字や画像の編集)

ヘッダーを修正するナビゲーションを修正する

トップページの写真を変更するタイトル画像を編集する

●80 スマートフォンサイトにページを追加するには(ページの追加)

新規ページを追加する

レイアウトコンテナを追加する

●81 スマートフォンサイトでリンクを設定するには(リンクの設定)

リンクボタンを作成する

●82 パソコンサイトのアドレスでスマートフォンサイトを表示させるには(リダイレクトの設定)

リダイレクトを設定する

●83 見出しをタップして開閉できるようにするには(アコーディオンの設定)

アコーディオンを設定する

■第11章 もっと本格的なサイトにしたいときは

●84 WordPressサイトを作成するには(WordPressサイトの作成)

WordPressテンプレートでサイトを作成する

ページを切り替える

●85 WordPressサイトを転送するには(WordPressサイトの転送)

WordPressサイトをサーバーへ転送する

●86 WordPressサイトに記事を投稿するには(WordPressサイトへの記事の投稿)

記事を投稿する

●87 WordPressサイトで問い合わせフォームを使えるようにするには(問い合わせフォーム)

メールフォームを作成する

●88 ネットショップを開設するには(ECサイト)

インターネットで商品を売るには

EC決済とは?

EC決済をホームページに導入するには

●89 ホームページに買い物かごを設置するには(ショッピングカート)

e-shopsカート2の買い物かごを挿入する

●90 Yahoo!ショッピングや楽天市場に出店しよう(ホームページ・ビルダーEC)

ストアの設定をする

PR

秀和システム