個人の趣味でホームページを開いている者ですが、
TOPのリンク先(掲示板・プロフィール等)が増えるにつれ
アイコンなどが表示されるのに時間がかかるようになってきました。
そこで、一括して(1つのファイルで)アイコンを呼び出すことができればやってみたいのですが、
そのようなことは出来るのでしょうか?
また、その他にも、軽くするアドバイスがあれば
教えて欲しいです。
よろしくお願いしますm(._.*)mペコッ

このQ&Aに関連する最新のQ&A

A 回答 (5件)

No.2のgakushanekoです。


言葉が足りなくて申し訳ないです。

> 新たに「img」というフォルダをサーバーに作り、そこに画像等をUPするということでしょうか?
ハイ。そのように理解してください。
でも,ハードディスク上(パソコン内)のサイトも一緒の構成にした方が管理しやすいはずですから,そっちにも作ったほうが良いかも・・・。

あと,そのようにしたときの画像ファイルの指定方法ですが,相対パスがわかるのでしたらそれでも良いですが,わからないうちは絶対パス(「http://」から始まる(画像)ファイルのアドレスのことです)で指定してください。
少し(かなり?),面倒かもしれませんが,絶対パスを使えば間違いは無いはずです。

それと,ページを早く表示させる方法として,大きな画像ファイルは「サムネール画像」を作り,ページ全体を軽くしてあげると言う方法があります。
大きな画像はどうしてもファイルサイズも大きくなりがちですから・・・。
画像をクリックすると大きなものを表示させるようにすれば,あまり問題が無いと思いますよ。
もっとも,これはトップページには使いにくい手ですが・・・。
また,アニメーションGIFを多用しているとページが重くなってきます。ご注意してください。

また,black-be5さんが書かれている「イメージマップ」ですが,四角などでしたらあまり問題なく作成出来ますが,複雑な形(例えば市町村の行政境界線など)をなぞる場合は複雑になりすぎます。
そう言うときは,参考URLのアプリケーションで支援してもらうと良いですよ。

それから,テーブルの中にテーブルを入れているとかしていませんか?
テーブルの数が少ない場合はあまり問題にならないのですが,数が多くなったり,テーブルが広くなったりすると,読み込みに時間がかかるようになります。
整理すると良いかもしれませんね。

<TABLE border="1"><TBODY><TR><TD>
<TABLE border="1"><TBODY><TR><TD>table0</TD></TR><TR><TD>table1</TD></TR></TBODY></TABLE>
</TD><TD>table2</TD></TR><TR><TD>table3</TD><TD>
<TABLE border="1"><TBODY><TR><TD>table4</TD><TD>
<TABLE border="1"><TBODY><TR><TD>table5</TD></TR><TR><TD>table6</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

とするより

<TABLE border="1"><TBODY>
<TR><TD>table0</TD><TD rowspan="2" colspan="2">table2</TD></TR>
<TR><TD>table1</TD></TR>
<TR><TD rowspan="2">table3</TD><TD rowspan="2">table4</TD><TD>table5</TD></TR>
<TR><TD>table6</TD></TR></TBODY></TABLE>

の方が早くなりそうだと思いませんか?
わかりやすいように枠を表示させていますが,<TABLE border="1">を<TABLE border="0">としてみてください。
デザインはまったく変わらなくなってしまいますよ。

上のテーブルの例もそうですが,あとは「チリも積もれば山となる」方式で<FONT>で「書体」を指定しないとか・・・。

本当は実際にそのページを見せてもらえると何が原因なのか,回答者側もわかりやすいんですが・・・それをするとここの規定に違反しちゃうんですよねぇ・・・。

参考URL:http://www.vector.co.jp/soft/win95/net/se104052. …
    • good
    • 0
この回答へのお礼

解かりやすい説明をありがとうございました。
先ずはフォルダを作り、今の自分には”絶対パス”しか理解できていないので、
取り合えずそちらでやってみます。
あと仰られてるとおりの事がちらほら・・・・・
テーブル&やたらと多い<FONT>などなど、
これから1つ1つ解決していきたいと思います。
ホントにありがとうございました。
画像の方も、みなさんに教えていただいたソフトなどで
手直ししていきたいと思います。

最後に、
自分のHPのURLを載せると”規約違反”になるんですね。
危うく載せるところでした(苦笑)
先に教えていただいておいて助かりました('-'*)エヘ
ありがとうございましたm(._.*)mペコッ

お礼日時:2002/04/05 13:05

ボタン等、動くgifを使ってれば無理ですが、


単に画像gifの場合は、png等に変換すれば小さくなる場合も?

画像ファイル変換ソフト(画質変換?)『Gcon』
ドラッグ&ドロップだけで、複数形式の画像ファイルをまとめて変換
http://www.vector.co.jp/soft/win95/art/se185748. …

PIG変換するだけなら、『BMP-JPGこんばーちゃ』が良いかも
BMPからJPG、JPGからBMPに変換できるソフト シンプルだから使いやすい!
http://www.vector.co.jp/soft/win95/art/se128027. …
両方使ってみると違いが解ります。


jpgの画質のを落として容量を小さくするなら『iJPEGComp』
画像の劣化を確認しながら圧縮率を変更、拡大比較可能なJPEG保存ソフトウェア
http://www.vector.co.jp/soft/win95/art/se187567. …


No.3の回答者、black-be5さんが答えてるのは、
マップイメージだと思いますが、こんなのはどうでしょうか?
少しは楽になるかも?

『Client-Side Image Map Maker』
クライアントサイドイメージマップ用のHTMLのタグを作成
http://www.vector.co.jp/soft/win95/net/se104052. …

『Client Side Image Map Editor』
クライアントサイド・イメージマップという機能を簡単にこなせ
http://www.vector.co.jp/soft/win95/net/se062427. …

等々、いろんなソフトがあります、使い方もいろいろとf(^_^)


          X1turboの友達 hiro。
    • good
    • 0
この回答へのお礼

いろんなソフトがあるんですね。
PCはそこそこ長くやっているんですが、
これがHPのこととなると
全くの初心者でσ(^^)・・・(汗)
ご紹介いただいたソフトを今からDLしてみたいと思います。
別に抱えてた問題も解決できそうです(苦笑)

みなさんに親切に教えていただき
ホントに助かりました。
「okwebって便利な所」と言うと御幣があるかもしれませんが、
初心者の自分にはとても役に立ちます。
これからもよろしくお願いします。m(._.*)mペコッ

お礼日時:2002/04/05 13:10

私はよくイメージの中にリンクを埋め込んでいます。

タグで言うと<map>です。
これで一ページあたりに表示されるイメージ数を減らしています。
(yahoo!のトップイメージにも使われています。)

また、回答にもありましたがイメージの解像度を落としてみたりしています。
    • good
    • 0
この回答へのお礼

<map> (;^_^A アセアセ・・・
使ったことのないタグです。
早速、そのタグについて勉強してみます。
アドバイスありがとうございました。

black-be5さんのスペースを使って申し訳ありませんが、
早速HPの編集・タグの勉強をしたいと思いますので、
この後のレスが遅れるかもしれません。
よろしくお願いします。

お礼日時:2002/04/04 18:24

ページの表示に時間がかかる原因のひとつとして,インターネット一時ファイルが増えすぎてしまっていることがあげられます。


これを一度お掃除してみてください。
お掃除後,最初はさらに遅くなりますが,次からは速くなると思います。

それはもうやったと言うのであれば,今度は,あちこちに散らばっている画像ファイルを「img」などと言うフォルダを作り,そこに入れて一元管理します。
もちろん,「次へ」や「戻る」などのアイコンは同じ物を使うようにします。
そうすることで少しは早くなると思います。

この回答への補足

>「img」などというフォルダを作り・・・
新たに「img」というフォルダをサーバーに作り、
そこに画像等をUPするということでしょうか?

補足日時:2002/04/04 13:03
    • good
    • 0

アイコンを一括して表示させるというアイディアは


思いつきません。ごめんなさい。

おそらく、HTMLファイル自体はそう重くなるという
ことはないと思います。ですので、まずアイコンの
容量を抑えることを考えてみてください。

例えば、アイコンのファイル形式を変えてみるとか
ファイルを軽くしてくれるソフトを使ってみるとか
いろいろ考えられます。

よく一つのページの容量はだいたいで50KBまでにした
方がいい。などとよく言われています。

検索サイトなどで「画像・軽量化」などのキーワード
で検索してみると参考になるサイトがたくさん見つかり
ますよ。参考までに。。

参考URL:http://www.nagasaki-city.ed.jp/fukahori-e/hp_kou …
    • good
    • 0
この回答へのお礼

アドバイスありがとうございました。
参考URLとともに、
1ページ50KBにも心掛けるページ作りをしてみます。
現在・・・1ページが70K~100くらいです(汗)

お礼日時:2002/04/04 13:00

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q_top:100とtop:100の違いは何でしょう

CSS勉強中なのですが、画像の配置などで使われている、「top:100;」はマージン100pxの事だと思うのですが、「_top:100」は何が違うでしょうか?

どうぞよろしくお願いいたしますm(__)m

Aベストアンサー

ことだと思うのですが・・・ではありますが、いずれも、文法的には誤った記述です。
top:100pxと書かなければなりません。
【引用】____________ここから
長さの値(<length>で示す)は、任意の正負符号(デフォルトはプラス)の後に、<number>(小数点以下は任意)と単位識別子(例:'px'、'deg')が続く形式である。 長さが'0'なら単位識別子は省略できる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#length-units )]より
【引用】____________ここから
The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Syntax and basic data types( http://www.w3.org/TR/CSS2/syndata.html#length-units )]より
 後ろの英文は、CSS2.1のものです。微妙にCSS2から変更されています。

 簡単に言うと、0のときのみ単位が省略できる。
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 また、_top:は本来は無効であるべきなのですが、IE6は、これをtop:として解釈するバグがあります。それを利用して、IE6用にスタイルを記述しなおすことがかって行われていましたが、IE自体、マイクロソフトが抹殺キャンペーンをしているブラウザで、現在は対処する必要はないでしょう。

 よって、勉強中でしたら、一切覚える必要のないプロパティとその値の書き方です。

 そんなプロパティの細かいことより、重要なカスケーディングを勉強しましょう。カスケーディングスタイルシートとことわるくらい、もっともっと大事なことです。
5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )

ことだと思うのですが・・・ではありますが、いずれも、文法的には誤った記述です。
top:100pxと書かなければなりません。
【引用】____________ここから
長さの値(<length>で示す)は、任意の正負符号(デフォルトはプラス)の後に、<number>(小数点以下は任意)と単位識別子(例:'px'、'deg')が続く形式である。 長さが'0'なら単位識別子は省略できる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#length-u...続きを読む

Qcssで『top』ではなく『_top』とアンダーバーが付いているのは何ですか?

formのcssレイアウトの参考にいろいろ検索していたんですが、
その中で『_top』というプロパティを使用している例がありました。
初めて見たので自分で調べてみたのですが、わかりませんでした。
これはどのように使うものなのですか?
当方初心者なので基本的な事でしたら申し訳ありません。

ちなみにこちらのサイトに以上の事が出ていますが、内容を貼り付けておきます。
URL:http://hatenachips.blog34.fc2.com/blog-entry-206.html
【内容】
<form name="searchform2" id="searchform2" action="./" method="get" value="" maxlength="200">
<p class="plugin-search">
<input type="text" name="q" id="keywords2" onfocus="if (this.value == 'Keyword(s)') this.value = '';" onblur="if (this.value == '') this.value = 'Keyword(s)';" value="Keyword(s)"/ >
<input type="image" src="http://blog-imgs-29-origin.fc2.com/h/a/t/hatenachips/btn2.gif" alt="hatena chips 内の検索" name="searchBtn2" id="searchBtn2" />
</p>
</form>

*****************

#searchform2 {
position: relative;
}
#keywords2 {
width: 182px;
height: 16px;
background-color: #666;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #888;
border-right: 1px solid #888;
padding: 4px;
color: #ddd;
}
#searchBtn2 {
position: absolute;
top: 0;
_top: 1px;  ←――――――――これです!!――――――――
left: 190px;
background-color: #666;
border-top: 1px solid #000;
border-left: none;
border-bottom: 1px solid #888;
border-right: 1px solid #888;
}
*:first-child + html #searchBtn2 {
top: 1px;
}

