水分摂取は小まめにしていきましょーねっ♡

では、今回はサイドバーの情報を変更していきます。

トップを変更するには「index.html」から右クリック→編集で行ってきましたが、サイドバーについては「side.html」

から編集を行います。

サイドバーのテンプレートはこのような形になっております。

では、まずサイドバーのコンテンツ名を変更します。

これは前回のコンテンツバーの情報の変更の仕方と同じ方法ですの詳細は割愛させてさせていただきますね。

ソースを表示して、

<!-- ここがサイドバーです -->
<div style="line-height:40%;">　</div>
<table width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #e1e1e1; padding:5px; background-color:#ffffff;">
<tr align="left" valign="middle" height="42">
<td background="side-bar8.jpg">
<div style="font-size:11pt;">　<img src="c8.gif" alt="">　<a href="index.html"><font color="blue"><strong>トップページ</strong></font></a></div>
</td>
</tr>

赤字の部分を好きな名前に変更していきます。

次はお気に入りの部分です。

<!-- ここがお気に入りバーです -->
<button onclick="window.external.addFavorite('http://toretama.jp/','無料ホームページ制作講座');" name="お気に入りに追加する" style="height:16pt;text-align:center; margin-top:0pt; line-height:100%; width:145px;">お気に入りに追加する</button>
<div style="line-height:40%;">　</div>

お気に入りの情報を変更していくには(　)内の赤字部分を自分の取得したドメイン名に変更し、

名前も自分の作ったサイト名に変更します。

その他の情報は赤字の箇所に、自分の入れたい情報、例えばランキングページや自分のお店の広告などを好きに入力していきます。

<!-- ここがその他の情報です -->
<table border="0" width="100%" height="27" cellspacing="0" cellpadding="0" style="background:#ffffff url(middle-bar8.jpg);" align="center">
<tr align="center" valign="middle">
<td>
<font color="white"><span style="font-size:11pt;"><strong>その他</strong></span></font>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #3399ff; background-color:#eeeeee;" align="center">
<tr align="left" valign="middle" height="46">
<td style="padding:10px">
何か情報を掲載できます。<br><br><br><br>
</td>
</tr>
</table>
<div style="line-height:40%;">　</div>

バーナーを変更するには上の赤字部分URLに画像のURLを置き換えます。

更新をするとこのようになりました。

私の場合はヘッダーとアイコンをテンプレートに合わせて変更しました。

また、背景色も白に変更。

<!-- ここがその他の情報です -->
<table border="0" width="100%" height="27" cellspacing="0" cellpadding="0" style="background:#ffffff url(middle-bar8.jpg);" align="center">
<tr align="center" valign="middle">
<td>
<font color="white"><span style="font-size:11pt;"><strong>その他</strong></span></font>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #3399ff; background-color:#eeeeee;" align="center">
<tr align="left" valign="middle" height="46">
<td style="padding:10px">
何か情報を掲載できます。<br><br><br><br>
</td>
</tr>
</table>
<div style="line-height:40%;">　</div>

背景色を変更するにはbackground-color:#eeeeee;" 部分の自分の好きなカラーコードを入力します。

サイドバーは最後にちゃんと編集しようと思うので、情報はまだ記載していません。

今回はここまでです。

もし分からないことがある場合には、気軽にメッセージ下さいね。

それと、「もっとこのようなことを教えてほしい！」「知りたい！」、「こうやって解説したらいいんじゃないか」

というものがあればメッセージを下さい。

解説ページを設けたいと思います。

また、もっと早くホームページを作りたいという方はテンプレートがあったほうが早いです。

早くホームページを作りたい方は、「会員制サイドビジネス講座」 や私が作ったホームページ制作のすすめ をご覧になってみてください。

最後まで読んでくれてありがとうです。

まちゅ子。

今日からお盆ですね。

まちゅ子は引っ越しの準備などがあるため、お盆に帰省はできないので初盆にお墓参りを済ませました。

みなさんもご先祖様は大切にしてくださいねー♡

では、今日はコンテンツバーの情報を変更していきたいと思います。

テンプレートはこちらです。

これのコンテンツバーのソースを表示すると

<!-- ここがコンテンツバーです -->
<table align="center" bgcolor="#6899d1" cellpadding="0" cellspacing="0" height="36" width="100%">
<tbody>
<tr align="center" valign="middle">
　

