ホームページ更新講座
更新ってどうやるの？
ホームページの更新、と聞くと
「難しそうだな」
「自分では無理だ」
などの感想を持つ方が多くいらっしゃいますが、
実は、少し位の文字修正でしたら自分でも出来ちゃいます。
ホームページとは、現代社会の優秀な宣伝広告ツール。
ずっといつまでも同じものから変わらなければ、見ている方が飽きてし
まいますよね。
【 実際に変更をしてみよう！ 】
私達が普段見ているホームページを「家」に例えるならば、
家にはもちろん設計図、というものがあります。
その設計図を少しだけいじれれば…
ＢＧＭが素敵なあの番組のように「なんということでしょう！」
という変化が得られるかもしれませんよ！
ではまず、変更をする為に必要なソフトですが、
何も特別なものがいるわけでもなく
実は、パソコンに元から入っているんです。
試しに[index.html]というファイルを右クリックしてみて下さい。
メニューが出てきたら[プログラムから開く]をクリックします。
その中に[NotePad]というものはありませんか？
もし出ていなかったら、[プログラムの選択]を押して[NotePad]を
選んでみましょう。
開くと英語と記号と数字の羅列が出てきます。
この英語と記号と数字がホームページの[設計図]です。
「うわぁ！何がなんだかわからない！なんだこれ！？」
と、ビックリしますが、そんなに大変では有りません。大丈夫です。
中身を順番に見ていくと、普段見ているページにも書いてある文字は、
設計図の中にも書いてあります。
設計図の中の文字を変えれば、家の外装も変わります。
気をつけなければいけないのは、<>の中身を消してしまわないこと。
<>の中身は家の骨組みです。ここを変更するには少しのタグ知識が必要
になってきます。
では次回は、その骨組みの
【ホームページのタグについて】
の、お話です。
<タグ>って何だろう？
前回では、ＨＴＭＬファイルの開き方、
文字の変更方法についてお話しました。
纏めますと…
index.htmlを右クリック→プログラムから開く→ＮｏｔｅＰａｄ
これで、ホームページの設計図が開けましたよね。
前回は<>の中身を消してしまわないこと！と申し上げましたが、今回は
その <> は一体何者なのか？のお話です。
ホームページは大きく分かれて、『タグ』と『文章』で出来ています。
画像もある？いえいえ、設計図をよく見てみて下さい。
設計図の中に画像は無いですよね？
画像を表示させたり、文章を改行してみたり。
そういう指示をホームページに与えているものが<>で囲まれたもの。
これを『タグ』と呼びます。
では、例題をあげてみます。
次の文章を改行をしようとします。
『ホームページを作りました！是非一度遊びに来てくださいね！待って
ます』
このまま一行でも大丈夫そうですが、横幅が窮屈だったり、下にスペー
スが余ってしまっていたりする場合があります。そういう時には改行を
しましょう。ホームページのタグは全て英語の略語になっています。
"改行"の場合は"line Break"を示すの略の
になります。
ホームページを作りました！
是非一度遊びに来てくださいね！
待ってます！
これでスッキリと文節での改行ができました！
保存をして、変更したファイルをダブルクリックで開いてみて下さい。
どうでしょう？しっかりと改行されていましたか？
それでは次回は、
【もうちょっと詳しいタグのお話】
です。
どうしたら画像の変更が出来るの？
今回は、皆様からも良くご質問のある
【画像の変更について】です。
いざ画像を変更しようとしても、設計図の中には画像が入っていません。
ではどうやって画像を表示させているのかといえば、今回もタグを使います。
今回のタグは「一つだけで済むもの」の分類に入ります。
設計図の中を見ると、
＜img src="【画像が入っているフォルダ名/画像のファイル名】＞
という部分があります。
この部分が画像を表示させているタグになります。
差し替えをする場合は 【画像が入っているフォルダ名/画像のファイル名】
部分を変更します。
例えば、
＜img src="/image/topic_01.jpg"＞
この部分の画像を入れ替えるとします。
まずは、imageフォルダの中に変更したい画像を入れたあと、半角英数字で画像
の名前を任意のものに変更します。
この時に、元の画像と同じ大きさに新しい画像を合せておくと楽です。
ここでは新しい画像のファイル名を new_baby01.jpg だとします。
※画像のファイル名は必ず半角英数字を使用して下さい。
漢字や全角文字を使うと正しく表示されません。
現在の画像名が topic_01.jpg となっていますので、
この部分を baby_01.jpg に変更します。
＜img src="/image/topic_01.jpg"＞
↓
＜img src="/image/baby_01.jpg"＞
『実際ホームページで見た場合の見え方はこちら↓』
http://www.webpro.jp/2525/topic3.html
保存をして、変更したファイルをダブルクリックで開いてみて下さい。
変更したかった画像が上手く変わっていましたか？
では、次回は『ちょっと詳しい文字の装飾について』の説明になります。
タグって色々あるの？
前回では簡単な『タグ』についてのお話をしました。
では今回は『ちょっと詳しいタグのお話』です。
タグには大まかに言うと二種類のタグがあります。
のように、一つだけで済むものと、
一つだけでは役に立たないものです。
例えば、
はじめまして！こんにちは！エッセンティアです。
この中で こんにちは！ の部分だけに色をつける場合。
やり方は何通りかあるのですが、一番簡単なものをご説明します。
この場合には、というタグを使います。
fontとは、そのまま『文字』という意味。文字の装飾に使うタグです。
今回は こんにちは！ だけに色をつけたいので、 こんにちは！ を
このタグで挟みます。あとで自分で判り易い様に行を分けると良
いでしょう。
囲みを閉じる時はの様に、タグの頭に / をつけます。
設計図の中身は
タグを使わない限り行を改行しても見た目は変わりません。
はじめまして！
こんにちは！
エッセンティアです。
これで下準備が整いました。
では、文字に赤い色をつけてみましょう。
色の指定方法にも色々なやり方がありますが、今回は色の名前を英語で
そのまま入れる方法にしてみます。
色の指定をしますので、「文字の色は赤だよ」と英語で書きます。
color="red"
この""で囲まれた中身が色の指定になります。
はじめまして！
こんにちは！
エッセンティアです。
『実際ホームページで見た場合の見え方はこちら↓』
http://www.webpro.jp/2525/topic1.html
保存をして、変更したファイルをダブルクリックで開いてみて下さい。
変更したかった文字が上手く変わっていましたか？
では、次回は『画像の変更について』の説明になります。
どうしたら文字の装飾できるの？
前回では『ちょっと詳しい画像変更のお話』をしました。
今回は、【文字の装飾について】です。
長い文章や難しい内容の文章など重要な部分を赤色の文章に変えたり、
太字にするなどして、目立たせるだけで文章内のポイントを掴みやすく、
わかりやすい文章にすることができます。
しかし、文章全体を赤色にすると目立つからといって、
テキスト全体を赤色にしては全く意味がないどころか、逆に読みにくくなってしまいます。
文章の一部分だけを赤色に変えたり、太字にしたり、大きな文字にしたりなど、
効果的に使える様々な文字装飾があります。
では、いくつか文字を修飾する方法を紹介したいと思います。
前回の画像変更の際にも利用しましたが、今回もタグを使います。
【文字を太字にする】
太字は一般的に『ボールド』と呼ばれ、強調を意味します。
タグを用いて、設計図（HTML)の文章内で強調したい文字にこのように記述しま す。
太字になります → 太字になります
【文字を斜体にする】
斜体装飾はイタリック体とも呼ばれております。
斜体にはタグを用います。
設計図（ＨＴＭＬ）の文章内の文字にこのように記述します。
斜体にする → 斜体にする
【文字に下線をつける】
下線装飾は『アンダーライン』と呼ばれ、タグを使います。
アンダーラインはリンクと間違うことがあるので使う場所などに注意しましょう。
設計図（ＨＴＭＬ）の文章内の文字にこのように記述します。
アンダーラインを引く → アンダーラインを引く
【文字に取り消し線をつける】
文字の否定を強調するために取り消し線を使うこともあります。
タグを使います。
設計図（ＨＴＭＬ）の文章内の文字にこのように記述します。
1000円⇒850円 → 1000円⇒850円
『実際ホームページで見た場合の見え方はこちら↓』
http://www.webpro.jp/2525/topic3.html
変更をしたデータを保存をして、ファイルをダブルクリックで開いてみて下さい。
文字が装飾され分かりやすい文章になりましたでしょうか？
では、次回は『ちょっと詳しい文字色の変更について』をお届けします。
乞うご期待ください。
