制作講座.初心者のためのネットショップ開業総合支援講座
ＨＴＭＬ基礎 フォント基礎 カラー基礎 画像基礎 文章基礎
ブログ制作 メルマガ制作 2次元コード リンク制作 携帯版制作
ちょっと役立つ小技

商用サイトをホームページ作成ソフトだけで制作するには、限界があります。デザイン面以外にjavascriptやCGIの設置が不可欠で、知識がないと模倣さえ難しいのが実情です。

スパムメールを少しでも減少させる

メールアドレスを記載する場合はHTMLソースの@マーク部分を@に変更します。この代替表示法はウェブページのメールアドレス情報を収集するロボット対策になります。
また、半角英数の@を全角英数の＠で代替したり、アドレス自体を画像化する方法がありますが、これはコピー＆ペーストしても動作はしないので表示用に利用します。
メルアドの暗号化はメールアドレス収集ロボット対策やメールアドレス暗号化スクリプトなどで公開されています。CGIのフォームメールはアドレス表示が不要なので、スパム対策と利便性から広く普及してます。

直前のページに戻るボタンの設置

直前に見ていたページに戻るには、通常ツールバーのボタンをクリックしますが、簡単なJavaScriptを使用して、これと同等の動作が可能です。
[戻る] <a href="javascript:history.back()">[戻る]</a>
<input onclick="javascript:history.back()" type=button value="戻る">
history.back()をhistory.go(-1)に変更すると、前に表示したページを指定できます。

印刷ボタンの設置

ボタンをクリックすると、印刷用ダイアログが表示され、ページ印刷を開始するJavaScriptですが、FAX注文書のPDFファイルを印刷するのに利用します。
[印刷] <a href="#" onclick="print(); return false">[印刷]</a>
<input type="button" value="印刷" onclick="print()">

イメージツールバーを非表示とする

image tool barIE6のイメージツールバーは画像サイズ200×200ピクセル以上を自動表示しますが、これを非表示にするには<meta http-equiv="imagetoolbar" content="no">を追記します。個別画像の非表示には<img galleryimg="no">を追記します。IE7はイメージツールバーの機能がなく、記述は不要ですが、逆にレジトリーの変更で小さな画像にマウスポインタを置いた場合にツールバーを表示できます。

空白文字の使用

余白の調整には、スタイルシートのmarginプロパティやpaddingプロパティを使うのが一般的ですが、特に空白文字を挿入し、文字間のバランスをとることがあります。この場合はスペースキーで連続して挿入しても1つの半角スペースと解釈され、1文字分の空白しか表示されません。強制的に半角英数の空白文字を連続挿入する場合は「&nbsp;」を利用しますが、この他にも「&ensp;」、「&emsp;」、「&thinsp;」などがあります。
なお、空白文字を含め直接HTMLに記述できない記号などを実体参照文字と言いますが、代表的なものに「&lt;」、「&gt;」、「&quot;」がよく使用されます。

サイト内検索ツールの設置

サイト内のコンテンツや商品点数が多く、サイトページが多数に渡る場合はサイト内検索を設置すれば、お客様の利便性が高まります。サイト内検索は通常CGIで設置します。
しかし、利用するサーバーに負担がかかるので、サイト上の無料ツールを設置する方法があります。例えば、Googleのフリー検索にベーシック版とカスタム版がありますが、フリー検索は各版ウェブ検索のみとウェブ検索＋サイト内検索の両機能が利用できます。
次のソース例はこのサイトで使用するKeyWord検索と同じ表示が簡単に設置できます。
<form action="http://www.google.com/search" target="_parent"style="margin-top:0em; margin-bottom:0em;center;background-color : #99ff99;">Web通販創研内←サイト名変更
<input type="hidden" name="hl" value="ja">
<input type="hidden" name="ie" value="Shift_JIS">
<input type="hidden" name="oe" value="Shift_JIS">
<input type="hidden" name="as_sitesearch" value="2tails.net">←自サイトURLに変更
<input type="text" name="q" size="16" maxlength="16">KeyWord←入力フィールド字数設定
<input type="submit" name="btnG" value="検索"></form>