　　　　　 <td background="top-bar8.jpg" width="150"><span style="font-size: 11pt;"><a href="index.html"><font color="blue"><strong>トップページ</strong></font></a></span></td>
<td background="top-bar8.jpg" width="150"><span style="font-size: 11pt;"><a href="page1.html"><font color="blue"><strong>コンテンツ１</strong></font></a></span></td>
<td background="top-bar8.jpg" width="150"><span style="font-size: 11pt;"><a href="page2.html"><font color="blue"><strong>コンテンツ２</strong></font></a></span></td>
<td background="top-bar8.jpg" width="150"><span style="font-size: 11pt;"><a href="page3.html"><font color="blue"><strong>コンテンツ３</strong></font></a></span></td>
<td background="top-bar8.jpg" width="150"><span style="font-size: 11pt;"><a href="page4.html"><font color="blue"><strong>コンテンツ４</strong></font></a></span></td>
<td background="top-bar8.jpg" width="150"><span style="font-size: 11pt;"><a href="page5.html"><font color="blue"><strong>コンテンツ５</strong></font></a></span></td>
</tr>
</tbody>
</table>

ちょっと見にくくてごめんなさいです。

コンテンツ名を変更するには、上記の赤字部分を自分の入力したい文字に変更します。

<!-- ここがコンテンツバーです -->
<table align="center" bgcolor="#6899d1" cellpadding="0" cellspacing="0" height="36" width="100%">
<tbody>
<tr align="center" valign="middle">
①　<td background="b-165.gif" width="150"><span style="font-size: 11pt;"><a href="index.html"><strong><font color="white">TOP</font>
</strong></a></span></td>
②　<td background="b-165.gif" width="150"><span style="font-size: 11pt;"><a href="page1.html"><strong><font color="white">サービス内容</font>
</strong></a></span></td>
③　<td background="b-165.gif" width="150"><span style="font-size: 11pt;"><a href="page2.html"><strong><font color="white">作成の流れ</font>
</strong></a></span></td>
④　<td background="b-165.gif" width="150"><span style="font-size: 11pt;"><a href="page3.html"><strong><font color="white">作成料金</font>
</strong></a></span></td>
⑤　<td background="b-165.gif" width="150"><span style="font-size: 11pt;"><a href="page4.html"><strong><font color="white">作成実績</font>
</strong></a></span></td>
⑥　<td background="b-165.gif" width="150"><span style="font-size: 11pt;"><a href="page5.html"><strong><font color="white">問い合わせ</font>
</strong></a></span></td>
</tr>
</tbody>
</table>

ちょっと見やすいように番号で分けてみました。

分かりやすくなったでしょうか？

①のソースを分解してみてみましょう。

①　<td background="b-165.gif" width="150">　<span style="font-size: 11pt;">　<ahref="index.html">　<font color="blue">　<strong><font color="white">TOP</font><br>
</strong></font></a></span></td>

★初めの、<td background="b-165.gif" width="150">　は、コンテンツバーのバーナー情報になります。

自分の好きな画像URLを()内に入力してください。「width」は幅になりますので、これも好きなように変更できます。

★<span style="font-size: 11pt;">　は文字の大きさです。これも自分の好きな大きさに変更できます。

★<ahref="index.html">　はリンク先のページ情報です。

つまり、自分がそのコンテンツバーをクリックして、移動したいページの情報を入力します。

TOPページの情報はindex.htmlですので、①ではこのように表記されます。

★<font color="white">で文字色の変更ができます。

★<strong>　文字　</strong>　とすると、文字が太字にできます。

必要な情報を入力して更新するとこのようにコンテンツバーが変更されます。

白い文字になっているので、ちょっと画像だと見えにくいかもしれません。

一見、ソースを表示する「いやぁぁぁぁ、わけわからなーい」となるんですが、

ひとつひとつ見ていってあげると、パズルのパーツみたいな感じで構成されていることが分かります。

全体像を見ると逃げ出したくなるかもしれませんが、案外単純なものです。

頑張っていきましょう。

今回はここまでです。

もし分からないことがある場合には、気軽にメッセージ下さいね。

それと、「もっとこのようなことを教えてほしい！」「知りたい！」、「こうやって解説したらいいんじゃないか」

というものがあればメッセージを下さい。

解説ページを設けたいと思います。

また、もっと早くホームページを作りたいという方はテンプレートがあったほうが早いです。

早くホームページを作りたい方は、「会員制サイドビジネス講座」 や私が作ったホームページ制作のすすめ をご覧になってみてください。

最後まで読んでくれてありがとうです。

まちゅ子。

今日はお天気が良くてすごく気持ちがいいですねー♡

私は空が大好きです！！

では、今回はホームページのタイトルを変更していきたいと思います。

私はこのテンプレートを使用しています。

上記のホームページのタイトルを変更していきます。

このソースを表示すると、

<td><!-- ここがタイトルバーです -->
<table style="border: 0px solid rgb(204, 204, 204); background: rgb(255, 255, 255) url(title-13.jpg) no-repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" align="center" width="100%">
<tbody>
<tr>
<td> <br>
<h1>　ホームページのタイトル</h1>
<br>
<br>
</td>

となっています。

