作成技術とツール

インラインフレームのリンク方法

上下、左右に画面を分割し、その中に別ファイルを読み込むフレーム構造はindex.html(top.html)ページが表示設計図にあたるため、コンテンツがなく、SEO対策に不利となるので、商用サイトに不適当です。
その点、インラインフレームはページ内の任意の場所にフレーム領域を設置し、その中に別ファイルを読み込みますので、サイト構造を簡素化できます。また、iframeをjavascriptに書き込むとindex.htmlファイルにiframeタグを記述する必要がなく、しかも多くのHTMLバージョンに対応することができます

【フレーム横2分割の例】
<frameset cols=”50%,50%”>←横幅左右50%づつ
<frame name=”left” src=”newpage2.html” />←左ページ
<frame name=”right” src=”newpage3.html” />←右ページ
<noframes>
<body>FRAME対応ブラウザが必要です!</body></noframes></frameset>
【インラインフレーム横2分割の例】
<iframe src=”newpage2.html” width=”150″ height=”1000″
marginheight=”0″ marginwidth=”0″ frameborder=”0″
scrolling=”yes” title=”IFRAME対応ブラウザが必要です!”>IFRAME対応ブラウザが必要です!</iframe>

バナーサイズの種類

テキストより注目度の高いリンク用の画像をバナーと言い、標準サイズが決められています。垂れ旗を意味するバナーサイズは国際的なもので14種類あります。中でもリンク用によく使用され、目にする機会の多いのはマイクロボタン88×31サイズです。
広告バナーは一般的にクリックしたくないと言う無意識の心理が働きます。多くのバナーが同一ページにある場合はより敬遠され、クリック率が低下する傾向があります。
動的なアニメーション型のGIF画像やFLASHバナーも同様な理由から多用することは逆効果です。バナー広告は画像を使用しているので、そのページが重くなり、表示に時間を要します。そのため、バナーサイズの容量は3KB以内を目途に作成します。

バナーサイズ バナー名称
468×60 Full Banner(フルサイズ)
234×60 Half Banner(ハーフサイズ)
120×240 Vertical Banner(垂直型バナー)
120×90 Button1(ボタン1)
120×60 Button2(ボタン2)
125×125 Square Banner(正方型バナー)
88×31 Micro Button(マイクロボタン)

サイト内容に関連する広告の訪問者は内容に興味があって来訪しているので、その内容に関連した商品やサービスに関心を示し、広告効果が高くなります。懸賞やキャンペーン情報に関心を示す傾向のある女性向けサイトに効果的です。説明文をバナーに付記し、バナー広告の近くに説明や解説文を書くと内容が伝わりやすく、クリック率が高まります。

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=”./images/***.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枚が必要です。
販促効果の高い標準画像を多数見る場合はクリックが面倒になるクリック疲れが生じますが、次のように記述すると、縮小画像にマウスポイントを載せるだけで、同一画面上に標準画像が瞬時に表示されます。
■ロールオーバー設置例１
標準画像
<body>～</body>内の表示箇所に次のHTMLソースを記述します。

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

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

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

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

<body>
<img src=”./images/point.jpg” name=”myIMG” border=”1” alt=”標準画像”onMouseover=”swImg(‘myIMG’,’./images/point_l.jpg‘)” onMouseout=”swImg(‘myIMG’,’./images/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変換できるサイトにファビコン作成などがあり、これらのサイトで変換されたiconファイルはzip形式でダウンロードします。
ダウンロード後は解凍して、サーバーにアップロードし、ブラウザを再起動すると完了しますが、記述しなくても表示されることがあります。

指定位置にリンクする

同一ページ内や同一サイト内の指定位置にリンクすることができます。この方法は1ページの文章が非常に長い場合や同じ内容の説明などがある場合などに利用します。
キーワードを決め、リンク先の位置にリンク元と同じキーワードを使用しますが、同一キーワードを複数個所に使用できないのでご注意ください。#の記述は必須です。
サイト内の別ページにリンクする場合(設定例-ネット通販の知識)

リンク元 <a href=”https://2tails.net/#botan">ネット通販の知識</a>
リンク先 <h2 id=”botan”>ネット通販の知識</h2>

旧サイトの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://www.*****.net/images/photo.jpg">　
  • 相対パス
    現在場所を基準とした相対的な記述方法で、サイト内ページにリンクする場合はドメインが変更されても書き換えが不要なこの方法で指定します。通常は相対パスで指定しますが、絶対パスでも指定できます。「../」という記述はひとつ上の階層に移動するという意味です。
    【例】】<a href="../images/photo.jpg">

令和5年

2023年3月
月 火 水 木 金 土 日
 12345
6789101112
13141516171819
20212223242526
2728293031  

Webサイト内検索

表示数