Googleのサーチエンジンを利用し、サーチロボットの巡回後に全ページが検索の対象になります。HTMLソースをコピー＆ペーストし、赤字部分を変更すると、このまま利用できますが、Googleはindex.html以外のページが登録されにくいようです。
サイト内検索専用ツールを提供する検索星は簡単なタグの貼付けで利用できます。

IMEの有効・無効を指定する(IE5以降)

IE独自のCSSですが、<form>タグ内でのテキスト入力時にIMEを有効・無効の状態にします。テキスト欄にメルアドや住所を入力する場合は自動的に半角英数や全角文字での入力ができますが、IME単語登録したメルアドをコピー＆ペーストさせない効果もあります。
<input type="text" name="name" style="ime-mode:active">←IME全角入力有効
<input type="text" name="mail" style="ime-mode:disabled">←IME半角入力固定
<input type="text" onpaste="alert('ペースト禁止です!');return false;">←貼り付け不可の警告表示

ページ内のテキスト文をコピーできないようにする

「コピー禁止!」等の表示は右クリックでアラートを表示するjavascriptが一般的です。アラートの内容はonselectstart="alert('ドラッグ&コピー禁止');return false;"にすることで、ページの一部や画像ファイルに適用できます。この方法はソース表示のメモ帳から簡単にコピーできますが、画像のコピーはソース構成の知識が必要なので、一般人には効果があるようです。
【事例】
このテーブルで囲まれた部分のみ、右クリックのコピーに警告が表示されます。
この画像上で右クリックしてください! 右クリックによるコンテキストメニュー非表示
onselectstart="alert('保存&amp;コピー禁止!');return false;"

METAタグのShift_JISをEUC-JPなどに変更するとソースが文字化けします。(作成例)
これはIEがShift_JIS以外をメモ帳で読めないだけで、他のエディタでソース開示すると問題なく表示されます。HTMLソースの暗号化フリーウェアはUnicodeを利用したHTMLエンティティ変換や復号化にjavascriptを利用するXORHTMLなどがありますが、HTMLソースの暗号化はスパム対策を目的としたものであってもお薦めできません。

更新前のサイトデザインや内容を知る

あるサイトの更新前ページを閲覧するには、一般にGoogleやYahoo!のキャッシュを利用しますが、保存はHTMLファイルだけで、画像やリンクが切断されている場合があります。検索ロボットの巡回は約1ヶ月毎なのでキャシュデータも更新されるわけですが、更新前のページ閲覧は96年からデータ収集しているInternet Archiveが利用できます。
世界中のウェブコンテンツの半永久的な保存を目的とするこの検索サイトでトップページの"Wayback Machine"にアドレスを入力し、"Take Me Back"をクリックします。

検索等でファイルに直接アクセスされた場合でもトップページを表示する

top.location.href="親フレームファイル名"を指定、<head>〜</head>内に記述する。
<script type="text/javascript">
if(top==self){top.location.href="index.html"};
</script>

ホバーウィンドウ(ドロップ・イン・ウインド)を設置する

ウェブサイトからの最新情報やメルマガ読者の登録フォーム、特にPRしたい商品などの重要ページ部分をレイアウトの変更なしに掲載し、注目させるツールです。運営ポリシーのページで試用しているとおり、初めてページに訪れた時に上方から別ウィンドウがダウンし、内容を表示します。ポップアップウィンドウのようにポップアップブロッカーの影響を受けない特徴もあるので、設置前に比べ、反応率が倍増するなどの効果があります。
ホバーウィンドウの設置はホバーウィンドウ設置方法やDYNAMIC DRIVEをご覧ください。
類似のツールにフロート・イン・ウインドウがありますが、これはホバーウインドウと違い、アクションの自由度が高く、検索エンジンへの悪影響が少ないようです。

オンマウスオーバーで拡大画像を表示する

サイトページの限られたスペースで商品画像を多数掲載するには、縮小画像を利用するのが有効です。画像拡大には、1枚の画像を縦横同比率に拡大する方法と2枚の画像を差し替える方法があります。1枚の画像を利用する方法は画質が劣化するので、縮小画像と標準画像の2枚が必要です。販促効果の高い標準画像を多数見る場合はクリックが面倒になるクリック疲れが生じますが、<head>〜</head>内に次のように記述すると、縮小画像にマウスポイントを載せるだけで、同一画面上に標準画像が瞬時に表示されます。
<script type="text/javascript">
function swImg(iName,str)
{
document.images[iName].src=str;
}
</script>		 標準画像
広島市民球場前の5000系路面電車GREEN MOVER
<body>〜</body>内の表示箇所に次のように記述します。
<body>
<img src="image/point.jpg" name="myIMG" border="1" title="標準画像"onMouseover="swImg('myIMG','image/point_l.jpg')" onMouseout="swImg('myIMG','image/point.jpg')">
</body>