formのcssレイアウトの参考にいろいろ検索していたんですが、
その中で『_top』というプロパティを使用している例がありました。
初めて見たので自分で調べてみたのですが、わかりませんでした。
これはどのように使うものなのですか?
当方初心者なので基本的な事でしたら申し訳ありません。

ちなみにこちらのサイトに以上の事が出ていますが、内容を貼り付けておきます。
URL:http://hatenachips.blog34.fc2.com/blog-entry-206.html
【内容】
<form name="searchform2" id="searchform2" action="./"...続きを読む

Aベストアンサー

それは「アンダースコアハック」といって、「属性名として無効だ
から無視されるはずなのに古代のIEがアンダースコアだけ無視して
属性として有効にしちゃうバグ」を使い、古代のIEにだけ他のブラ
ウザと違う指定をする小細工です。

標準準拠になるようマジメにHTMLを書く癖をつけとけば、いまさら
憶える必要があるモノではありません。

QiPhoneのようにアイコンをドラッグするような効果を、htmlに実装

iPhoneのようにアイコンをドラッグするような効果を、htmlに実装することはできますか?
どなたかご存知の方、教えてください。

Aベストアンサー

javascriptを使えば可能です。

javascriptのライブラリのjqueryとjqueryUIを使って実装するのが一番簡単です。(たぶん)

