このホームページのつくりかた

トップページ 雑文・etc館

このホームページの作成に使った方法とか、作成のとちゅうで気づいたことなど、連載していきます。

このページ内の目次
HP作成に使ったソフト アップロード方法 参考にした資料 他のページへのリンク
背景画像について 行間について 左右の余白について サブディレクトリ

2005年5月31日 「行間について」更新しました。


  ホームページ作成に使ったソフトについて  2001年4月9日UP

・まず、このホームページ作成に使ったソフトですが、ウインドウズ付録の「フロントページエクスプレス」です。あまり画像など使わない方針なので、市販ソフトでウリにしている高度な機能などは必要ないだろうと思い、タダで使えるのにしました。

・フロントページエクスプレスは、うちのだけなのか、共通の欠点なのかはわかりませんが、作成途中で表示が崩れることがよくあります。でも、プラウザ(IE)で読み込んだときには、ちゃんと表示されています。市販ソフトの基本的な機能との比較はやったことがないので、わかりませんが、思ったよりわかりやすくて、けっこう自由もききます。


  アップロード方法について  2001年4月25日UP

・アップロードには、ファイルマネージャーを利用しています。じつは、これがあるのでジオシティーズにしたようなものです。FTPは難しそうだしな〜〜と二の足を踏んでいたとき、FTPなしでウェブ上からアップロードできると教えてくれた人がいましたので。

・ファイルマネージャーで、この先心配なのが、ファイルが増えるとややこしくならないかという点ですが……。更新したところだけアップロードできる市販ソフトを買ったほうがよかったのではないかという気がしないではありませんが……。なるべくファイル名にわかりやすい名前をつけて、あまりためこまずに、ちまちまアップロードすれば、なんとかなるんじゃないかと思っています。ページ数はかなり増えましたが、幸い、今のところ、ややこしくなってはいません。


  参考にした資料  2001年5月16日UP

・このホームページをつくるにあたっては、雑誌の「ぱそ」、林知波氏の「FrontPageExpress はじめてのホームページ」(技術評論社)をおもに参考にしました。

・じつは、パソコンを買ってすぐ、これらの本を買ってきたときには、「どひゃ〜、むずかしそう〜」と思って投げだしたんですよね。冬さんが初心者用ツールを使えるところでホームページをつくるっていうので、まかしちゃえと思ったこともありまして……。でも、改めて再挑戦することになって、つくりながら読んでみると、理解できました。本だけ読むと、HTMLタグとか、どうしても、実際以上にむずかしそうに見えてしまうんですね。つくりながらのほうがわかりやすいです。

・上記の資料のほか、パラパラ立ち読みした本もいくつかあります。林氏の本とはOSのバージョンが違うので、本に書いてあるPWSってのを使うのが不安だったんです。で、立ち読みした本を参考に、つくったページをアップ前にプラウザで確認するのには、IEを用いています。ウインドウズ98SEでは、ファイルをダブルクリックすれば、IEで開いて確認できます。他のパージョンの場合はわかりませんが。


  他のページへのリンク  2001年6月13日UP

・ごらんのように、このホームページでは、他のページへのリンクは、ほとんどがテーブル(表)を用いています。ボタンみたいなデザインはかっこいいけど、画像を使うと重くなるし、サーバーが混んでいたりして画像を読みそこねたとき、リンクできなくなると思い、テーブルを用いることにしました。

・リンクの位置は、上のほうにあるページと、いちばん下に設けてあるページがあります。はじめは、全部下で統一しようと思ったんですが、小説などは、自分の場合、あとで、「履歴」や「お気に入り」などから呼び出して、オフラインで読むことにしていまして、そういう人が多いんじゃないかと思ったんです。そうすると、上にリンクがあったほうが、他のページにジャンプしやすいですからね。一方、目次ページなどは、ページのとちゅうからジャンプしますから、ジャンプしたいページがなくて他の館やトップページにいきたいというとき、いちばん下にあったほうがいいかな〜っと思いまして。自分の読み方を基準に、使い勝手がいいように考えたつもりですが、他の方はどうなんでしょ?


  背景画像について   2001年7月6日UP

・トップページなどに用いている背景の画像は、ウインドウズ付属のペイントを使って、自分でつくったものです。フリー素材を使おうかとも思ったのですが、ペイントで素人がつくったかんたんな画像でも、連続模様にしたとき、けっこうさまになるんじゃないかと思いましてね。

・この画像は、地の色を塗りつぶしたあと、スプレーで何色かの色を吹きつけ、最後に地の色と同色でスプレーしました。雑誌(たぶん「Paso」じゃなかったかな)をパラパラ立ち読みしたとき、なんとなく記憶に残ったのをヒントに、適当につくりました。はじめは、ブラックオパールのイメージでつくろうとして、もっとハデだったんですけど、文字が読みづらかったので、濃い色だけを用いてつくりなおしました。


  行間について  2001年9月29日UP  2005年5月31日補足

