作成技術とツール

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;”>←貼り付け不可の警告表示

ピクセル単位で 画像の上に文字を重ねる

文字色や字体も指定できます。

旧市民球場

<div style=”position: relative;”>
<div style=”position:absolute; top:10px; left:10px; width: 180px;color:#ff0000;font-family
: メイリオ;”>文字色や字体も指定できます。</div>
</div><img src=”http://***.net/image/***.jpg” width=”195″ height=”98″ alt=”旧市民球場” />

ただし、文字サイズが大きくなると輪郭が崩れる欠点がありますが、imgタグのalt=”旧市民球場”以上に字句を強調できるので、SEOに有効です。

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

「コピー禁止!」等の表示は右クリックでアラートを表示するjavascriptが一般的です。アラートの内容はonselectstart=”alert(‘ドラッグ&コピー禁止’);return false;”にすることで、ページの一部や画像ファイルに適用できます。この方法はソース表示のメモ帳から簡単にコピーできますが、画像のコピーはソース構成の知識が必要なので、効果はあるようです。
【事例-1】

このテーブルで囲まれた文字部分のみ、右クリックのコピーに警告が表示されます。

このアイコンは右クリックによるコンテキストメニュー非表示
onselectstart=”alert(‘保存&amp;コピー禁止!’);return false;”

また、CSSと透過GIF画像を利用した高度な方法もあります。この方法は文字や画像の表面に1px×1pxの透明なGIF画像を被膜のように敷き詰めることで実現します。
【事例-2】

このテーブルで囲まれた文字部分のみ、右クリックのコピーができません。

このアイコンは右クリックによるコンテキストメニューの「名前を付けて画像を保存」が非表示、「名前を付けて背景を保存」は透過GIF画像になります。

METAタグのShift_JISをEUC-JPなどに変更するとソースが文字化けする場合がありますが、日本語文字コードのHTMLファイルをオンライン変換できるサイトもありますので、ご参照ください。

HTMLファイル名をJavascriptでパスワードにする

キーボードから入力した命令で、直接 Windowsを操作するプログラムのプロンプトを利用し、パスワードの必要な認証ページが簡単に作成できます。タイムサービスや日替わりサービスのように頻繁にアクセスページの変更を必要とする場合にHTMLファイル名をパスワード風に変更するとより効果的です。
ファイルの場所を類推しにくくするため、リンク先ファイルは同一ディレクトリ内に置き、ファイル名は大文字、小文字、数字を8文字以上使用するのが望ましいでしょう。

<script type=”text/javascript”>
function myEnter(){
myPassWord = prompt(“パスワードを入力してください”,””);
if (myPassWord!= “” )location.href = myPassWord+”.html”;}
</script>
<input type=”button” title=”ボタン表示” value=”タイムセール入口” onclick=”myEnter()”>

 【パスワード】Drg2uKy6

表の枠を細線で描く

表の枠線を細くする方法は例えばテーブル全体の背景色に赤を指定し、枠内の背景色を白に塗りつぶすと表現できますが、CSSで事前に作成して置くと効率的です。

<table style=”border-style: solid; border-width:1px;border-color:#ff0000;” cellspacing=”1″ cellpadding=”2″><tbody><tr>
<td style=”background-color: #ffffff;border-width: 0px;”>表枠線</td>
</tr></tbody></table>
表枠線

直接アクセスされた場合にトップページを表示する

検索エンジン経由で直接アクセスされる場合にトップページへ強制誘導します。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枚が必要です。
販促効果の高い標準画像を多数見る場合はクリックが面倒になるクリック疲れが生じますが、次のように記述すると、縮小画像にマウスポイントを載せるだけで、同一画面上に標準画像が瞬時に表示されます。
■ロールオーバー設置例1
標準画像
<body>~</body>内の表示箇所に次のHTMLソースを記述します。

<img src=”http://***.net/image/point.jpg” alt=”標準画像” style=”border-style: solid; border-width:1px;”
onmouseover=”this .src=’http://***.net/image/point_l.jpg‘” onmouseout=”this .src=’http://***.net/image/point.jpg‘”>

■ロールオーバー設置例2
標準画像
<head>~</head>内に次のjavascriptを記述するか、jsファイルを別途に作成し、リンクします。

<script type=”text/javascript”>
function swImg(iName,str){document.images[iName].src=str;}
</script>

