人気ブログランキング | 話題のタグを見る
<< MIDI教室の思い出 コーチャンを偲ぶ会(4/9) >>

秋月のHPの作り方
秋月のHPは、Qponさん提供のフリーソース・・・高画質写真展示ツール
(Ver3)
を自分なりにカスタマイズして作りました。
まずはそこの『ビルダーでの利用』をご一読ください。

<まず理解しておくこと>
1) これはJavaScriptで作られている。
2) スクリプトはQponさんのサイトの"quality3.js"に直リンクされ、
   それで動いている。
3) 必要なのは画像(大小)とindex.html(htmでも可)だけ。
4) 画像のレイアウトは6列×4行で配列した。
   (お気に入りを表示したまま見れる範囲で目一杯多く表示)
5) それをUPする自分専用のサイトがあること
6) ビルダーは使わずに、今回はメモ帳のソースを変えて作る。

<作り方>
 いつもHPを格納しておく場所(Dドライブあるいは
 マイドキュメントなど)にフォルダを作る。名前は都合よく
    付けてください。ここでは便宜的に「akiduki」とする。

 私の秋月のHP →ここをクリック をみて、メニューバーの表示→ソース
 でメモ帳が開く。

 メモ帳のファイル→名前を付けて保存→保存した場所の
 の「akiduki」フォルダを「開く」。 
秋月のHPの作り方_b0018441_17265316.jpg

 ファイル名を半角英数で  「index.html」(←メモ帳は拡張子まで
 つける)で「保存」。
秋月のHPの作り方_b0018441_216640.jpg


 画像大は、600×450pxに縮小して、ファイル名を、001から024の
 連番でつけ、  「akiduki」フォルダに保存。
    同じ画像の小は、118×88pxに縮小して、ファイル名を、s001から
    s024の連番でつけ、「akiduki」フォルダに保存。
  【フォルダの中身】 クリックで拡大するとこうなっているはずです。

秋月のHPの作り方_b0018441_1664359.jpg

 ここでindex.htmlを開くと、画像がご自分のに変わっていると
 思います。
    あとは【1】タイトル画像【2】タイトル下の説明、【3】拡大画像画面の
    説明テキストの変更ですね。これはすべてソースでします。

 【1】index.htmlの「表示」から「ソース」を開け、赤線の部分をご自分で
 作ったタイトルgif画像にかえる。
    テキストでいい方は、次のようなタグ(半角英数)に替える。
秋月のHPの作り方_b0018441_18144686.gif
                         
     
<font size="5" color="green">秋月ウォーク</blockquote>

  <表示はこうなります→>秋月ウォーク

 【2】続いて、同じく説明文もかえます。これは削除しても可。
    その時は、<table>~</table>を削除。
秋月のHPの作り方_b0018441_12424848.gif

 【3】また続いて、拡大画像画面の説明文もかえます。
 必ずテキストの部分だけを注意深く書き替えて下さい。
   「,,や";」を削除すると表示されなくなります。
秋月のHPの作り方_b0018441_18583040.gif

10
 全部書き替わったら、「ファイル」→「上書き保存」。

11
 ブラウザの更新をクリックし、出来上がりを確かめて完了!!

12
 akidukiフォルダを、ビルダーのFTPあるいは
    フリーソフトのFFFTPで自分のサイトにフォルダごとUPする。

13
 インターネットエクスプローラーで確認。
 無事表示できたら、拍手!!

    URLは http://自分のドメイン名/akiduki/index.html

★一度苦労して作ると、2度目からは簡単ですよ~。
★勿論画像サイズは、大小とも希望のサイズに変えられます。

by otomi_2 | 2006-04-10 15:40 | ├PC関連 Topに戻る
<< MIDI教室の思い出 コーチャンを偲ぶ会(4/9) >>