ホームページを作成する上で多くの技術が必要になる。
そんな中、フリーソフトや作成支援サイトから、いろいろな知恵をお借りしている。
ここでは、それらを備忘録として保管し、役立てるためにページをさくせいしました。
012
011 画像変換&圧縮ソフト紹介・・・06/02/10
010 大画面表示の方法ーその1・・・04/05/24
009 スタイルシートで文字の大きさをプラウダに影響されずに一定にする方法・・04/05/24
008 検索窓の設置方法・・・04/01/10
007 リンクの下線を調整するには・・・03/12/28
006 windowsのフレームの大きさを固定する方法..03/12/24
005 表の枠線の作り方と便利なコピーの方法..03/12/24
004 フレーム内フレームを作る方法とインフレームリンクの方法は
003 画像に枠を簡単に付けるには
002 セーフモードで起動させるには
001 現状のページから左右分割のページを作成する方法










011画像変換&圧縮ソフト紹介・・・戻る
デジタルカメラで撮影した写真や動画のキャプチャー画像などを、
自分のサイトにアップロードする。
これは、サイト管理者にとってはかなり頻繁に発生する作業のはず。
その際、画像形式をひとつひとつ変更していくのでは、作業にとても時間がかかって面倒。
特に「Photoshop」などの高機能フォトレタッチソフトで行う場合は、
起動や処理に時間がかかり、たくさんの画像を処理するのにはあまり向いていません。

そこでご紹介したいフリーソフトが「SendTo-Convert」。
これは、画像ファイルの形式を別の形式に簡単に変換できるソフト。
操作はいたって簡単。
「『送る』に登録」にチェックを入れ、あとは変換したい画像を右クリックして「送る」メニューのなかから「Convert」を選ぶだけ。この手軽さが魅力です。

変換できる画像形式は、BMP、PNG、JPEGの3種類。
なかでも、デジタルカメラで撮影したJPEG形式のファイルを、画質を劣化させずにファイルサイズを小さくしてくれる機能が秀逸。
JPEGは圧縮率を高めると画質が劣化しますが、この機能を使えばファイルサイズだけが小さくなるので、助かりますね。

自分のサイトにたくさんの写真をアップロードしている人や、画像ファイルを扱う機会が多い人におすすめです。
インストールも不要ですので、ぜひ使ってみてはいかがですか?
 ◆ 画像形式の変換があっという間にできちゃう!
          「SendTo-Convert」はこちら(Vectorでダウンロード)

 ◆「SendTo-Convert」の画面イメージはこちら  
















001現状のページから左右分割のページを作成する方法・・・戻る
1. 現状のページ[a.htm]から、TOPにする新たなページ[index.htm]を名前をかえて、作成しておく。
2. 現状のページから、予備として、[ax.htm]として、保管しておく。完成後は削除すればよい。
3. 新たなページ[index.htm]を開く。
4. 左側のページを新たに作成しておきます[menu.htm]
5. メニューバーから「フレーム」→「フレームの分割」→「左右方向」を開きます。
6. 次に「現在のファイルをフレームにします」を選択します。
7. 白紙の分割されたページが作成されます。
8. メニューとなる左側をクリックして、右クリックで「フレーム内に開く」を選択します。
ファイルから、[menu.htm]を開きます。
9. 次に右側をクリックして、右クリックで「フレーム内に開く」を選択して、
ファイルから、[a.htm]を開きます。
10. これで、完成。予備のファイルを削除します。










002セーフモードで起動させるには・・・戻る
1. 起動し始めたら、[F8]を押し、メニューから[↑][↓]で「セーフモード」を選択します。
2. [Enter]を押します。これで、セーフモードで起動します。



















003画像に枠を簡単に付けるには・・戻る
1. 画像を右クリックし、「属性を変える」→「枠」を「表示」に選択します。
2. 枠の色の指定は、メニューバーの「書式」→「背景/テキスト色の設定」をクリック
3. テキストの色、リンクの色を選択します。


















004フレーム内フレームを作る方法は、・・戻る
1. 挿入するフレームを作成しておく
2. 挿入する位置をクリックしておく。
3. メニューから「ツール」→「タグ挿入」をクリックします。
4. IFRAMEを選択し、挿入をクリックします。
5. 属性から、フレームのサイズを適当に決めて、クリックします。
6. その後、フレームの大きさを再調整するのは、右クリックで簡単に調整できます。
7. フレームのURLをインプットします。
8. プレビューから、フレームの大きさを再調整します。
9. さらに、インフレーム内にリンクを貼る方法は、インフレームに適当な名前をつける。
リンク元は、リンク先フレーム名を「ターゲット」に記載する、ことで、貼れる。










005表の枠線の作り方と便利なコピーの方法・・・戻る
1. HPビルダーで表を作成。
2. 表属性の「スタイル」→「タグ編集」を開く。
3. メニューの「レイアウト」を開き、線の色、太さ、線の形式を選択する。
4. この方法で、TABLE,TD,など、お好みの枠をつけることができる。
5. また、この表は、コピーできるので、展開が容易になる。