<body>~</body>内の表示箇所に次のように記述します。

<body>
<img src=”http://***.net/image/point.jpg” name=”myIMG” border=”1” alt=”標準画像”onMouseover=”swImg(‘myIMG’,’http://***.net/image/point_l.jpg‘)” onMouseout=”swImg(‘myIMG’,’http://***.net/image/point.jpg‘)”>
</body>

■jQuery Lightbox設置例
オンクリック時に画像を表示するWordPress用のプラグインjQuery Lightboxで作成したものです。
紙屋町付近の路面電車

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

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

<link rel=”shortcut icon” href=”favicon.ico” type=”image/vnd.microsoft.icon”>

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

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

お気に入りの追加ボタンはJavaScriptをonclickイベントとして追記します。この方法は簡単なのですが、IE4.0以降のみに有効なJavaScriptです。

ボタン型
<input type=”button” value=”お気に入りの追加(A)” onclick=”window.external.AddFavorite
(‘http://***.net/‘,’ネット通販開業講座‘)”>
画像型
お気に入りに登録
<a href=”http://***.net/” onclick=”window.external.AddFavorite(‘http://***.net’,’ネット通販開業講座’)”><img src=”http://***.net/favicon.ico” width=”16″ height=”16″ alt=”お気に入りに登録”></a>
閲覧ページ指定型
お気に入りの追加
<a href=”http://cms.2tails.net/?page_id=552″ onclick=”window.external.AddFavorite(location.href,document.title)” title=”このページを登録”>お気に入りの追加</a>

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

独自ドメインの取得等でサイトのURLを変更する場合、新サイトへ誘導するため旧サイトのindex.htmlに移転案内を表示をすることがあります。通常は<head>~</head>内のMETAタグに次のような転送設定を行います。
(設定例)

<head>
<meta http-equiv=”refresh” content=”5;url=http://***.net/move.html“>
</head>

JavaScriptを使って表示ページを移転させるには、次のような1行を記述します。
HTMLページ内に直接JavaScriptソースを記述する場合とHTMLページ内にjsファイルのリンク先を記述して呼び出す方法があります。

<script type=”text/javascript”>
location.href = “http://***.net/”;
</script>
<script type=”text/javascript” src=”***.js”></script>

この場合は「.htaccess」ファイルを使う方法とは異なり、移動先は記述したURLになります。
これらの方法は簡単ですが、旧サイトが新サイトより上位に表示される期間が長く続きます。早急な完全移転は検索エンジンに新サイトに登録移転したことを認知させ、自動的にURLが置換できる301リダイレクトの設定をサーバー側で行う必要があります。
通常のリダイレクト設定はメモ帳などで作成した.htaccessファイルをFTPで転送後に変換します。

RewriteEngine on
RewriteRule ^index.html$ http://***.com/index.html [R=301,L]

変換後の.htaccessファイルはルートディレクトリに置くことで、円滑にリダイレクトできます。転送元はルートディレクトリを基準としたパスで記述し、転送先はhttp://で始まるURLにします。
なお、パスはファイルなどの場所を示す文字列で、リンク設定や画像などのファイルを読み込む場合に対象ファイルをURLで指定します。

  • 絶対パス
    http://から始まる記述方法で、別サイトにリンクする場合はこの方法で指定します。
    【例】<a href=”http://***.net/images/photo.jpg”>
  • 相対パス
    現在場所を基準とした相対的な記述方法で、サイト内ページにリンクする場合はこの方法で指定します。通常は相対パスで指定しますが、絶対パスでも指定できます。
    【例】<a href=”./images/photo.jpg”>

■令和元年版カレンダー

2019年5月
     
 12345
6789101112
13141516171819
20212223242526
2728293031  

■サイト内検索

■記事講読ランキング

■統計情報サイト

都道府県別統計
世界経済のネタ帳
■地方情報
地方公共団体情報システム機構
中国地域の中小企業支援施策
■ビジネス支援情報
exBuzzwords
ネット通販の構築支援別館
無料ビジネス相談会
1.対象者
☆起業をお考えの方
☆起業後間もない方
2.場所
広島市立中央図書館
3.開催日
☆毎月第2土曜12:00~17:00
4.1時間以内の予約制
☆先着順5名
5.申込先
中央図書館事業課
☆Tel:082-222-5542

■中小企業ビジネス支援サイト


Copy Protected by Chetan's WP-Copyprotect.