軽々しくいこう! 7「タグのシェイプアップ(後編)」


タグは各自それぞれの「やり方」があり「賢いやり方」はあるんですが「正しいやり方」はないんですよ。
その為、これはあくまでKRIFF流のやり方であるという事を前提にして下さい。
とりあえず、できるだけ表示を変えないでタグの数を減らすならば、以下の通りになるかと思います。

<center><table border="2" cellpadding="5">
<tr><th><font color="#ffff00">★<a href="kiroku.html"><font color="#ffff00">更新記録</font></a><font color="#ffff00">★</font></th></tr>
<tr><th><font color="#ffff00">★<a href="watashi.html"><font color="#ffff00">私の紹介</font></a><font color="#ffff00">★</font></th></tr>
<tr><th><font color="#ffff00">★<a href="nikki.html"><font color="#ffff00">日記帳</font></a><font color="#ffff00">★</font></th></tr>
<tr><th><font color="#ffff00">★<a href="info.html"><font color="#ffff00">インフォメーション</font></a><font color="#ffff00">★</font></th></tr>
<tr><th><font color="#ffff00">★<a href="e.html"><font color="#ffff00">ギャラリー</font></a><font color="#ffff00">★</font></th></tr>
<tr><th><font color="#ffff00">★<a href="bbs.html"><font color="#ffff00">掲示板</font></a><font color="#ffff00">★</font></th></tr>
<tr><th><font color="#ffff00">★<a href="link.html"><font color="#ffff00">リンク集</font></a><font color="#ffff00">★</font></th></tr>
<tr><th><font color="#ffff00">★<a href="mail.html"><font color="#ffff00">メール</font></a><font color="#ffff00">★</font></th></tr></table></center>
改定後の表↓
更新記録
私の紹介
日記帳
インフォメーション
ギャラリー
掲示板
リンク集
メール


変わった所は<th>タグでしょう。これはセル(表の1つの枠の中)の見出しにする物で、自然に真ん中にきます。同時に太文字になるので「align="center"」<strong>タグが外せます。
それから、大文字だったカラー指定を小文字に変えました。ほとんどのタグは大文字でも小文字でもどちらでも問題なく作動します。小文字の方がデータ量を減らせますので(ほんのわずかですけどね)、オススメ致します。
そしてフォントのカラー指定・解除を微妙に変更。こうしておけば全部同じ色で表示されます。
ここにはリンクがかかっているので、ブラウザの設定によっては「ここにリンクがありますよ」という事を分かりやすくする為に、色を変えて表示するようになるのですが、そういう事にこだわらなければこれも削除可能です(「<tr><th><font color="#ffff00">★<a href="e.html">ギャラリー</a>★</font></th></tr>」となる)。
そのままなら「2052バイト」はある物が、セル内を一行にして「1846バイト」。改定した物は「1195バイト」。更にこだわらないのなら「740バイト」に!!
軽い方が早く表示されるのは当たり前です。表示が同じなら、シンプルな物の方が見やすいし、データも軽いし良い事づくめだと思います。


そして、更にこのタグそのものすべてを一行に表示させようとすると、
改定した物は「1139バイト」。更にこだわらない物は「731バイト」に!!
ここで、一番最初の物と比べてみましょう。
作成ソフトそのままのタグ(2052バイト)
<center>