・はじめ、小説をアップしたとき、行間が詰まって読みづらかったので、スタイルシートを使って行間をあけることにしました。「埋め込みスタイルシート」というのを使っています。

・スタイルシートは、フロントページエクスプレスでは使えないので、ツールバーの「表示」の「HTML(H)」からHTMLタグの画面を呼び出して、タグを打ちました。参考にしたのは、「FrontPageExpress はじめてのホームページ」の200ページ「埋め込みスタイルシートを利用する」と、247ページ「スタイルシートで定義できるスタイル」です。この本ではなくても、フロントページエクスプレスについての本やHTMLタグについての本には載っているみたいです。

・お使いのプラウザでこのホームページをソースを見て、ヘッダ部の最後の3行(styleタグとそれにはさまれている部分)をご自分のホームページのHTMLタグ画面にはりつけても、行間があけられます(たぶん)。うちのより数字を小さくすれば行間がこれより狭く、数字を大きくすれば行間が広くなります。ただし、ご自分の責任でおこなってください。失敗しても、当方でフォローはできません。これで、たぶんだいじょうぶだろうとは思いますが、なにぶんにも、わたしもほとんど初心者なので。

・毎回このタグを打つのはめんどうだし、まちがえそうなので、ひながたをつくって、それを呼び出して、別のファイルとして保存して使うという方法をとっています。ちなみに、ひながたには、トップページなどに戻るためのリンクに使うテーブルも入れています。

補足
・最初につくったときのタグでは、IE6に反映されないとわかりました。申しわけありません。
 いまはちゃんと反映される正しいタグに直しています。
 ただし、小説ページには、インデントを用いて左右をあけた部分だけスタイルシートが反映されるようにしてしまったのもありますので、全体的に行間をあけるには、このページのHTML画面でヘッダ部の最後の3行(styleタグとそれにはさまれている部分)をお使いください。


  左右の余白について   2001年10月26日UP

・はじめ、左右の余白は、フロントページエクスプレスの「書式」の「背景」で変更できる左余白だけ、それも、ほんのちょっとだけ入れていました。

・でも、それでは読みにくいので、HTMLタグを使って、左右に余白を入れました。じつは、右に余白を入れるタグを、そのときには知らなかったんですが、左余白の「left」の部分を「right」に替えて入れればいいんじゃないかと思いまして、試してみたのです。正解でした。乱暴なことをしたものですね。

・ただ、この方法だと、水平線も左右に余白があくんですね。文字だけたっぷりの余白を空けて、水平線は端から端までにしたかったので……。インデントでやってみたら、思うようになったので、それからインデントを多用しています。フロントページエクスプレスだと「インデント」になっているのに、タグの一覧表だと「引用」によっているので、迷ったんですけど、やりたいレイアウトのとおりになったんだから、ま、いいかと。うちのパソコンだといいぐあいに見えていますが、他のプラウザをお使いの方はどうなんでしょう?


  サブディレクトリについて   2001年11月13日UP

・このホームページは、はじめ、サブディレクトリをつくらず、メインディレクトリに全部のファイルを入れていました。でも、ファイルが増えてきたので、この秋からサブディレクトリをつくり、一部のページを移しています。あまり増えすぎると、今度は移すのがたいへんになるので、いまのうちにと思いまして……。

・サブディレクトリの作り方は、はじめわからなかったんです。ジオシティーズの助け合い広場で探しても、サブディレクトリに関するものは見あたらないし。投稿して聞こうかなとも思ったんですが、そのときには、まだそれほどファイルも増えていなかったので、ぎりぎり、使いにくくなってからでもいいかなと思って、あとまわしにしていました。

・で、9月になって、『YAHOO! ジオシティーズ 公式ガイド2001』を、通りすがりの書店で見つけましてね。すでにホームページをつくってあるんだから、必要ないかと思いながら、パラパラ立ち読みしたところ、ファイルマネージャーでのサブディレクトリの作り方について載っていましたので、購入しました。「新規ディレクトリの作成」をクリックすれば、必要なボタンがあとからできるんだったんですね。

・サブディレクトリをつくるにあたって、最初、いったんメインディレクトリにアップロードしてから移さなければならないのかと思っていましたが、つくってみれば、サブディレクトリ名をクリックすれば、直接アップロードできるとわかりました。これで、ファイルが増えても管理がラクになって安心です。

・ファイルがたくさんになる予定の方は、最初からサブディレクトリをつくっておくことをおすすめします。


  終わりに

・書きたいことはいちおう書きましたので、このコンテンツはここで終了いたします。

・作成方法を変えたときに気が向いたら、また新バージョンでこのコンテンツを再開するかもしれません。


上へ