http://d.hatena.ne.jp/hiro_nemu/20091103/1257255710

Qアイコンと文字を並べる時アイコンが上にずれる

アイコンと文字を並べる時アイコンが上にずれる
<img src="images/icon.png" alt="" ><a href="tenken.php">点検</a>
上記のようにアイコンを20×20で作ったら文字より上にずれてしまいます。
何か良い方法はないんでしょうか?

Aベストアンサー

font-sizeはおそらく16pxとか14pxとか、20pxよりは小さいでしょうから、
それだとアイコン画像の上部分がピョコンと出た状態になります。
まず、imgの位置を
img{vertical-align:top;}
として、
line-heihtを20pxに合わせればよござんしょう。

.hoge{
line-height:20px;
}
.hoge img{
vertical-align:top;
}

<p class="hoge">
<img src="images/icon.png" alt="" width="20" height="20"><a href="tenken.php">点検</a>
</p>

もしくは
<span class="hoge">
<img src="images/icon.png" alt="" width="20" height="20"><a href="tenken.php">点検</a>
</span>

とか。


これで文字が縦位置で中央に来るはず。

Q画像の上にマウスがのったときに左上にアイコンが表示させないようにしたい

xpだけなのかわかりませんが、画像がブラウザで表示されているときに、マウスを上に乗っけると画像の左上に保存を促すようなスーツケースと、他にも数個のアイコンが表示されます。
これを表示させないようにすることはhtmlで制御可能でしょうか?

Aベストアンサー

IE6の新機能かな?
<head>~</head>内に
<meta http-equiv = "imagetoolbar" content = "no" >
を入れてみましょう。


このカテゴリの人気Q&Aランキング

おすすめ情報