ブログ風ホームページの作り方

(注意) 以下、メモ帳を使用する場合の説明となっていますが、好みのエディタに置き換えてお読みください。

全体の構成図です。
画像ファイル以外は、同一の場所に置きます。

構成

サンプル内のファイルを使用して、ブログ作成の練習をします。

使用ファイル

ブログ作成練習 概要
1.現在の先頭ページ(index.html) を、過去のページ(k20100101.html) に名前変更する @
      変更後の名前は k20100101.htm でも可ですが、識別子変更の警告が1回表示されます
2.過去のページ(k20100103.html) をコピー&貼付けする (k20100103 - コピー.html) A
3.k20100103 - コピー.html を 新しい先頭ページ (index.html) に名前変更する A

新先頭ページ index.html の内容を変更していきます。
( 練習サンプルに k20100103.htm を選んだのは、内容が簡単だからです )

index.html にカーソルを当てて右クリックしプログラムの中からメモ帳を選ぶ

メモ帳が枠に入っていなければ、「既定のプログラムの選択」を選び + マークをクリックしてメモ帳を選ぶ
見つからなければフォルダ列の Windowsフォルダ内にあるので探してクリック

練習

ソース内の「ここから今回の記事」〜「ここまで今回の記事」を見つけます。
見つかれば、最初に日本語部分のみを自分の言葉に変更します。
(下記画像の青網掛けの部分、文章最後の<br />は改行マークです。下記【ソース修正時の注意点】 参照)

ここで「上書き保存」する。
メモ帳画面はそのまま

(1) 修正後の index.html をダブルクリックしてブラウザで開くと自分の言葉が表示されているはず

(2) ブラウザ画面はそのままで、メモ帳の画面に戻って、画像を入れ替えてみる(下記画像の黄色の部分)
smpl007.gif → smpl005.gif サイズは width="420" height="300" に修正
smpl008.gif → smpl006.gif サイズは width="420" height="300" に修正
alt= については、カーソルを当てると表示するブラウザがあるので適宜変更
ここで「上書き保存」する。メモ帳画面はそのまま

上記の (1) で表示中のブラウザ画面に戻って、更新ボタンをクリックし修正が反映されていることを確認する。

ここまでうまくできれば、自分の画像を表示してコメントを書き込んでみる。
画像の横幅制限があるので 640px までの画像を用意し、img110 内に転送すると表示します。
上記 (2) から繰り返す (自分の画像ファイル名とサイズに修正)

練習

【ソース修正時の注意点】

空要素タグの閉じ方は、下記ソースのように空白を一つ置いてから /> と記述してください。
<p> 〜 </p> のように開始と終了タグがある場合は空白は不要です。

練習

自分のページが完成すれば、リンクを調整します。

blogSample.js をメモ帳で開き、リンク行の一番上に今回のファイル (index.html) とタイトルを置く。
前回の index.html は、操作2 で変更した名前に変える。

上書き保存後、ブラウザで表示して新しいリンクが追加されていることを確認する。

リンクのスクリプト修正方法
( 以下のサンプルは、Mery エディタを使用したものです )

練習

練習

レイアウトを変えてさらに練習する場合

下図の青網掛け部分を自分仕様に変更します。
スタイルシートの内容は、操作6 を参照願います。必要画像は img110 にあります。

練習

練習も終わり、公開用のページの構想がまとまったら
以下のように新フォルダを作成し、ファイルを整理しながら作成していきます。

下図は、デスクトップへ新フォルダを作成する場合の例です。
デスクトップの空いた所で右クリック→新規作成→フォルダとクリックし、フォルダ名を変更します。
このフォルダの中に img110 新フォルダを同じ方法で作ります。

サンプルフォルダのなかから必要なファイルを所定の場所にコピーします。
置き場所は、操作1 を参照してください

  • javaScript は、1年分用 (y2010.js) と、年を呼び出す (years.js) が必要です。
  • スタイルシートを選ぶ
    • base01.css .. 860x130 タイトル部はカラーのみ。2、3分割あり
    • base02.css .. 860x130 titl01.jpg 画像をタイトル背景としている。3分割のみ
    • base03.css .. 850x100 titl02.jpg 画像をタイトル背景としている。2、3分割あり

アップロードの前に、新フォルダ内で index.html をダブルクリックし、リンクなど、すべての動作を確認してください。
練習

【まとめ】

新しいページを追加する場合の手順は、下画像のとおりです。
作成後、日本語部分を再確認しておいてください(コピー元の内容が残る場合があるため)

練習
練習
練習
練習