タイトルを変更するには赤字の<h1> </h1> で囲まれた「ホームページのタイトル」という箇所を変更します。

私の場合は、現在「個人・中小企業向けホームページを作成サービス」についてのホームページを制作していますのでタイトルに入れてみます。

<td><!-- ここがタイトルバーです -->
<table style="border: 0px solid rgb(204, 204, 204); background: rgb(255, 255, 255)① url(title-13.jpg) no-repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" align="center" width="100%">
<tbody>
<tr>
<td> <br>
<h1>　個人・中小企業向けホームページ制作サービス</h1>
<br>
<br>
</td>

となります。

また、タイトルに画像を入れたい場合は① url(title-13.jpg)の(　)内を自分の好きな画像のURLを入力します。

私の場合は、素材集から画像を選び、画像編集用ソフトで編集しています。

編集ソフトは「Jtrim 」と 「Gimp 」の無料ソフトを利用しています。

これも石田さんの無料ホームページ制作講座でご案内してくださっているので、確認してみてください。

しかし、石田さん無料でここまでのものを紹介してくださっているなんで、本当に素晴らしいですよね♡

会員制の講座を受講しているとメールが届くのですが、本当に素敵な誠実な方だなー♡と思っています。

感謝！感謝！

すみません・・・話が飛びました！

入力したものを、保存し、更新するとこのようになります。

ちょっと先に進んでしまっているため、背景色やバーナーは変更されてしまっています。

サイドバーはまだ未修正です。

タイトルの文字の色や大きさはCSSでも変更できますし、編集用ソフトで「kompozer」を使用しているのでそのまま

文字のスタイルを変更すれば入力することができます。

CSSの編集はテンプレートの中にはCSSテキストが入っていますので、開いて編集を行います。

変更する場合は　タイトルは[h1]なので、

h1 { color:dodgerblue; font-size:16pt; margin:0px 0px;}　の「color」、「font-size」を自由に変更して下さい。

また、講座にはないのですがホームページの背景を変更したい場合にはタイトルの下に

<STYLE type="text/css">
<!--
BODY{
background-image:url(bg_b19_15.gif);
background-color : #ffffff;
background-repeat : repeat-x;
background-attachment : fixed;
background-position :;
}
-->
</STYLE>

を入力します。

URLに自分の好きな画像を入れ、必要な情報を入力します。

またこれについては詳しく、別なテーマで紹介しますね。

今回はここまでになります。

もし分からないことがある場合には、気軽にメッセージ下さいね。

また、もっと早くホームページを作りたいという方はテンプレートがあったほうが早いです。

早くホームページを作りたい方は、「会員制サイドビジネス講座」 や私が作ったホームページ制作のすすめ をご覧になってみてください。

ありがとうございました。

さて、今日からホームページを実際に作っていきたいと思います。

ホームページはヘッダー＋ボディーが基本構成です。

まず、初めにホームページの基本情報である「ヘッダー」の編集です。

ヘッダーの基本情報は、重要なSEO対策になります。

SEO対策とは検索エンジンの上位に自分の作ったホームページを載せるようにするための対策のことです。

詳しくはまだ別の記事で詳しく紹介させて頂きますね。

下のHTMLタグがヘッダーの基本情報となります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<meta name="①keywords" content="キーワード１,キーワード２,キーワード３,キーワード４,キーワード５">

<meta name="②description" content="ここにホームページの説明文を記載してください">

③<title>ここにタイトルを記載してください</title>

<link rel="stylesheet" href="style.css" type="text/css"＞

<BASE target="_top">
</head>

重要になる変更箇所が　①キーワード　②ホームページの説明　③タイトルです。

HTMLの青字の箇所です。

①キーワードについては１０個程度記載するようにしてください。

１０個以上入力しても、意味をなさないですし、逆に検索エンジンから嫌われてしまうためです。

②descriptionはホームページの説明になります。

これは大体50～70文字程度にしましょう。こちらもやりすぎると検索エンジンに嫌われてしまいます。

③titleについては重要な箇所になります。

タイトルに含まれる文字で検索されたときに、そのホームページが検索エンジンの上位に表示される可能性が高くなるためです。

一番アクセスを取りたい文字をタイトルに入れるようにしてください。

長すぎると重要度が分散されてしまうので気をつけてくださいね。

その下の<link rel="stylesheet" href="style.css" type="text/css">はスタイルシートの設定を表しています。

スタイルシートとはホームページの見栄えを良くするためのもので、現在のホームページには必須のものです。

これについてはまた別でご説明したいと思います。

それでは実際にやってみましょう。

私は自分のホームページ作成サービス用のサイトをつくっていますので

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="ホームページ,作成,サービス,おすすめ,格安,">
<meta name="description" content="クオリティの高いホームページの作成・運用を低価格でご提供させて頂くサービスです。">
<title>個人・中小企業向けホームページ制作</title>
<link rel="stylesheet" href="style.css" type="text/css">
<BASE target="_top">
</head>