<table border="2" cellpadding="3">
  <tr>
     <td align="center" width="100%"><font color="#FFFF00"><strong>★</strong></font><a
     href="kiroku.html"><font color="#FFFF00"><strong>更新記録</strong></font></a><font
     color="#FFFF00"><strong>★</strong></font></td>
  </tr>
  <tr>
     <td align="center" width="100%"><font color="#FFFF00"><strong>★</strong></font><a
     href="watashi.html"><font color="#FFFF00"><strong>私の紹介</strong></font></a><font
     color="#FFFF00"><strong>★</strong></font></td>
  </tr>
  <tr>
     <td align="center" width="100%"><font color="#FFFF00"><strong>★</strong></font><a
     href="niki.html"><font color="#FFFF00"><strong>日記帳</strong></font></a><font
     color="#FFFF00"><strong>★</strong></font></td>
  </tr>
  <tr>
     <td align="center" width="100%"><font color="#FFFF00"><strong>★</strong></font><a
     href="info.html"><font color="#FFFF00"><strong>インフォメーション</strong></font></a><font
     color="#FFFF00"><strong>★</strong></font></td>
  </tr>
  <tr>
     <td align="center" width="100%"><font color="#FFFF00"><strong>★</strong></font><a
     href="e.html"><font color="#FFFF00"><strong>ギャラリー</strong></font></a><font
     color="#FFFF00"><strong>★</strong></font></td>
  </tr>
  <tr>
     <td align="center" width="100%"><font color="#FFFF00"><strong>★</strong></font><a
     href="bbs.html"><font color="#FFFF00"><strong>掲示板</strong></font></a><font
     color="#FFFF00"><strong>★</strong></font></td>
  </tr>
  <tr>
     <td align="center" width="100%"><font color="#FFFF00"><strong>★</strong></font><a
     href="link.html"><font color="#FFFF00"><strong>リンク集</strong></font></a><font
     color="#FFFF00"><strong>★</strong></font></td>
  </tr>
  <tr>
     <td align="center" width="100%"><font color="#FFFF00"><strong>★</strong></font><a
     href="mail.html"><font color="#FFFF00"><strong>メール</strong></font></a><font
     color="#FFFF00"><strong>★</strong></font></td>
  </tr>
</table>
</center>

改定後のタグ(1195バイト)
<center><table border="2" cellpadding="5"><tr><th><font color="#ffff00">★</font><a href="kiroku.html"><font color="#ffff00">更新記録</font></a><font color="#ffff00">★</font></th></tr><tr><th><font color="#ffff00">★</font><a href="watashi.html"><font color="#ffff00">私の紹介</font></a><font color="#ffff00">★</font></th></tr><tr><th><font color="#ffff00">★</font><a href="nikki.html"><font color="#ffff00">日記帳</font></a><font color="#ffff00">★</font></th></tr><tr><th><font color="#ffff00">★</font><a href="info.html"><font color="#ffff00">インフォメーション</font></a><font color="#ffff00">★</font></th></tr><tr><th><font color="#ffff00">★</font><a href="e.html"><font color="#ffff00">ギャラリー</font></a><font color="#ffff00">★</font></th></tr><tr><th><font color="#ffff00">★</font><a href="bbs.html"><font color="#ffff00">掲示板</font></a><font color="#ffff00">★</font></th></tr><tr><th><font color="#ffff00">★</font><a href="link.html"><font color="#ffff00">リンク集</font></a><font color="#ffff00">★</font></th></tr><tr><th><font color="#ffff00">★</font><a href="mail.html"><font color="#ffff00">メール</font></a><font color="#ffff00">★</font></th></tr></table></center>

どうですか。表示をほとんど変えずにこれだけ少なくできるんです。最大で35%に減るんです!!
いくら作成ソフトを持っていたとしても、タグの知識は身につけておくにこした事はありません!!
……やり方は、あくまでKRIFF流なんですけどね(^^ゞ 。タグを学んで1年程度の人間でもこのくらいの事はできます。
でも、タグの世界も日進月歩。現在(名前は忘れましたが)新型タグに一新しようという動きもありまして、その新型で廃止されるタグが、上記の見本の中に結構ありますんで。
注意したいのは、全て一行にしてしまうものはしょっちゅう更新・変更をする所にはオススメできない事。
それからJavascriptやCGIの場合は、改行によってプログラムが動かなくなる可能性があるので、要注意。しかし、めったに更新しない物はぜひやってみて下さい。
些細な事ですが、まさしく「塵も積もれば山となる」

しかし、一件完璧なこの作戦も、致命的な欠陥がある。それは、
ソフトによっては短くしたファイルを作成ソフトで開くと「元に戻っちゃう」事がある事。
その点には充分注意して下さいね。
そんな訳で、あなたも自分のサイトのタグ、見直してみませんか??


文頭へ 戻る メニューへ
inserted by FC2 system