ホームページを作る~サイトの作成編その2

ある程度のページができたら、今度はデザインを工夫してみましょう!

 素材を利用する

p005lis例えばこのリストマーク。こういうのを素材と呼んでます。
ホームページビルダーにはいろいろな素材がついています。
が、検索するとフリーのかわいい素材がたくさんでてきます。

ダウンロードの仕方はとっても簡単!
使いたい素材の上で右クリック-名前をつけて画像を保存をクリックして好きなフォルダーに保存。これでOK。 ただし、中にはファイルの種類というところがgifやjpegではなく、ビットマップ(bmp)と出てくる場合があります。
最初私もこれで苦労しました。
なぜかというと、ビットマップではファイルの容量が大きかったり、webページに使えなかったりします。

ではどうしたらよいのか? 一度できるようになると簡単です。

インターネットエクスプローラーの[ツール]-[インターネットオプション]をクリックします。
[全般]タブを選び、インターネット一時ファイルのファイルの削除ボタンをクリック!
多少時間がかかりますが、これで今まで見てきたウェブページの情報が削除されます。
欲しい素材やさんのページ等はあらかじめお気に入りフォルダに入れておきましょう。

次に履歴というところの履歴のクリアボタンをクリックします。 これでOK。

もう一度欲しい素材の上で上記の作業を行い、うまくgifやjpegで保存できれば成功です。 できない場合は別のページか素材で同じ作業を行ってみます。
そちらがうまく行けば、また戻ってやってみるとできるはずです。
それでもできない場合は、もう一度履歴のクリアを行ってみましょう。

※素材やさんの中にはフリーだけれど、リンク(リンクウェアとあるサイト)や報告が必要な場合もありますので必ず規約をよく読んで利用されてくださいね!

 スタイルシートを利用する

スタイルシートに関してはまだ私もよくわかってない部分が多いです。 けど簡単にできることもあるので、少しご紹介をしておきます。

  ホームページ・ビルダー  の場合

スタイルシートマネージャーというツールがあります。 例えば↑の見出しは見出し4:H4という属性を選んでいます。 右クリックで属性の変更をしたあと、スタイルの設定を選びます。
すると、まずページ全体に適用するのか、その部分だけに適用するのか 選ぶことができます。
どちらか選ぶと、今度は文字やレイアウトの詳細が出てきますので好きなスタイルを選んで設定します。
こういう枠や背景などもつけることができます。

 タグで指定する

このページのソースを見てみてください。(右クリック-ソースの表示) するとこういう部分が出てくると思います。 これがスタイルシートです。

<style type=”text/css” media=”screen”>body{position:relative}#dynamic-to-top{display:

中略

dynamic-to-top span{display:block;overflow:hidden;width:14px;height:12px;background:url(  )no-repeat center center}</style>

<HEAD></HEAD>の間にはさんで使います。

【参考】

  • CSSmaker        スタイルシート作成ツールです。

 外部リンクする

同じスタイルシートですべてのサイトを構成するなら外部リンクが便利です。
メモ帳などで例えばexample.cssなどという名前で保存させて使います。

それから(例)<link rel="stylesheet" href=”example.css” type=”text/css”  /> というタグを各ページ<HEAD></HEAD>内に埋め込んで使います。

いろいろできるようになると、例えばCGIやブログのカスタマイズなどが自由に行えたりして楽しいですよ。
そこまでいくのが難しいんですけどね。。。ヽ(´Д`;)ノ