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

︱ ︱∃
〕Jt
一
ーー ン
リー コ
ilr,t
ホームベージ
・ビルダー
を使 う前 に
ホームベー シ ビルダーは
HTML言 語 を知・Dな くて
も 簡単 にホームベー ジを作 ることができるソフ トウェ
アです 本章では ホームヘー ジ ビルターの概要 と 付
属 アフリケー ションの概要を簡単 に紹介 したあと ホー
ムベー ジ ビル ダーのインス トー ル方法 起動 と終了 の
方法 ガイトマ ップの使い方など ホームベー ジ ビルグ
ー を使 うための基 礎知識 を解説 します
.
ホームベージ
・ビルダーを
使 つてできること
ホームペー ジ ビル ダーは ホームページを4成 するための ソフ トウエアです ホームペ
ージ 自体は HTMLで 記述 されますが ホームペ ージ ビルダーを使えば HTML言 語をま
った く知 らtJい 人でも簡単にホームペー ジを作 ることができます。
また ホームペ ージ ビルダーに よ 表現豊かなホームペ ージを作るための1鶯 能 が豊富に
用意されています。ここでは ホームペ ー ジ ビルター を使 つてできることを紹介 します。
００ ０ ●００
ホータ ｀―ジは、インターネット上で開覧する
ことができるページで ブロ′(イ ダーなど●llk
― (コ ンピユーター)に 置かれま
供する,一 ′ヽ
｀
―ジ
ビルダーを使えば 手順 0
魂 ホータ
の HTMLを 知らなくても 視党的な操4に よ
って HTML文 書が作成できま魂
▼ホームページ ビルターでホームベージを作る
git--.-... *-, ,., .*.'..- ,.*, ......
-,--" .
.-,".
:i.:,'i;lii::.. *-. "-."*- '.,.
:'-f.d;:ii i'--- .. +!.---*".- "-!ig'-. ,,,
￨
L
薔
LⅢ
..._.、
…
●● Ⅲ
―
…
'●
●●‐
・・
・・ ・
∞︲
EEホ
ームベージ ビルターを使つてできること
ーネット
ーム
ベー
の
タ
とホ
ジ
み
仕
組
￨IEllイ ン
■■1早
ホームページ ビルターの概要を説明する前に ます インターネットとホームページの仕組
みについて簡単に説明しておきましょう。
,
■ 1 1.
■卜失
インターネットとは
インターネットま 世界中の コンピユーターをネットワークで接続 したコンピユーターネット
ワークで魂 インターネットを利用するには プロ′ヽ
イダー トと呼ばれる接続サービス業者を利
ロロフロ,(イ ダー
てインターネットに接続 し ホームベージを開覧 し
グ当 よ 歪ζ尉 ￨`
ネットワークサービス
〕[Elこ E」 〔【:5Fし
また 自分のホームベージをインターネット上で公開するためには 自分で WWWサ ー′←
を構築するわヽホームページを開設するサービスを行 つているプロバイダーに加入する必要が
Z:ぶ ζF
ぁりま或
:菫[:ら;l彎
■●
'
下 ヽ14
リン
:疑 '■
``
1:灯
NSpl
11,￢
Ⅲ■ "￨
`イ
￨■
▼インターネツトの日,
.'1
,,7、 ヽ
￨
0■ ,●
■●●:・
…
￨
…
:￨
●
￨
●￨
r,t: ｀
l
●
¨一，
﹁
…
:l=
=
￨
￨' [￨
飢
霊 ξ (■ 、
●
―
インターネ ットをlJ用 することで 世界中のコンピューターと様々な情報の やり取 つか できる
「
.J
Memo
Wo‖ d W Oe Webが 誕生 したのは
の冬の ∃―□
llの 名前は ダヴイン
ッパで した 欧州原子核研機構 通詢,CE∩'990年
人が多いかも知41ま せん
wvム ″
句瑞の物理学を探求する
`最
lll究 者のちょつとしたアイデアから生まれたといわれています
チコー ドも著 したダン フラウンの,ス ベンス小税で知つている
”，
田
ホームベージ
trlレ ダーを使つてできること
ホームベージとは
(つい て
野標 ■
蝋;ヽこ
ヽ
晩(γ九甦」
′
聯
諸
瀬霧夕
IIL:91稲 β
W de Web)サ ー′← と呼ばれるコンピ]― ターに置かれます.
「
11ヽ
なお ホームページを閲覧するためのソフトウエアをWebプ ラウザー (あ るしヽま
「 vNWWブ
ラウザー」)と いいます。代表￨￨な ものに Mc「osoft社 の 日nternet Exp O「 e「 」 App e社 の
颯●
「SaFal」 などがあります。
ホームページ 曰 レター ]5は こllら 2種 類の Webブ ラウプー まもちろんのこと Frefox
Opera Coo8 e Ch「 omeに も対応 していて 作成 したベージがこれ らの Webプ ラウザーで
`=
を ●
″析
どのように見えるか また レイアウトやフォントなどのテtFィ ンは正 しく再現できるかなどを
確認できます
向伸■早を
挿
'`う
￨￨●
▼ページの再覇性
■,
■
商 話図 鷲
=
rt91..l!'q"l:'!4!E:-7
',1●1,―・
●111
, ―ι^― ::
議 ■%"=7卍
難1+職 囃嘱
●■li
]
‐
・ ■´
`;高▼路 …
“
￨
LJl
ホJ摯■ジ。
□
J̀
■
虜
"Ⅲ
.
1■ 年運饉売上 No
l'の 「ホー々 ヽ―ジ ビル
ー J最 新薇
ド￨「
「=
'‖
li
till'111111iI写
。
ま
1:く
● ●
・● 一
デザインカが大IIア ッフ :ホームベーシ
=1皓
0 ^
:ヽ
i′
0
1
ホ刊ヤ■
ロ
III
巫
￨口 辮
=…
………………………
“︲
ネホームベー ジ 元
″を使 って表示される複数ベージで輌成された Webサ イ トの トップベージのことを「ホームベージ」と呼んでいた 本書
`,"い
では
トップベー ジ下のサフベージも含む広い意味で使 う
ホームベージ ビルターを使つてできること
皿
ホームベージの構遺
(11り
己述され
ホームページは HTML(Hyper Text Markup Language)と いう専用の言語で言
ます。その HTMLま タグ (く >で 挟まれた記述)を 用いて 文書の構造や画像 フアイルの場所
リンク先などを記述するもので 諄止画 動画 音声などを含むページも表現できます.Web
ブラウ
は これらのタグを解釈して 指定された場所に指定された文字や画像を表示しま丸
HTMLを 代わりに書いてくれるのがホームページ ビルターです ホームベージ ビル
この'―
ターを使 つてページを作成 してしヽナま 必要
グは自動的に記述されます
`タ
一
一
﹁
´一
一´
● HIMLソ ー ス
▼ホームベーシつ例
工 ,■ ■■
Ⅲ l11
ホームページのデータは
WWWサ
ーバーと呼ばれるコンピユーターに格納されます
m Resou「 ce
が`お
格納 さllて いる場所を1寺 定するための住所 (ア ドレス)と して URL(∪ nrO「
Locator)が 使われます。この URし を使 うことで 世界中にあるホームページを見ることがで
きるのです.
▼ア ドレスとして URL力 使 われる
0
副巽
平冒
:イ ン
′,メ
●
‐・
● ■´ ●
' ,
´′ ●
「而蒲 [E石 6高「恭語
「
Iう __1
望△々
t三里
型里
■ ′
“
￨
EEEホ ームペーツビルダーを使つてできること
@
fi-a^-:rtFdo1lftggilrt
(
ホームベージを作成するには ふ
成するホームページの内容と構成を決め 素材を用意
することが必要です.そ して ホーム"作
ベージのデータを置く場所を確保 したら ホームベージを
していきます
'成
0ホ ームベー ジの内書 と●●を決める
ホームペー ジにとっていちばん大tlJな のは内容で0
ます 誰に何を伝えるのかを しっかり
決めることが大切です.
内容を決めたら 次に ホームベージの構成を決めます.決 めた内容をとういうベージに分
類するか それぞれのベ ージの位置関係をどうするかなどを決めます さらに どういうデザ
ィ
ンにするかも 合わせて決めましょう.
￨`"Tvl
Hy,。 IText Mark
●o しangυ ogeの 略
で アリ
しファヘ ットと
Ila号 を組み合ゎせた
ホームベ ージ ●用の
ヨll
0ホ ームベージに使 う素材を用菫する
テ一ムページほ HTMLメ という専用の言語で記述 た HTMLフ
ァイルがあれば 事本的に
￨、
t′
は OKで す.た だ し これだけでは 文字と雪線の情報だけ しか表現することが
できませんの
で 写真やイラストなどがあった方が見映えのよいホームベージか作成できます.
1、 -2.ペ ージ ビルターには
写真やイラストなど たくさんのデータか用意されています
また 独自のマルチメディアデータをlt成 し そlnら を使って楽 しいホームページ
を件ることも
できます
.
0ホ ームベージのデータを目く●断を電保する
,￨― ムページをたくさんの人に見て
らうr_め には ホームヘージのテータを置く場所を確
保 することが必要で■ ホームベージのデータを置く場所は自前のサー八―パソコンでもか
よ
しヽ
■せんわ｀ プロバイターと呼ばれる接続,― ビス業者によって安価または無
料て提供されて
いるので それを利用するのが簡単です.ま た プロ八イダーとは月 こ
中 ホームベージのための
場所を無卜で提供 している,一 ビスもあ りま■
￨・
フロバイターにホームページ開設の中請をすると プロバイダーのサー八―上に
ホームペー
ジRの ファイルを置く場所が確保さllそ のアドレス (URL)わ
知されます。この場所かサ
イト
'通
です.こ のアドレスを使 うことで ホーZ、 ページを世界中の人に見てもらうことが ・
で・ ます
▼おもな無料 レンタルサーバースベース
貶
10B
Y8hOO lジ オンティーズ
枷
S teMIx
150B
lGB
CG 7PHPわ l● 8覗
線
広告
AGES
TOK2
の
商用利用可能
曰
CGが使えるジオフラスは月醸 525円
商用利用可能
`し
は月額 2C Cl円 ∼
″ ︲︲
田
ホームベージ ● レター●使つてできること
oH「ML―
する
内容と構成が決まつて素材を集めたら あとは 実際 にホームベージを作つていきま,
ホームページは HTMLと いう専用の言語で記述 しますが ホームページ Llレ ダーを使え
ば HTMLを まつたく知らなくても 簡単にホームページを作成することができます.
の基 本
lll■
の 人カ
ましょう。
ホームベージ 曰 レダーのプレビュータプシートを使 う方法もありますが ツールメニューの
プラウザーから使用 しているプラウザーを選択すると Webブ ラウザーでホームベージが表示
蟻
﹄
uν ´ … …
ペー ジ内の文字 や百
●をクリックすると
剛の ベー ジが日 く仕
IBみ つこと。
=字
と編 集
る
を‘
ゆ入
爾“
する
えや リンク凛
ホームベージが見 成したら 色や見映え リンク+な どがきちんとしているかどうかを確認 し
颯
されま嗅 正 しく表示されたら ホームベージは力 或です。
●サーバーにHす る
―に転送 します。フロバイダーのサーバー
ホームページが力 成したら そのデータを,一 ′ヽ
に転送する場合 あらlD・ じめ自分のパソコンに仮想の「サイト」を作成 しておくと ホームベー
ジの管理やソーバーヘ の転送が便春咄こなりま魂
バーヘの転送については 「Chapte「
サイトの作成と
11
画 像 0実 を
挿 入 する
衣を
する
"ス
ホームベージを公開するJを
'―
参照 してください。
スタイルシー
}"樗 する
￨
正 しく表示されたら ホームページの公03が 完了 したことになりま魂
▼ホームベープの作曖から公口まで●an
¨
¨
● Wobプ ラウザーで■■する
ホームページをサーバーに転送 したら、nte「 net Exp Orerな どの Webブ ラウザーで 麟澪
したホームベージが正しく表示されるかどうかを確認 しましょう。
枢籠電走■,
ベーサ●ウ
1-■ ヽ一
の ムp
:
■定円 f`'
シ作証
0ホ ームベージの内容と構成を決める
0ホ ームベージに使う素材を用意する
0ホ ームベージのデータを置く場所を確保する
^―
フロクラ■
雷連機基
●HTMLで 日彙する
こIF JP[=
関連
動蘭′CI
′
FTP
甲
Itr! ir-A -Y. rai,r-ti?rlt3Ec
修● の 本
“
文字の入ヵ
と● ■
〇 ￢ps
ホームページを件成する前に 知つておくべき大切●●nを
日■ を
,入 する
以下に:a述 しま■
0ツ ールメニューからオフションを選択し
② オブションダイアログボックスのフアイ′
●トッフベーツoフ ァィル名は
リンクを
う
…
●●勲員を
押入する
t● ける
′(イ ターで決められた名前
'口
ズタイルシート
を■目すう
'レ
ーぶ ―ジ
の作
`
輛 雌鮎用の
ベー,`蕉
で
きる文字は半●0-で
は
大文字と
・
小文字 まXqlさ れます どちらを使うかは ,り ■ の設定によ
ま■
決められた名前以外のファイル名を付けると ホームベージを
サJ(― に転送しても ホームベージを見ることができませハ¨
そのようなトラカ レ機
に防ぐためにも ,一 ′←―で甍定して
いるトップページのファイル名をブロバイダーや管理者に曖出し
'^t
ン
o― ―
ーな
ホー
レ,名 前には 必 ￨● FnO―
うフアイ′
を
使つてください。サーバーの OSに よつては大文字と小文字が
●フアイ′
И日に的
区別されますので 小文字で籠― した方がよいでしまう
また 全角英数字 日本語 ア ヽ―ス IJ「 ,い
殊記号
は使わないてください。HTMLフ アイリ
Ю 名前だけでなく 画
像などのファイル名も同様で■
・ フアイル名や嘲鴫口鵬 ●手に― しない
"ま
作成したベージにリンクが設定されてい
る場合 ファイル名や
になりまま htmに する場
フアイルの保存場所をW ndowsの エクスプローラーなどで変
なお ホームページ 曰 しダーで新規にt成 するHTMLフ ァ
イルの工張子 ま 初期設定では
"耐
含
下つ手順で設定を変更してくださしヽこれ雖 にr屁 し
`以
たペ
ージには ここで信正したェ薇子が自動的に付けられま■
ただし この操作を行つても すでに保存されているフアイル
｀
の強張子は壼更されまI・..
更すると リンク先ヘジヤンノできなくなりま■ フアイル名や
保存■耐 お やみに変更しれ ヽ
でくださし、
フアイル名を変更する必要がある場合
成して
`r牌
なお
ームベージを完
`ホ てください
サイトを作成してからファイル名を変更し
フアイル名を変更する方法については「]123 サイ
ト内のファイリ
レを■■する」を参照してください。
ヽ定用球の
′
● :′ ●賎
▼オフションタイアログポックス
フじク ,ム
関 ,■ 籠
ら
「
をクリックして
"プ
をmmに 変更し
て OKボ タンをク
index htmめ るい き
ndB輌
てください。
HrMLフ アイ,￨―
リックしま●.
トッフベージのフアイル名 さ通常
つて実なります。また そね以外の名前を決めている場合もあり
表を
ll入 する
オプシヨンダイアロ
グボックスを表示させまま
●
●7'ン ル
コパタフ,,カ イ畷● メD
□●由
0 “
,p=G
門連
"'鵬
111-
マー
0
い
,・ 口
・
_
'…
lntに ‐
日 ●●ス"■ ● 10^"…
",￨●
回 t“ d聴
,m"黎 o
自 ●●ス
日
縣おヽ
■H● tツ ‐烈
=0:畔
[HTMロ ファイルの拡張子を [him]に 蜜理する
=■
,―
…
_
り
lFlfi-t^^-t.tt
I-EErrct6.t
ホームベージ
・ビルダーのおも8Hall
ビルターには 様々な機￨￨か 用意されています.こ lnら の機有￨を ,え ば 初心
■
者でも蘭 1.ホ ーZ、 ベージをlTる ことかできます
ベーシ ビルター こできるおもな機竜
ニニi:, ■―ι、
tを 簡単に説け,し ます.`お ● マー
ltた 掟￨￨で す
シ ヒルター 15こ すたに退
ク●ヽ
■t'(い るもの ■ ホーム
J‐ ■.ヘ ージ
.
^―
":さ
3つ の編集スタイル
う 3つ
かんだん編集スタイル スタンダー ド編集 スタイル エ ディター ズ編集 スタイルとしヽ
つ
の補年 スタイルか ら 好みのスタイルをi`ム ′
でベージを編集 できま ￨
唯
スタンター
ド編集 スタイル はホームベ ー ジ ビ,し
い ●,た ん婦 ,ス タイル_は 初 il当 1'
ン
Rそ イ」こ1与 徴があ
ターの 1+,¨
タイル IIテ タース鶴,ス タイルJま 上級る 向け とそオ
`ス
つま ￨
そ■ ■■の場 ヽ スタイル につし￨こ ま
して くた●｀い
211
ホー ム ベ ー シ [￨レ ターの 画面ヽ 咸 Jを ,￨￨
▼ホームベージビルダー 15べ ようこそダイアログボックス
ここをクリックすると
[ガ イトマッ刀 か関 く
3つ の編集スタイルが選 べる
かんたんナビ
かんたんナビ す かんたん編集 スタイルて メイン画面のよと,に 53こ さ■たメ]ニ ーや●
タンの ことです.メ ニ ュー八―の イ
ヽわ つに,う 見やす くてこじや●t'メ _二 ―て かんたん
■￨ヽ で , メイン画三「
編集 スタイルtl将 1日 本 このかんたんナ ビを,え ま まとん とが
'■ をかんたんナビメニ ユ
riご 出て
、れた1百 域 をかんたんナビバー と.￨し ｀ 左つ にある ●の
=口
ー としヽ
しヽ,す
.
“
"●
この かA,た んナ ビは スタンダー ド編集 スタイルやエディター ズ編集スタイルで t,'
では
する .こ とめtき ます.か んたん稲■スタイルのツールバーとlJん ′んナビの機育円[つ しヽ
用`お
3pp 2 1を ●￨￨じ こください
45
all
^-
▼かんた
―
r'<- r.
g'ttg-ti'E€3Ee
スタイル
フル CSSプ ロフェッショナルテンプレー トの利用
白紙のページを使 つて lか らページのデザインを作成するのも 1つ の方法ですが ホームペ
ージ ビルグーには たくさんのテンプレー ト(ひ な形)が 用意されています.最 初はそれを利
用 してページ作りをするとよいでしょう.
ホームベージ ビルダー ]5に は フリ
レCSSプ ロフェッショナルテンフレー トが新 しく搭載
Web制 作のフロによる八イクオ リティなデザインの業種別テンフレー ト
です デザインを選んで文字を入力 したり 画像を差 し替えたりするだけで 本格的なサイト
を簡単に作ることができます.フ ル CSSプ ロフェッショナルテンフレー トを利用 して,成 し
たページは ページ内のテ■ス トはそのままで デザインとレイアウトを簡単に変更すること
さ llま した。これは
ができます.
なお ホームページ ビルダー 14ま でに搭載されていたフレミアムテンフレー ト サンカ レ
テンフレー トなども引き続き搭載されているので 従来どお りの方法でホームページを作成す
ることもできます.
テンフレー トの使い方 については 「22
テンプ レー トを使 つてペ ージを作成するJを 参照
してください.
▼フルCSSプ ロフェッショナルテンブレート(lペ ージ月)
●
『
‐
可二
亀覇■》
「￨:1灘
目
¨,… Ⅲ ´
…
`・
,,・・
・・
一 二
=・
▼フルCSSプ ロフェッショナルテンフレート(コ取ベージ用)
● ●
●
￨,"― ●●￨
￨::膏 蓋「
内 雷
亡 Jニコ
1‐‐ ￨ `" :
■、
‐ ,い Ⅲ
ⅢⅢ●￨ ●
0・
・ ¨,… Ⅲ,・・ ●
`●
…
碁
‐
`■
:
I轟
鍵
FF_.´
__ , 1日
1":な
,
“
Ⅲ庁
V'7
…
(■
●コ :"か
￨ ヽ
lll t-r.,t-v. crt v-ttzt!ta-&
▼サン71レ テンフレート
▼ブレミアムテンフレー ト
文字 の 入力
と編 集
﹄
﹄
離 を
嬌入する
“
…
壼口なサン7JmOm
画● 効 果 を
挿入 する
”
螂
表を
棒 入 ■る
ホームページ ビルダーに よ イラストや写真 □Jア イコン アニメーションなどのホー
ペー
ジ用素材 (素 材集 )が 豊富に用意されています。さらに ホームページ ビルダー 15で
ム
は、ジヤス トシステム社油 呆有する画像データの中から 厳選されたイラストや写真 □」 ポ
タンなどが約 1フ 00点 追加されました。
ー
カ
リ
のに
“
輌
e自
﹁一
Gヨ
ロ
らど
召
ロ ポル
Fト
然
シーン
臼 莉
臼 知
"ダ Ⅲ,用
(ロ ゴ)
重尋露ヨ の
六―,ヽ「
,盛
ホームベージ
め●開
特定用途の
ベ ーフ作成
,V
”
］
∵
―
G F UPEG
¨
歩
”
鰤
￨に ,00'`r iに Jool`イ
国¨
日
¨
□日
□□
J004`1 "J∞ :● イ iⅢ 10=`ll
,“ JO,7`イ
＾ □
″ ル
﹁う
i“
●E鷺 椰
い
〇〇〇０●０
`―
▼サンカ レコ財
▼サン7ル■財 (8● )
▼サンフル彙● (イ ラスト)
腱適
■た ,tJO':“ ptJ00'“
″了
ホームベー ジ 曰 レターを使つてできること
田
ふ りがな (ル ビ)の入力に対応
ペ ージ上の 漢字 にふ りがな (ル ビ)を 入力する ことができます
読み方が難 ししヽ
地名や人名
IJど にル ビを振ると より親 しみやすく親
ljな ページにな ります。ただ し ル ビの表示は プラ
ウザーによ って異な ります.
ル ビの入力方法につtlて は
'330
文字にふ りがな (ル ビ)を 入力 するJを 参照 してくださ
しヽ
.
▼日性ダイアログボックスでルビを入力する
期D ユζ
▼議宇にふりがなを編 0こ とができる
‐
i
――一―
ル′
一
￨`
'●
11
ルき,
'1,文
_ .
tり え1カ よ】
幸】19
_
′ ￨お すすめの散歩道∼東京■
'え
絆上円7
ヒ″ 堅 _J「 輌
改
弓
「
0
面￢ し ψ
_1
「
合成■像00彙
(￨り ずT星黄呈￢璽11%∫響鯨暦誘ぽ
[15里
濡
:[
橋
1日 番
接できるようにな りま した 文字どうしを重ねた り 画像を透明イ
ヒした リ スタンプを押 した
りすることもできます.
これらの操作を行 うボタンは 通常は表示されていませんか 画像を選択すると 「ナビバーJ
に表示 されます.画 像の編集については M43
合成画像を編集するJを 参90し てください.
▼口●の合成ができる
フ
ォラレームを回転し
「
ロゴ画像を重ねた例
￨
:￢
EEホ
ームベージ・曰 レターを使つてでき0こ と
Fiaghタ イトルの作成
(1静
□
猟t9貢 ζ
謎話埋進ξ
聡需
ら
贔冨 IЪ 量
:見 8智 電
雪き
,l仔 洟
成できます また 通常のホームページだけでなく Phoneや Padに スライドショーを設定
したタイトルを挿入することもできます。
F eshタイト,レ 鉤 乍成については 「68 Fashタ イトリ
しを挿入するJを iPhOne/Padタ イ
,7● ,人 ￨:
i■ ■
トルの作成については「103]」 の日Phone力 Padタ ィトルを挿入する」を参照してください.
,IPhoneや
iPedに スライドショー付きのタイトルを作晟する
‐― ―
● ^… …Ⅲ.・・ ‐,二
…
‐ ・・
2:―
_
_
`・ ^ヽ
を る
ヽ´●
″史
▼●●や力彙などを腱定して Fla811タ イトルを●咸する
●
目
_・
ご
Iコ
LI J晏 ‐こ
■ ,二
__予
レイアウト●Bの挿入
はじめての人でも手軽にスタイルシー ト(CSS,ベ ースのデザインが実現できるレイアウト
部品が搭載されています。レイアウト部品は 台紙 区切 り線 見出 し コンテンツボックス
写真ボックスなどの ]8個 のカテゴリに分かれて数百種類用意されています.
レイアウト部品の挿入については「833
スタイリッシュエフェクトに対応 した部品を使
うJを 参照 してください.
● レイアウ ト部品をベージに挿入する
見出し付き写真ボックスを
1
“，
ダーを使つてできること
EEEホ ームベージ曰レ
欧き出しの作成
「吹き出 しJを 4成 してベージに挿入することができます.吹 き出 しのデザインはたくさん用
(
意されていますので 好みの形を選んで文字を入力するだけで箇単に作成できます。反転や回
断、
なども自由にできます
●￨‐
￨■ ,
￨,
吹き出 しの作成については 「422
▼曖●出 しがベージに挿入てきる
▼欧せ出 しの作成ダイアログボックス
￨● ￨
■￨
吹き出 しを作成するJを 参照 してください.
II｀
●:′ ■■
11足
オ叡D
…
,￨
す ●
一
一，
■ ●
●一
.￨‐
瓢醸察咎 ―
・
文詢 六
1 1
`き
t4・ し
‐菌t薩
0
,,
●
1・
1
￨■ 7■
1=や
'場
わし
]['レ ニ]
:●
文字アニメーションの作成
・
● ● 一
“
`
り
文字と視覚機能の組合せをアニメーション GFと して生成 して ページにヽ入することがで
きます。文字を入力 して 効果の種類を選択するだけで 簡単に文字アニメーションがlt成 で
きます。
文字アニメーションのlT成 については 「61
文字アニメーションを作成するJを 参照 して
ください.
'￨●
▼文字アニメーションの例
`￨￨￨
●Ii t=￨
・
“
●
“
■
]文 字すつ表示される文字アニメーション
30
EEEホ ームページ ビルターを使つてて●ること
ベージロのリンク
( ￨1船
1,L昼 I
『
『
[話擢
[響ま
誓
こ
」
を り
〕
19う 二
:Tttξ I:そ ξ
勇
警
准
亀
:35り歌
警
筐
犀
胤
た 特定の人だけがリンク先のページを見ることができる パスワー ド付きリンクの設定もで
らヽた
=宇 年
●嬌
きます。
'F〕
一
を る
一一す
， ク
機 、 ン庁
，
高 苺 ●諭
リンクの設定については 「Chaptef5 ページに リンクを設定するJを 参照 してください。
▼ リンク先のベージ
▼ベージにリンクを殷定する
●
奄
■=:=ヽ
ろ
'●
●た
￨● ,す る
―■、
ベーシ
'●
リ
1卜 し
リンクカのベージが鱒く
￨
リンクメニ ューの作成
ほかの ページヘの リンクをまとめたリンクメニューをベージに挿入することができます。リ
ンクメニューIよ ホームページの内容を[え る目次のようなものです。サイト内のそれぞれの
ベージにリンクメニューを挿入すれば ページヘのアクセスが容易になります.
リンクメニューの作成については 「53
てください.
リンクメニユーと
‖Jク ラム
旧嘔朧肯[
ト共通メニューJを 参照 し
'イ
￨1 1●
▼ベージにリンクメニユーが挿入される
▼ リンクメニュー新規作成ウイザー ド
コ￨コ
I「
1挿入したリンクメニュー
`
61
￨
=ち
0=3S
ホームベー ジ ビルダーを使つてできること
田
豪組み (テ ーブル)へのデザインOHH
[躊 ■、
曇
ヂξ
塾[肥 [[緯 霞
][
r lル ィ
鱚誰 141=こ
作成する表 けも ちろん 既存の表を変更することも可ちし
です
テ,イ ンを適自 した表の作成や 表の属性を変更●るん,上 については
C18っ terフ
ベ ーシ
に姜を挿 ,0る ￨を 参照 してくださしヽ
▼表の
▼表にデザィンを適用する
一両嗜¨
ダイアログボックス
"入
目
島一
ー
:[,
¨
¨
=,」
表にデサインが適用される
_
メ
■′
‐
●
'
スタイルシー トの利用
″た
11lli[:lrti主 」
]:〔 !:I:抗 た
「;[「 :』 重
f[[][『 ￨]:『
f:と
とかできます ホームベ ージ ヒルターでは 素 筆 にサンブルの スタイルシー トも
ヽイl
`ォ
"=て
ているので それを使 うこともて ざま り
スタイルシー トの使い方につい こは IChapter 8
スタィル シー トをベージに
参照 してくださし
￨
▼スタイルシー トマネージャ
Ⅲ
占畠壼轟
‐′
`,“ “
'
▼スタイルシー トマネージャ
11
‐‐
・:
■
__`Ⅲ
l_,
に
,
■,
スタイルシートマネージャを使 つて スタイルを設定できる
ll・
用する を
” ︲
皿
ホームベー ジ ビルターを使つてできること
アリ
IJ`ム 、サムネイル、メッシュ効果、スライドショーの作成
デジタルカメラて撮 つた写真に説明文を付けて ホームページにされしヽこa己 置 したり 写真
の,ム ネイルを作成 し ベージ上に大きさを揃えて配列することができます。また 画像にメ
ッシ■効果をかけたり 好きな画像を次々に表示させるスライドシ∃―を挿入することもてき
ます.
これらの操●は ホームベージ ビルターを立ち Lげなくても W ndowsの スタートメニ■
すべてのプログラム ● ホームベージ ロ レダー 15● ユーティリティー ●Webフ ォトギャ
=つ
ラリーを選択 して起動される Webフ ォトギャラリーでl・ lF成 管理できます.
●照
それぞれの作成の しかたについては 「Chapter 6 ペー ジに画像効果を挿入するJを・
してください.
▼Webフ ォトギャラリーで写員を選択する
▼サムネイルを作成する
筋 ]ヽIJ"■1,■ ●Ъ ヽ,__.,..,‐ ● Ⅲ,,
…
2,
■
ロ
i彎 甲
_■ ,
このボタンをクリックして写真の
1説 明文を入れることもできる
▼アル′ を作成する
▼スライ ドショーを作成する
“
”︲
all rtr-a^-t. E,rt-ti'a?raiE
スタイリッシュエフェク トOpJ用
(14静 す
ヽ
「
11蘇
ζ
:ぶ
[
[六亀ふに設 撃姜[[II幅 量
す。ホームページビルター ]2か らは テーマに 田 o8Jが 追加されました
￨'',
`〕の使い方については 「83
スタイリッシュエフェクト
■ヽ よ
'i;#κ
スタイリッシュエフェクトを使 うJを
参10し てください。
[`■
￨=11]
▼選択 したスタイルシー トが艘定 される
▼スタイリッシユエフエク トの曖鰤
,''′
諄■ ■■
■
1
,'!￨
111,
F=
鷺
‐ ・
‐
―
1際 1
税
・ ―
:,
11 11
、 ′p
l
●._
_
■′
', 1:
携帝ベージの作成
1 1 1
(￨11》
EZwebな ど 携帯電話用のベージに一括変
'モ
換させることができます。WOrkPadな ど一部の PDA用 のホームページを4成 したり ll帯
ベ
用 ージの,ム ネイル作成機育tも あ ります.
編集中のページを
ー ドや Yohooケ ータイ
また ブレビュー機能が用意されており 携帯画面を見ている状態でスクロールしたリ リ
'■
ド
ンクをたとることができま魂 絵文字の確認もできま 9.
携帯ページの作成については「Chapte「 iO 携帯霞話用のページを作成するJを 参照 して
￨
ください.
▼携薔ベー ジ
い● I●
▼携■電話用ブレビュー
I
携帯電話 と同 じように
操作することができる
54
EEEホ ームベージ‐ビルターを使つてできること
アンケー トの作成
ウィザードを使つてアンケートのページを簡単に作成することができます.ホ ームベージビ
ルダーでは アンケートの送信方法にCGを 利用することもできます.
アンケートの伸載については「123 アンケー トページを作成する」を参照してください.
▼新規アンケー トの作成ウィザー ド
▼作成さtlた アンケー ト
画僣 0
今
・ ・ ――
D
―・ ― ‐
'`4
tは 、
る
¨′
，
，
り裟
■●■差を
:…
￨■
コ
,
睦
0コ
J●
・
2■
‐,
な0
●i,1
・
￨
ll[::II亜 亜EttZ:亜 EI重
`う
:
ツイー トボタンの設■
Twtbrと は ォンタインでメッセージをやり取りする,― ビスの一種です。ホームベージ
ビルダー ]5で は ホームベージを訪llた 人にTwitte「 でッィートしてもらうためのツイー ト
ボタンをベージに挿入できるようになりました。
TwⅢ terつ 8iや きボタンの設置方法については「 ]280
ツイー トボタンを掃入するJを
参照 してください。
,=riこ o
｀
▼ツイー トボタンの餃定口面
￨'「
▼ベージに押入さItた ツイー トボタン
lJ● ●ヽ
't=ド !F
,/― ￨ク 城 事 列 ,の い メ ,
理 ●通
hゆ ′
―
t' ,',S
●lk″ 蔵 ヽht● (
文字列bヵ ―マ,К D
￢■
文書■ ト
ル "■
∝
]円
.■ ●
uR[
売 曰
‐
ψ
むⅢ じ
′
=S
=',
「
“︲
田
ホームベージ 曰 レターを使つててせること
日配ベージの作成
Web日 記機能を使えば
¨＾ヽ
ほ 精
７
文
簡単に日記を4成 追カロし ホームページ上で公開することができ
ま或 また 日記更新ブログラムヘのショートカットをデスクトップ上に作成でき 次回からはホ
ームベージ ビルダーを起動せすに日記を追加することができま●.
曰記ページの作成については 「121 日言
己ベージを作成する」を参照 してください。
▼Wab日 配●饉を,つ て日口をヤ咸する
蘭餞 を
いヽする
▼昨咸 した日2ペ ージ
猪“
”離
焉像 助果 ●
掃 入 する
表●
る
●
'す
スタイルシート
に■■する
フレイ ベー,
の作滅
■梯電話切う
´t― シ●I
市‐
カレンダー0挿入
ージ
の公引
`ヘ
カレンダーを作成 してページに挿入することができます。カレンダーは 年と月を指定 して
デザインを選ぶだけで簡単に作成でき 文字や画像を挿入することもできます。また カレン
埼ご戸(ら
ベ タ ヤル
ダーの挿入機能で予定表を作ることもできます。
曰言
己のベージにカレンダーを挿入するJを 参照 し
カレンダーの作成については 「12]0
プロクラム
関連機籠
31「
動間 ,OSS
′ TP
「
璽口■ ■り
「
…
(■日 罰
ク´ ,を
■
=
▼カレンダーを挿入したベージ
▼カレンターをベージに,入 する
躙
”一脇
，
り
PEG
関連
てください。
0
● カレガ ー (文 字澤カロJゆ
(D O子 菫■ ―
,曽UD
雁
l
α
￢
円つ
01"￢
O
田
ホームベージ ビルターを使つてでせること
プログの作成 。
日饉・鍛糟
プログ*の 開設や 記事の作成 書きかいの記事の保存 編集 投稿などがホームページ ビ
らは 未投稿 投稿済み サーバー■のプ
ルダー上でできます。ホームベージ ビルダー 12わ ヽ
り発 フ ログの記事を編集中のホームベージに取り込むことができるようになりました.B GLOBEウ
o"2
1口 7D●
日,を 時系列配 螢
び
Ы
03S0
ロ
コ
ロ
∞
¨
久コ
グmOブ ロ
グロ
酪
サ
ギ彗
勇
i7::51[1器議 FC2ブ
125
;}繰
ブログの作成 編集については 「
3讀 じf:握 獅 畠
フログを開設するJを 参照 してください。
■崚
ホ
')旱
,71,,お
t誨 ま
お燎 ,
抒 ヽ jる
単にl■ えるの力鳴 ●。
▼腱政
▼作成可能なプログのプロ′￨・ rダー
公硼された,ロ グベー ジ
リレクを
■に アろ
こり
■ "燿
0
=
'す
●
瀬
1騨
｀雪
多
ヽ
簿`
￨
』盤∃
1縣 tぎ L=戸
lr」 中
‐
盟
,■
・
'4
:,一 ￨
■,う
'あ
￨
￨
,レ ームヘ■
●￨=t輌 己
■●E
￨― ,「 聟
:
挙■戯モロ
―■4」 '
アクセス解析サー ビス0僣■
(鶉
アクセス解析の準備から結果の確認までをホームページ ビルダーの画面で行えるアクセス
解析 サービスが搭載されました.曰 別 月別 時間帯別の アクセス数の推移やベージЯlの アク
セス数の集言
+検 索キーワー ドなどを杷握することができます.
アクセス解析を利用するには ホームページ ロ レダー 15の ユーザー登録と」ustア カウン
トの登録 かんたんアクセス解析サービスの利用手続きを行 う必要があります。かんたんアク
▼サイトをアクセス解析対●に臓定す0
▼アクセス解析●6彙 を 日する
ヽ
甲き 力
:作 成
プログラム
鵬 ,暖 曖
`` 0]●
配
EC
Ш
”
セス解析 ,― ビスは 申 し込み時より 1年 F・5無 料でlll用 できます。
アクセス解析の機能の詳細については い 29 アクセス解析を利用する」を参照してください。
￨:■
“
● 由究邦配朧取'
,イ
鏑
魏
詠
ゴも RШ
て
…
,イ に
.・
‐ ●●面
副
■,,,
て
「
〕
贅
〕匡 ■ 曰
“
ｆ
'―
一 一
輛
一
:
一
〔
…
‐ I‐
,魏ιu"け -2‐
,tk―
)
F
●
―
，
,
,…
o‐蒻 u、 ,′
^‐ ツ 鶏
酔
′ ● ワ
膨
●41ク を
よう
EEEホ ームベージビルターを使つてできること
QRコ … ドの作成
￨口
9,P■ ￨ …
QRコ ード*を 作成してページに挿入することができます ORコ ードに よ uRLや 電話番号
メールアドレスなどを埋め込むことができ これを携帯電話のカメラで撮影して読み取り 電話lF
雰 層ζご
「 t轟
年に発表した二次元 の登録や携帯サイトヘのアクセスが簡単にできま或
バーコード
QRコ _ド の作成につUlで は「1022Jの コラム IQRコ ートを作成 挿入するJを 参211し て
くださしヽ
▼ ORコ ー ドに埋め込む内書を入力する
0い ―●コ,,―
oぇ てヽ
えヽ ヽ
ン
●● 7-="￨_序 i議
…
‐
●●
,t、
,
―
―
…
…
▼ OR]― ドをベー ジにII入 する
‐′
`。
'“
'
知
.“ _
“
ベージのアクセシビリティロのチェック
アクセシビリティ ヽ
リアフリー)は Webペ ージにおける使いやすさや情報の探しやすさを
指す言葉で■ ホームページ ビルター ]2か らは 作成中にページのアクセシビリティ度がチ
エックできるメータが搭載されました.作 成中のページに「優秀J「 普通」
「要修正Jの 3段 階で
アクセシビリティ度が確認てきるので アクセシビリティを意識 した編集作業が行えます
アクセシビリティのチェックについては 「,334 ページの使いやすさをチIッ クする (ア
クセシビリティのチェック,″ 参照してください。
(′
.
一¨
一
一一
▼アクセシピリティのチェック項目を殷定する
50
▼●彙■α ヽ―ジ
EEEホ ームベージ ビルターを使つててきること
Yahool地 日と GoogiOマ ップの揮入
( 4)
ホームページ ビルダー 13か らの新機能として インターネッ ト上のサー ビス 「Yahoo
地図J「 Ooog eマ ッカ との連携ができるようになりました。
アイコンを表示 したり 吹き出 しにコメン トを付けたりと 地図をカスタマイズさせてホー
ムページに表示できます。
地図の挿入についての詳細は 「123 Y8hoo地 図と OoOg eマ ップを表示するJを 参
nllし
てくださぃ。
▼挿入地図を設定する
●I.
い
―
■●
￨●
“
=￨
―
…■‐
.
.
....1●
・'
鰤 、コ 霊需
■
.,野 !ス
ヽ
■ ィ 百 ” 一〓 ●
中
﹁¨
一
¨
¨
一
¨
¨
一
▼地国を,入 して情報ウィンドウを付けた例
=写
■
軽
0■青唖=西 手
■
・ ■■燎=塩 ´
ヽ
ヽ
アフィリエイ トの揮入
(
アフィリエイトと よホームページに掲載 する広告の一種です。自分のホームページやブログ
にアフィリエイトを挿入する場合 これまではタグの記述が必要でしたが ホームページ ビル
ダー 12か らは アフィリエイト広告を編集中のベージに挿入する機能が搭載されました.
アフイリエイトの挿入につtlて は 「 ,24
アフィリエイト広告の入 つたペーシを作成するJ
を参照 してください.
▼アフィリエイ トを崚定する
アフィリエイ トを設定するには
▼ア フィリエイ トピュー
楽天や ‐
I Yohooの アフィリエイ トヘ の登録が必要 ￨
「
ラ リ
i′
患
を
冨
頼
話
し
:1菫「
「
1中 のページに挿入するためのビュー
￨
'キ
lll fi-a -y'c,l,t-tt2rrr6Er
SEO―
―
力彙
入輌
のと
野
ホームパ■ ジ 曰 レダー
らは YahOo」 apanゃ OαDe eな ど疇
サイトで 臨
'4か
位を上位にするための SEO対 策を支援する機能が追加されました。SECl(Searcぃ Ene ne
Optimizauon)と は 検索サイトの検索結果で ホームページをより上位にランクされるように
工夫することで魂 また 検索エンシンにサイい
を効幸よく知らせるための XMLサ イトマ
ップを御 tす ることもできま魂
日● ●
II入 する
▼ XMLサ イ トマップを作咸する
▼SEO対 策を證定する
リンクを
る
― ′●●″
―
―
―
■ 国
t“
組 サイトマップ
…
5
●[￢ 晒嗜薔覇
'菫
ヨ嘲け夕ゆ
0“ ヽ
●●拗 …H“ 午
内
`
_______
薔燎勁彙肇
椰入する
.1
1雲
―
表を
押 入する
-
囃
・・
コ⊂藝函口
L―
―
―
"ル
」¨
"麺
薇,II_
´_傷
日
煮
…
スタイルシート
を凛円する
…
口
■ i■ [170:=
"_1塵
由 日
濃 幽 臨
…
…
…
"あ
‐ ‐,…
・
,υ ン
it●
フレーaベ ージ
の作威
ヽ
…― 。 “
ヽバ 。
― … ‐ ′'伸 ″ ム
'‐
`0
"ら
="・
「
―
―
粽帯電畠用の
ベージ●電
サイトがすばやく―
ホームベージ
の公明
｀
■ ジ 曰 レダー ]2か らは ホームページ 曰 レダー クイツクが搭載さrtま した.ク イ
ホーム′
ックd吏 うと ホームベージの ￢載から公開 までを手早く簡単に伸 或することができま寃 また
日次を追加するだけて リンクが設定されたページが追加でき ベージ自 本のデザインも簡単に
変更でttま 魂 バ■ ジが力 成したら、サイトこと サー′← へ鮨送すれば 力 或です。
用さの
ム
﹄
ル
ヘージ作成
"定
「Chapter1 6 ホームベージ Uレ ダー クイッ
ホームベージ ● レダー クイックについては、
クヨ 史うJを参照してくださしヽ
，
01F υPEC
▼自●的に作成さttた ベージ
▼ホームベージ ● レタークイックヘようこそ■百
,一
―, t● ●
,' ―
●●ロ
“
穏 盤留 潔 犠臨電闘紹 "
感 4ツ レ智
'●
クイックを
使う
製
絲
痙
ヽ
…
…
♂甲
”
¨
腱理
せるホ‐ムベージ
・ ビルダー リИツク
付属アプリケーションを
使 つてできる こと
ホームページ ビルダーには ウェブアー トデザィナー ウェフアニメーター ウェブビテ
オスタシオ デジすたマーカー 2 ファイル転送ツール CSSエ ディターなど 計 10個 の
アフリケーションが付属 しています。ここでは ホームページ ビルダーに付属 しているこ
れ らの アプ リケ ーシ ョンを簡単に紹介 します。それぞれの詳 しい使い方 について ま
「Chapte「 ]4J以 降の章を参照 してください。
●●●●●●●ｅＣｅ
ホームページ・ビルダーには、以下のアプリケーションが付属しています。
これ らのアプ リケー ションは ホームペ ー
ジ ビルダーをインストール したときに自動
的にパソコンにインストールされ ホームペ
ージ ビルダーのメニ■―から起動すること
ができます。また W ndOwsの スター トメ
ニ■―から起動することもてきま魂
▼ウェプビデォスタジォ
▼ウエノ′― トデザイナー
Ｌぽ Ｉ ■ ，
こ は こν
▼ウエフアニメーター