SoundHorizon新盤 「Elysion~楽園幻想物語組曲~」
SoundHorizon新盤 「Elysion~楽園幻想物語組曲~」
発売日は4月13日。Sound HorizonのHPでは、一部収録曲の情報が。
Info
- 投稿日
- 2005年3月2日
- このエントリの固定リンク
- http://bmky.net/diary/log/780.html
- ブックマークに追加する
-
- コメント
- コメントを投稿する
2005
0302
目次
Dan! Da! Dan!の海外での反応
フォーラムでは、ラストの脱出シーン突入法がわからんって意見がちらほらと。俺もさーーーっぱりわからん。んで、たまたま残機0で遭遇して死にものぐるいでがんばったら
あと3M・・・
Info
- 投稿日
- 2005年3月2日
- このエントリの固定リンク
- http://bmky.net/diary/log/778.html
- ブックマークに追加する
-
- コメント
- コメントを投稿する
2005
0302
エンジェリック・ヴェール新伝～エフェメール島綺譚～ 体験版公開
エンジェリック・ヴェール新伝～エフェメール島綺譚～ 体験版公開
4gamerのダウンロードページからダウンロード可能。容量が170M近くあるので注意。
動作環境にビデオメモリ32Mってあるんだが、うちのPCは大丈夫だろうか。
Info
- 投稿日
- 2005年3月2日
- このエントリの固定リンク
- http://bmky.net/diary/log/779.html
- ブックマークに追加する
-
- コメント
- コメントを投稿する
2005
0302
ニュースサイト向けの即席サイト軽量化法 前編
ターゲットは中途半端にCSSを利用しつつ、fontやcenterタグが入り乱れているニュースサイト。構成次第では一般のサイトでも利用可能。
a+font
<p>
<font color="#994400" size="3">[サイト名](http://hoge/)</font><br />
<font color="#994400" size="3">[サイト名](http://hoge/)</font><br />
<font color="#994400" size="3">[サイト名](http://hoge/)</font><br />
...
</p>
サイトのブックマークなんだろうが、このようなタグがずら～～～～～っと並んでいる場合。基本的にfontタグで出来ることはCSSでも可能なのでCSSを利用する。例えばこれなら
a:link {
color : #994400;
font-size : 0.75em;
}
CSSにこう記述するのと同じ意味となる。上の例ならfontタグのサイズ×リンクの数だけHTMLファイルを軽量化できる。特定のリンクだけに適用したいのならクラスを指定すればよい。
<div class="bookmark">
[サイト名](http://hoge/)<br />
[サイト名](http://hoge/)<br />
[サイト名](http://hoge/)<br />
...
</div>
.bookmark a:link {
color : #994400;
font-size : 1.3em;
}
これは、bookmarkというclassが指定されたタグ内のaタグでリンクされたもの全てに適用するという意味。上の例ならdivの中のリンク全てになる。
center
用途が広すぎて例を示せないが、例えばtext-align:centerと指定すれば、その中にあるものは全て中央に寄せられる。問答無用で。
div { text-align : center; }
p { text-align : left; }
<div>
<h2>2005年3月2日</h2>
<p>適当な文字列...</p>
...
...
</div>
この例だとdivの中身は全て中央に寄せられるが、pにはleftを指定しているので、pの中身だけは左寄せとなる。
マーカー
<font color="#ffff00" SIZE="5">★</font>
こーゆーのを文字列の頭とかに持ってきてるサイト。★じゃなくて■だったり□だったりするパターンもある。要は色とサイズを指定できればよいので、文字数の少ないタグで代用する。
em {
color : #ffff00;
font-size : 1.5em;
font-style : normal;
}
<em>★</em>
たったこれだけでfontタグを一切使わず、且つスマートにマーカーを表示できた。font-styleを指定しているのは、emはデフォルトでfont-style:italicとなっているので、それを打ち消すため。
背景画像を利用することでも軽量化することができるが、即席ではなくなるので割愛。
target=”_blank”
ほぼ全てのリンクにtarget=”_blank”があるサイト。いっそのことbaseタグで一括指定してみてはどうか？ head内に以下のように記述するだけだ。
<base target="_blank" />
これで全てのリンクが新しいウインドウで開かれるようになる。個別に指定すればそちらが優先になるので、サイト内リンクにはtargetに_selfを指定すればよい。
[Link](link.html)
<br><br><br><br><br><br>…
行間が欲しい為だけにbrを連打。非常に無駄だ。これはhrタグで置き換えることができる。普通にhrを置いただけでは横線が出るだけなので
hr {
margin : 2em 0;
color : #fff;
border : 0;
}
こうすることで、hrの上下に2文字分のスペースを作りながら、横線を非表示にすることができる。colorは背景と同じ色にすること。こうすることでIEでは横線を非表示にできる。ただしFireFoxでは意味が無いのでborderを0にすることで、FireFoxなどで横線を非表示にすることができる。
CSSは外部ファイルに
<style type="text/css"><!--
body { ...
--></style>
ってな形でHTMLに書いているサイトが多いが、とてつもなく無駄なので、以下のようにhead内に記述することで軽量化を図ることができる。
<link rel="StyleSheet" type="text/css" href="style.css" />
こうする理由はブラウザのキャッシュ機能が働くからだ。IEだろうがFireFoxだろうが、一度アクセスしたファイルはHDDのtempフォルダに保存され、再アクセスした際に更新されていなかったなら同じファイルをtempフォルダから拾ってくる。
例えば複数ページで同じスタイルを利用している場合。HTML部分に直接記述しているサイトは、ページを移動するたびにスタイル部分を含んだHTMLページを読み込むが、あらかじめ外部ファイルにしておけば、最初にスタイルが記述されたCSSを読み込んで、以降はスタイル部分を省いたHTMLを読み込むだけで済む。つまり、ページ移動数×CSSファイルサイズだけ計量化したことになる。
CSSファイルを外部ファイルにして複数のHTMLから呼び出すということは、CSSファイルを変更すれば全てのHTMLに反映されるということだ。これを知らない人は、サイトデザインを変える為に全てのHTMLファイルに手を加えるハメになる。よっぽどの暇人且つマゾでないなら外部ファイルを積極的に利用しよう。
なお、これらはJavaScriptにも言える。こちらも外部ファイルにしよう。
どれぐらい効果があるのか？
色々とHTMLを軽量化をする方法を紹介したが、それらは実際にどれぐらい効果があるのか？ と思う人も少なからずいると思われるので、とあるサイト3つを利用して実験してみた。
| 軽量化前 | 軽量化後 | 減少量 | |
|---|---|---|---|
| サイトA | 86,148 | 73,728 | 12,420 |
| サイトB | 116,564 | 98,304 | 18,260 |
| サイトC | 68,120 | 58,551 | 9,569 |
数値の単位はバイト。大体10KBから20KB前後の軽量化に成功しているが、サイトの構成によりけりなので必ずしもこうなるとは断言できない。しかし、効果があることは確かだ。
次は実践方法
結局はスタイルに置き換えられる部分をスタイルに置き換えていっただけだ。そして、これをひたすら積み重ねていくことで、軽量化・最適化されたサイトに仕上がるだろう。
とりあえず前編はここまで。中編では実際にどうやってこれらを書き換えるかを説明していく。さすがにテキストエディタで一つ一つ手直しは億劫になるので、こういった作業を劇的に楽にしてくれるソフトウェアの紹介と使い方を。
Info
- 投稿日
- 2005年3月2日
- このエントリの固定リンク
- http://bmky.net/diary/log/776.html
- ブックマークに追加する
-
- コメント
- コメントを投稿する
2005
0302
IEのリンクで新しいウィンドウを抑止する「New2Fwd」
ついに出たか。未だにサイト内のリンクアンカーをどうするかで非常に迷ってるんだが。基本は外部サイトなら新しいウインドウ、そうでないなら同じウインドウなんだが、一般的にはどっちの閲覧者が多いかわからないのが問題なんだよなぁ。
一応JavaScriptを使用すれば、閲覧者が自由に設定できるので、それを設置してもいーかなーなんて思ってるんだが。あまりJavaScript増やしたくないというのが正直なところ。うーむ。
Info
- 投稿日
- 2005年3月1日
- このエントリの固定リンク
- http://bmky.net/diary/log/773.html
- ブックマークに追加する
-
- コメント
- コメントを投稿する
2005
0301