お気に入りアイコンの作成

ブラウザのお気に入りリストやアドレスバーに表示される正方形のアイコンをファビコンと言いますが、ウェブブラウザの表示は16x16、デスクトップにショートカットを置いた場合は32x32、エクスプローラーでアイコン表示にした場合は48x48のサイズで表示されます。このファビコンはICO形式であれば、16x16と32x32と48x48の3つのアイコンを一つの画像ファイルに格納できるため、これをマルチアイコンと呼びます。
独自ファビコンの設定はトップページの<head>〜</head>内に次のように記述し、お気に入り(ブックマーク)リストの中で特に目立たせることができます。
<link rel="shortcut icon" href="favicon.ico" type="image/vnd
.microsoft.icon">

GIFやPNGも表示できる場合がありますが、通常は32x32で作成したGIFやPNG、JPG形式の画像をファビコン用のico形式に変換します。これには、ウェブ上で作成するFAVICONメーカーや作成ソフトの@icon変換があります。ウェブ上でico変換できるサイトにファビコン作成やFavIcon from Picsなどがあり、これらのサイトで変換されたiconファイルはzip形式でダウンロードします。ダウンロード後は解凍して、サーバーにアップロードし、ブラウザを再起動すると完了しますが、記述しなくても表示されることがあります。

お気に入りボタンを作成する

お気に入り(ブックマーク)の追加ボタンはJavaScriptをonclickイベントとして追記します。この方法は簡単なのですが、IE4.0以降のみに有効なJavaScriptです。
ボタン型
 <input type="button" value="お気に入りの追加(A)" accesskey="a" onclick="window.external.AddFavorite('http://2tails.net','ネット通販開業講座　広島市')">
画像型
お気に入りに登録		 <a href="http://2tails.net" onclick="window.external.AddFavorite('http://2tails.net','ネット通販開業講座　広島市')"><img src="favicon.ico" width="16" height="16" alt="お気に入りに登録"></a>
閲覧ページ指定型
お気に入りの追加		 <a href="http://2tails.net/htm_2.html" onclick="window.external.AddFavorite(location.href,document.title)" title="このページを登録">お気に入りの追加</a>

旧サイトのURLを新サイトのURLに移転する

独自ドメインの取得等でサイトのURLを変更する場合、新サイトへ誘導するため旧サイトのindex.htmlに移転案内を表示をすることがあります。通常は<head>〜</head>内のMETAタグに次のような転送設定を行います。
(設定例)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="refresh" content="5;url=http://www.2tails.net/">
<title>通販ショップ制作講座「サイト転送ページ」</title>
</head>
この方法は簡単ですが、旧サイトが新サイトより上位に表示される期間が長く続きます。早急な完全移転は検索エンジンに新サイトに登録移転したことを認知させ、自動的にURLが置換できる301リダイレクトの設定をサーバー側で行う必要があります。通常のリダイレクト設定はメモ帳などで作成したhtaccess.txtを.htaccessファイルに変換します。
Redirect permanent /index.html http://www.2tails.net/
変換後の.htaccessファイルはルートディレクトリに置くことで、円滑にリダイレクトできます。転送元はルートディレクトリを基準としたパスで記述し、転送先はhttp://で始まるURLにします。なお、パスはファイルなどの場所を示す文字列で、リンク設定や画像などのファイルを読み込む場合に対象ファイルをURLで指定します。
  • 絶対パス
    http://から始まる記述方法で、別サイトにリンクする場合などは、この方法で指定します。
    【例】<a href="http://www.2tails.net/images/photo.jpg">　
  • 相対パス
    現在場所基準とした相対的な記述方法で、サイト内のページへリンクする場合などは、この方法で指定します。もちろん、絶対パスでも指定できますが、通常は相対パスで指定します。
    【例】<a href="./images/photo.jpg">
前のページへ 1>2 このページの先頭へ Google Page Rank