お知らせホームページの作り方 （その２）
このページは「右メニュー、 縦２列レイアウト」見本兼用です
リンク作業環境確認
- ホームページ用のフォルダを新しく作成する。
同じ方法でデータ保存用のフォルダも作成する。（コピーを取っておくと安心です）
(デスクトップ画面で説明)
a) 何も表示されていないところで 右クリック し、以下のマーカー部分をクリックする。
b) ファルダ名は後で変更できます。（フォルダ内のファイルを使用していないときのみ）
フォルダ名の上にカーソルを当ててゆっくり２回クリックすると
以下画像のように修正モードになります。
- フォルダ内の環境を整えます。
a) フォルダ左肩のラベル「表示」をクリックして「ファイル名拡張子」にチェックが
入っていることを確認する。
リボンの「表示/非表示」操作は、右端の ？マークの隣の記号をクリックしてください。
- ホームページ用のテキストエディタを新調する場合は、Vecter などからフリーソフトをダウンロードしてください。
「いぶし銀ブログ」のページをご覧ください。
トップページ作成準備
- ダウンロードしたファイルをデスクトップへ解凍します。内容は以下の通りです。
pgtop.html ファイルをＷクリックすると、説明書兼用のページが開きます。自分のページ作り時には、これらのページを参照しながら作業を進めていくことになりますので、解凍ファイルはそのままデスクトップ上に置いてください。
- ダウンロードしたファイルから、自分のページとして使えそうなファイルを選び、gazo フォルダ、 base.css と一緒に自分のフォルダへコピーしてください。
以後、修正作業は自分のフォルダ内のみ でおこないます。
コピー ＆ 貼り付け方法- 上記画像の必要ファイル、フォルダなどをクリックする
- 以下画像の コピーアイコン をクリック
- 自分のフォルダを開けて 貼り付けアイコン をクリック
以下の gazo ファルダ内の smp から始まる見本画像は、最後に削除してください。
- 自分のフォルダへコピーしたファイルの名前を index.html に変更して、トップページから作成していきます。 （トップページの名前はアルファベット半角 index.html と決められています）
- index.html にカーソルを当て、右クリックメニューの中から、テキストエディタもしくはメモ帳を選ぶ。
(右クリックメニューの説明)
a) テキストエディタ（下図の場合は Mery）があれば ①をクリック
b) メモ帳を使用する場合は、②→③ をクリック
c) メモ帳が見当たらない場合、④ をクリック後
その他のアプリ枠にカーソルを入れるとスライダーが現れるので深く探す。
「□ 常にこのアプリを使ってファイルを開く」 には、チェックを入れないでください。
- 以下のマーカー部分を自分のホームページ用に変更して、上書き保存する。
(Meryエディタで説明)
a) 日本語（ブラウザに表示されている部分）を探して、自分のページ用に変更します。
b) タイトルの２行目が不要であれば、２３行目を行削除してください。
c) ＜ から始まる記述は 半角 のみ を使用します。
d) ＜!-- から --＞まで (以下の緑文字) はコメントで、表示されません。
e) 要素は通常 ＜div＞ ～ ＜/div＞ のようにペアで使用します。
f) ＜br /＞ は改行です。＜img ～ /＞ は画像を置く要素です。
このようなペアでない要素は、「半角スペース１個 + / + >」 の３文字で閉じてください。
- テキストエディタ画面はそのままで、index.html をＷクリックしてブラウザで表示する。
タイトルが変更されていればＯＫです。
ブラウザは開けたままで、下図の①→②→④ の作業を続けていきます。
ダウンロードをクリックすると、このページレイアウトを含む３ページがダウンロードされます。
解凍後、テキスト及び写真などを変更しながら仕上げていきます。
解凍後、テキスト及び写真などを変更しながら仕上げていきます。