お知らせページ2
(右メニュー、 縦2列レイアウト)

ページの概要

以下の画像のように、中央のタイルを縦2列に分割使用しています。
割付サイズは右から 130px, 790px となっています。このサイズ以内であれば、自由に使用できます。
適宜、改行 <br /> を置きながらコンテンツを追加してください。<p> 〜 </p> は1行空き付の改行です。 <p class="blkinit"> 〜 </p> は、開始位置を2文字分右へ寄せます。

ページ概要図

修正方法 (以下ブラウザで表示を確認しながら作業をすすめる)

  1. 最初にタイトルを変更して、作業の感覚をつかみます。
    (お知らせホームページの作り方 その2 を参照)
  2. 次に以下画像の参考にしながら、リンク先(@ A B)を上記タイトルに合わせて変更します。サブタイトルや文も変更します。(青色マーカー部分)
    @ 1行目は index.html に変更してください。

    html ソース

  3. 画像がある場合は、gazo フォルダに画像を置いた後、<img src= 〜 行の画像ファイル名、幅、高さなどを変更します。 (上記、黄色マーカー内の黄緑マーカー部分)
  4. 画像の表示位置を変更したい場合は、上記、黄色マーカー行をコピー(もしくは切取り)し、所定の位置に貼り付けます。
    (画像部分の説明は、お知らせホームページの作り方 その3「html の説明」を参照)
  5. ブラウザ表示を自分のコンテンツだけにして作業を進めたい場合は、不要部分を削除します。
    この説明ブロックを削除する場合は、以下の青マーカー行を削除する。開始と終了位置は黄色マーカーを参考にしてください。
    (記述方法参照のために残しておいて、最後に削除してもよい)

    html ソース

  6. 新しいサブタイトルを付けてコンテンツを追加したい場合は、以下のマーカー行をコピーし、所定の位置に貼り付けてください。
    赤枠ブロック行をコピー & 貼り付け 後変更する方法もあります。

    html ソース

  7. 新しいページを追加する方法は、トップページ にあります。
    (説明10.〜11.) 内容が一部重複する個所もありますが、他の説明も参照ねがいます。
最初は、少し修正してブラウザで修正部分を確認するようにしてください。