となります。

ここまでは変更しても画面が変わることはありません。

早くホームページを作りたい方は、「会員制サイドビジネス講座」 や私が作ったホームページ制作のすすめ をご覧になってみてください。

今回はここまでになります、

次回は、実際にコンテンツバーについて行っていきます。

また、質問等がありましたら気軽に連絡ください。

まちゅ子でした♡

それでは、これからホームページについて学んでいきたいと思います。

私は「会員制サイドビジネス講座」 の受講生で講座に沿って学んでいるのですが、受講していない方でも学べるように工夫していきたいと思います。よろしくお願いします。

初めは、「ホームページを公開するまでの流れ」についてです。

まず、ホームページを作成するには重要なことが三つあります。

一つ目は、ホームページのデータを作成することです。

このアメーバブログもそうなのですが、サイトはすべてHTMLという(記号なような・・・)もので構成されています。

なので、ホームページを表示しているファイルであったり、使用している画像ファイルであったり、このようなホームページのデータを作成することが必要なことになってきます。

HTMLデータを編集するのに講座では「秀丸」という無料ソフト(基本)を使用していますが、私は「komopozer」と併用しています。

「秀丸」はHTMLデーターしか見れないのに対し、「kompozer」なら表示とソースの両方から作成することができます。

ホームページを作る際に必要になりますので、ダウンロードをしてくださいね。

詳しいダウンロードの方法は動画で覚える無料ホームページ制作講座で動画で分かりやすく案内がありますのでこちらで見たほうがよろしいかと思います。

二つ目は、ドメインを習得することです。

ドメインとはホームページの住所のようなものです。

サイトを表示すると、URLが表示されますよね？

個人でサイトを運営するためには、このドメインの習得が必要になります。

ちなみに私は、「ムームードメイン」を使用しています。比較的安価です。

三つめはレンタルサーバーを借りることです。

たとえば、いくら自分で作ったデータを持っていても、他の人は見ることはできないですよね？

そのため「レンタルサーバー」という色々な方がアクセスできる場所に、ホームページのデータを置くことで、

世界中の人がそのホームページを見ることができます。

有名なレンタルサーバーとしては「ロリポップ」や「さくら」などがあります。

私は比較的安価な「ロリポップ」を使用しています。

ホームページを公開する際に、FTPというツールを使用するのですが、ロリポップの中にもFTPツールがあるので

複数のサイトを管理する際にとても便利ですよ。

もっと詳しく知りたい方は動画で覚える無料ホームページ制作講座 でご案内してくださっていますので、

是非みてみてください。

でも、無料ホームページ講座でご案内している通りにホームページを私も作成してみたのですが、大変なんですね。時間はかかりますし,

色々なタグを自分で入力しないといけないので・・・。

なので初心者さんは何かしらテンプレートを使用したほうが作りやすいと思います。

早くホームページを作りたい方は、「会員制サイドビジネス講座」 や私が作ったホームページ制作のすすめ をご覧になってみてください。

このブログはあくまで私のアウトプットの場なので。

よろしくお願いします。

私は以下の「私が自分の人生について見直したきっかけ」で副業やホームページの作成を行おうと決めました。

そこで、私が利用したのが「会員制サイドビジネス講座」 でした。

講座ではホームページ作成の方法やビジネスについて教えてくださるのですが、初心者である私がホームページを作れるようになるまでをこれから、ブログに書いていきたいと思います。

自分が作れるようになる過程を残したいという思いもありますが、これからホームページを作りたいと思っている人のお役に立てたら嬉しいです。

これから初心者まちゅ子がホームページを作っていくのでよろしくお願いします。

■私が自分の人生について見直したきっかけ■

看護大学卒業後、中型の総合病院に就職。　(正看護師・保健師免許取得)
　　　　　　　　　　　　　↓
仕事に就くが、モヤモヤした感情が生まれ始める。
　　　　　　　　　　　　　↓
モヤモヤは大きくなるばかり、それは何か考えた理由が以下

◆時間は不規則、仕事の内容はハード、休みが少ない

◆毎日同じことの繰り返しでただ「生活のために働いている」という状況

◆疲れ果てていて大切な人にも優しくできない、家族ともいる時間が少ない、そのような点から「自分にとって の幸せ」はなんだろう」と考えるようになった。

◆「やりたいこと」があっても時間とお金がなくてできないと思うことがたくさんあった。
　(例えば旅行や習い事、趣味)

◆給料が上がるには何年も勤務し続けなければならない、しかもそれは定められた金額で限度が ある。こんなことを何年も続けるの？？

◆私は体が弱く、働くことが困難になることが多々あった。

◆なりたい将来の自分と現在の自分が繋がっていなかった。