006フレーム内フレームを作る方法は、・・・戻る
1. 作成されたページをHTMLで開く
2. 以下を挿入する。これは幅690ピクセル縦700ピクセルの例です。

<SCRIPT language="JavaScript">
function changesize(){
window.resizeTo(690,700);
}
window.onload=changesize;
window.onresize=changesize;
</SCRIPT>
3. これで、開くと、この大きさに固定されます。













007リンクの下線を調整するには、・・・戻る
1. 「ツール」→「インターネットオプション」→「詳細設定」
2. 「プラウズ」→「リンクの下線」を選択
3. ポイントしたときに表示する・・を選択すると、通常は下線がでない。








008検索窓の設置方法・・・戻る
1. 検索窓設置のためのサイト:検索窓活用サイト:に詳しく、説明されている。
2. HTMLソースを貼る。
<!-- Begin Yahoo Search Form --><FORM METHOD=GET ACTION="http://search.yahoo.co.jp/bin/search"><INPUT SIZE=30 NAME=p> <INPUT TYPE=submit VALUE="Yahoo! 検索"></FORM><!-- End Yahoo Search Form -->
3. 以下のように表示される。<Yahoo>
4. 同様に、






009スタイルシートで文字の大きさをプラウダに影響されずに一定にする方法・・・戻る
1. スタイルシートで文字を固定・フォントを10pt、形態をMSゴシックにする場合。
これを</HEAD>の前に挿入。
2. <STYLE TYPE="text/css">
<!--
BODY {font-size:10pt ;
font-family:"MS ゴシック";}
TBODY {font-size:10pt ;
font-family:"MS ゴシック";}
.pt8 {font-size:8pt ;}
.pt10 {font-size:10pt ;}
.pt14 {font-size:14pt ;}
.pt18 {font-size:18pt ;}
.pt14h {font-size:14pt ;
font-family:"HGS創英角ポップ体";}
.pt14r {font-size:14pt ;
font-family:"麗流隷書";}
.pt18h {font-size:18pt ;
font-family:"HGS創英角ポップ体";}
.pt12e {font-size:12pt ;
font-family:"EPSON 行書体M";}
-->
</STYLE>
3. 上記で、文章中の一部の文字の大きさを変える場合、
.pt14 {font-size:14pt ;}
.pt18 {font-size:18pt ;}
などと、記載しておく。
4. 必要な箇所に、<P CLASS="pt14">・・・</P>で挿入する。









010大画面表示の方法ーその1・・・戻る
1. 花博大画面の一部を示す。ここから、固有の画像だけを変更すればよい。
2. 追加する画像やソフトは、同一ディレクトリー内に置く。
・main-mf2.js ・sub-mf2.htm ・mt-img2.jpg ・mt-img.gif
・back2.gif ・next2.gif ・blank.gif ・close.gif
2. <HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="imagetoolbar" content="no">
<META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900">
<TITLE>花博:全画面表示</TITLE>
</HEAD>
<DIV style="width : 660px;height : 480px;top : 2px;left : 2px;
position : absolute;
z-index : 1;
visibility : visible;
" id="Layer4" align="center">

<SCRIPT language="JavaScript" src="main-mf2.js"></SCRIPT>
<SCRIPT language="JavaScript">
subfile = "sub-mf2.htm"
fdat = new Array(

// *** 写真データ部 ***
// 連番数字 , "写真ファイル名" , "コメント" ,

1 , "hanahaku/haku01" , "浜名湖花博〜タワーから展望- 1/20-" ,
2 , "hanahaku/haku02" , "浜名湖花博〜タワーから展望- 2/20-" ,
3 , "hanahaku/haku03" , "国際庭園〜タワーから展望- 3/20-" ,
4 , "hanahaku/haku04" , "モネの家と庭- 4/20-" ,
5 , "hanahaku/haku05" , "モネの睡蓮の池- 5/20-" ,
6 , "hanahaku/haku06" , "睡蓮の池- 6/20-" ,
7 , "hanahaku/haku07" , "ジェラシックツリー- 7/20-" ,
8 , "hanahaku/haku08" , "アマリリス- 8/20-" ,
9 , "hanahaku/haku09" , "アマリリス- 9/20-" ,
10 , "hanahaku/haku10" , "アマリリス- 10/20-" ,
11 , "hanahaku/haku11" , "百華園- 11/20-" ,
12 , "hanahaku/haku12" , "青いバラ〜青龍 12/20-" ,
13 , "hanahaku/haku13" , "青いバラ- 13/20-" ,
14 , "hanahaku/haku14" , "バオバブ- 14/20-" ,
15 , "hanahaku/haku15" , "オオゴマダラチョウ- 15/20-" ,
16 , "hanahaku/haku16" , "オオゴマダラチョウ- 16/20-" ,
17 , "hanahaku/haku17" , "シャクナゲ- 17/20-" ,
18 , "hanahaku/haku18" , "見事な盆栽- 18/20-" ,
19 , "hanahaku/haku19" , "見事な盆栽- 19/20-" ,
20 , "hanahaku/haku20" , "花の丘- 20/20-" ,


// ファイル名に .jpg をつけない。 ホルダー名を含めて書く jpg は小文字
// 連番は 1 からの連続した半角数字
// , や " は省略不可 コメントは無い場合 "" と書く


// *** 表示設定部 ***

2 , // 表示モード ( )内は最大写真サイズ
// 1.推奨 (640x480) 2.大判 (800x600) 3.限定 (640x480)
// 4.フレーム無し (1024x730) 5.画像フレーム (800x600)

2 , // 1.フレーム幅(sub-mf2.htm 設定) 10 以上はフレームの全体の幅
2 , // 操作ボタン 1.文字 2.アイコン
1 , // コメント位置 0.表示しない 1.写真の下 2.フレーム外 3.フレーム上
1 , // フレーム縦幅補正 横長写真用

30 , // ボタン位置 上下
550 , // ボタン位置 左右

"mt-img2.jpg" , // マット画像 使わない場合は ""
"#dddddd" , // マットの色 マット画像が優先表示
"#cccc00" , // コメント文字色
"#eeeeee" , // ボタン文字色

4 , // コメントの文字サイズ
"#777777" , // フレーム外側の線色
"#07560c" , // フレーム本体部の色
"#cccc00" , // フレーム内側の色
"#ffffff" , // 写真周囲の背景色
10 , // 写真周囲の背景幅

0) // Windowsアイコン

