HomePage講座     Yukiの休息所(趣味の部屋)
 2号館トップに戻る
 HomePage講座に戻る
 初級者講座に戻る
次の項目へ>>
<<前の項目へ

 HomePage講座第3回、初級者用講座です。

 HomePage講座第3回、初級者用の講座です、当講座では、 超初級者でも必ずホームページが持てるように、特殊な方法で、ホームページを作っていきます。

 超初心者を脱出なされた、ファイルのアップロードが出来る方を対象に、初級講座を開設してます。
 中級の方には、余計なお世話でしょうが、 まあこんな方法も有るんだ位の軽い気持ちで読み飛ばして、利用できる所だけご利用くだされば結構です。

 既にホームページを運営中の方は、中級編までお待ち願います。

 第3回では、Templateを改造し、自分流に染めていく方法を紹介します。
 一回では無理なので、数回に分けて少しずつですね。

 では、初級者用講座1回目を始めましょうか。

 取り合えず、文章中心、画像はあとから追加します。
 
 
 1.初級編開始
   御自分のサイトにアップロード出来る方を対象に、画像と文章の違い、 レイアウト枠のの功罪について、ビルダーを使いながら、順に解説してまいります。

 題材は、写真アルバムの紹介にしましょうか、旅行記や趣味の紹介等に、応用できます。
 Templateは20番にして見ます、

 では、20番をダウンロード・解凍し、フォルダの中身だけ全部を、 前回のフォルダ内にコピーまたは移動してください。
 上書き確認は勿論「OK」です。

 では、トップページを変更します。
 トップページとは、 ブラウザで呼び出したときに最初に表示されるページとでも覚えて置いてください。
 トップページは、一部の例外を除き「index.html」の名前と決まっています。

 名前が違うと、ブラウザが戸惑ってしまいますから、この様になっているのでしょうね。
 
 では、ビルダー開始、前回のサイトを開いてください。
 前回のトップページが、左上に、下のほうに、 前回の「26_index.html」と今回の「20_index.html」が並んでいるはず。

 アイコンの見方は、上段がタイトル、下段がファイル名なんです、 下段のファイル名で確認してください。
 
 「20_index.html」アイコンをダブルクリックして、表示してください。
 続いて、ファイルメニューから、 「名前を付けて保存」、「index.html」に名前を変更して、「保存」、勿論上書き保存です。
 トップページが変わりました、ブラウザで確認してみると良いでしょう。
 
 2.ページの説明
   ページの大きさは、1000×1200、 高さ(height、ヘイト)1000px(ピクセル)、横幅(width、ワイズ)1200px(ピクセル)です。
 カタカナ表記は、単語を覚え易くする為の小生なりの読み方、 今後は、総て、英単語表記にします。

 全体を3分割してますので、其の説明をしておきます。
 上段がheader(ヘッダー)、サイズは1000px×55pxです。
 左側が、左Paine(ペイン)、サイズは200px×1145pxです。
 右側が、本文、サイズは800px×1145pxです。

 この表記方法に馴れてください、今後は、この表記方法が入り混じる事になるでしょう。
 
 各部の説明、
 ヘッダーは、バナー表示用の左側部分と、タイトル表示用の右部分に分かれていて、 用途は其の名のとおり、バナー&タイトル表示用です。
 左ペインは、現状はメニューを表示していますが、 お知らせや広告等、本文とは別の内容を表示する為のスペース。
 右の本文は、コンテンツを表示します。横幅800px、結構大きな画像も表示できます。
 
 3.ページの改造其の1
   3つに分かれてますので、先ずは、ヘッダーから、改造していきます。
 左のバナー、右のタイトル共に、ビルダーで作成できます。
 
では、作成方法を
 ビルダーの左側「ナビメニュー」から、「ロゴ(飾り文字)の挿入」をクリック、 文字の入力と外枠をっ設定します。
 こんな感じ、色々試してみて・・・

 完了すると、何処かに張り付きますが、何処に張り付いてもいいのです。
 では、合成画像の編集
 
 画像を右クリック、合成画像の編集
 先ずは、背景、イメージを選択してから、 縦横比の保持のチェックを外し、幅200px、高さ55px

 続いて、ロゴ、こちらは、背景イメージに合うように、マウスで調整しましょう。

 終わりましたら、再び右クリックから、切り取り、所定の場所に貼り付けですね。

 今度は、タイトルですね。

 タイトルだけは、見かけ上では、たった一つのレイアウト枠に収めて有ります。
 最上段に置くレイアウト枠は、問題を起こさないんです。

 これも、先ほどのバナーと作り方は同じ、でも背景は無い方が良いでしょうか? 好みの問題なんですが。
 最後に、ヘッダーの最も右、ここは無くても良いし、 バナーをもう1つ置いてみるのも良いでしょう。

 お好みで、後から、バランス調整すれば良いでしょう。
 
 4.ページの改造其の2
   左ペインは、将来的には、アフェリエイト広告や、 掲示板などを表示すれば良いのですが、
 当座は、文字などを一度総て消去し、アニメーション等、適当に入れておいてください。

 ナビメニューの上から4つ目「画像の挿入」→「素材集から」→「アニメーション」から 適当に追加してみて下さい。

 続いて、本文の部分
 上段はサイトの照会文を書き込みます。

 コンテンツの紹介や、何の為のホームページなのか、何方に見せる為なのか、 簡単な照会文を書き込んでください。
 初期は画像も挿入して有ります、これは、特殊文字を使うと正常に再現できない方のために、 文字を画像に変換したもの。

 何かの画像処理ソフトで、「PNG」を作れば、実現可能、 ソフトは、「彩彩畑」「Paint.NET」がお勧め。
 小生は「GIMP」を含めて3種類を使い分けています、 総てフリーソフトで、大変便利なソフトです。

 
 

 照会文の例
  「私の旅行記録・旅の思い出写真集」

 私の旅行記 私旅行と写真が趣味なんです、一人で何処にでも出かけて、 写真を沢山写してくるんです。
 旅行記と写真を紹介して、楽しんで頂きたいと、このサイトを立ち上げました。
 時間の許す範囲で結構です、ゆっくり私の旅行記と写真集を楽しんで行って下さい。」

 この場合、「旅行」と「写真」の字句を多用するのが、ベター、 Google検索などでかかりやすくなります。
 それから、「私」の部分はご自身の名前「ゆうこ」等やニックネームを使用するとよりベター

 ここまでで、初級講座第1回終了です。
   
 
   
 ここまでで、こんな感じ、如何ですか?
 次回はページを増やしたり、タイトルを変更してみたり、 いよいよホームページの形が整っていきます。