Photo_datas()
</SCRIPT>
</HEAD>


<BODY background="" bgcolor="#0e4712" text="#222222" link="#222222" alink="#222222" vlink="#003333">

<DIV style="width : 35px;height : 16px;top : 2px;left : 610px;
position : absolute;
z-index : 2;
visibility : visible;
" id="Layer1"><bgsound src="zbgm.mid" loop="INFINITE"><A href="http://www.geocities.co.jp/Outdoors-Marine/5510/5tenran/2hakuran/hanahaku.htm" target="_self"><IMG src="http://www.infoseek.livedoor.com/~masashi_taka/bannar/sozai/back/back04.gif" width="35" height="16" border="0"></A></DIV>
<CENTER>

<!-- *** リンク部 *** -->
<DIV style="width : 660px;height : 150px;top : 0px;left : 2px;
position : absolute;
z-index : 2;
visibility : visible;
" id="Layer4">
<TABLE cellpadding="10" cellspacing="0" border="1" bgcolor="#0e4712">
<TBODY>
<TR>
<TD>
<TABLE cellpadding="1" cellspacing="0" border="0" bgcolor="#cccccc">
<TBODY>
<TR>
<TD><A href="javascript:fuldsp(1)">
<IMG src="hanahaku/haku01.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(2)">
<IMG src="hanahaku/haku02.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(3)">
<IMG src="hanahaku/haku03.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(4)">
<IMG src="hanahaku/haku04.jpg" width=128 height=96 border=0></A></TD>
</TR>

<TR>
<TD><A href="javascript:fuldsp(5)">
<IMG src="hanahaku/haku05.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(6)">
<IMG src="hanahaku/haku06.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(7)">
<IMG src="hanahaku/haku07.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(8)">
<IMG src="hanahaku/haku08.jpg" width=128 height=96 border=0></A></TD>
</TR>

<TR>
<TD><A href="javascript:fuldsp(9)">
<IMG src="hanahaku/haku09.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(10)">
<IMG src="hanahaku/haku10.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(11)">
<IMG src="hanahaku/haku11.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(12)">
<IMG src="hanahaku/haku12.jpg" width=128 height=96 border=0></A></TD>
</TR>

<TR>
<TD><A href="javascript:fuldsp(13)">
<IMG src="hanahaku/haku13.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(14)">
<IMG src="hanahaku/haku14.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(15)">
<IMG src="hanahaku/haku15.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(16)">
<IMG src="hanahaku/haku16.jpg" width=128 height=96 border=0></A></TD>
</TR>

<TR>
<TD><A href="javascript:fuldsp(17)">
<IMG src="hanahaku/haku17.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(18)">
<IMG src="hanahaku/haku18.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(19)">
<IMG src="hanahaku/haku19.jpg" width=128 height=96 border=0></A></TD>

<TD><A href="javascript:fuldsp(20)">
<IMG src="hanahaku/haku20.jpg" width=128 height=96 border=0></A></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>

<BR>

<!-- 操作説明表示 -->
<TABLE bgcolor="#eeeeee" cellpadding="10">
<SCRIPT language="JavaScript">DspMsg2('close')</script>
</TABLE>

<br>
</DIV>

<BR><BR><BR><BR><BR>
</CENTER>
</BODY>
</HTML>
3.