ユーザビリティ覚書き|リンク集-アンダンテ

ユーザビリティ向上小技

ルートディレクトリ内のファイルへの内部リンクの書き方
＜a href="http://hogehoge.com"＞HOME＜/a＞よりも＜a href="./"＞HOME＜/a＞
ひとつ下のディレクトリからルートディレクトリへ
＜a href="../"＞HOME＜/a＞
ふたつ下のディレクトリからルートディレクトリへ
＜a href="../../"＞HOME＜/a＞

優れたブログやＣＭＳの登場によりサイトの保守管理が容易になりました。そんな便利なツールが無かった時代の、エディタで手動更新してFTPでアップロードして...といった作業から解放されます。しかし、既存のサイトで将来的にもサイトの規模が大きくならないようならば、リニューアルして初期からこれらを導入する他に、PHPを使って管理の負担を軽減することが出来ます。実はこのリンク集もそうしてますが、以下に例を。(※ページの拡張子は○○.phpになります。)

※全角カッコ→＜?php include ("meta.txt");?＞：Ajax,CSSを追加・変更する時など。
＜?php include ("header.txt");?＞：ロゴやキャンペーンページへのリンク等。
＜?php include ("menu.txt");?＞：リンク先の追加/削除時等。
＜?php include ("footer.txt");?＞：メールアドレスの変更時等。
ページ管理の例

プルダウンメニューは表示エリアが少なく、スッキリした見た目になるが、ネット初心者には、見えない項目があるのに気づかない時がある。プルダウンじゃなく見えるようにするにはselect タグに size="数値"とする。

もし、訪問者が最初にアクセスしたページが「404エラー:NotFound」だったら、URLを削ってルートディレクトリや一階層上のURLへアクセスすることはまずないだろう。下記は、移動した全ファイルに記述する必要があるので数が多いと大変。
ファイル毎に記述する場合は；

<head>
<meta http-equiv="Refresh" content="0; URL=http://移転先のアドレス">
</head>
<body>
自動で移動しない場合は<a href="http://移転先のアドレス">こちらをクリック</a>。
</body>

もしphpファイルならば↑の書き方ではなく、↓にした方がページランクなどが引き継がれるらしい。
＜?php
header("HTTP/1.0 301 Moved Permanently");
header("Location: http://移転先のアドレス");
?＞

.htaccessで記述する場合は；

ページ単位ならページ分記述 
Redirect 301 /old/old1.html http://www.yoursite.com/new1.html
Redirect 301 /old/old2.html http://www.yoursite.com/new2.html
Redirect 301 /old/old3.html http://www.yoursite.com/new3.html

ディレクトリ単位 
Redirect 301 /old/ http://www.yoursite.com/new/

店舗や会社の地図がJavascriptでウィンドウサイズを指定されて開くページだと、印刷するのに不便。(制作側から見て)小さいウィンドウだとツールバーやアドレスバーはデザイン的にバランスが悪いと思うのだろうけど、「マウスで右クリックして印刷」を知らない人には不親切。

フォームに入力する時に、タイプミスを気づいて貰いやすいようにinput タグをstyle="font-size:数値"とする。スタイルシートでもOK。

スタイルシートで文字サイズを指定するときは、訪問者のブラウザでサイズ変更ができるように "px" ではなくて "em" や "%" で指定する。

新規ページ・タグが増えすぎるので、むやみにリンクのターゲット指定に "top" や "_blank" を使わない。

ファイルに文字コード指定のメタタグを書いていないと、一部のブラウザで文字化けする。今更、すべてのファイルに書き足すのは面倒なので
.htaccessで AddType "text/html; charset=Shift_JIS" .html ←最後は改行。逆に "Shift_JIS" でないHTMLファイル(下層ディレクトリも含めて)は文字化けするので注意。

どんなポップアップヘルプがいいのだろうかと、あれこれ調べている途中。以下は、知る範囲です。間違いはご指摘頂けるとありがたいです。
HTMLタグ中に title="テキスト" とすると、オンマウスで文字を表示。
でも、目立つようにしないと気付かれないかも。5秒ぐらいで消えるので、短い説明向き。
例えば→ acronymってタグ。CSSで文字を目立つようにすればマシだろうか。

<acronym title="解説テキスト1">acronymってタグ</acronym>
他にも使えるタグ：<a></a> , <h1></h1>～<h6></h6> , <font></font> など。

確認したブラウザ
Internet Explorer 6～	○
Firefox 1.5～	○
Opera 9～	△(ステータスバーに表示)

JavaScript + CSSで行うのは、目立つ分、使いすぎるとウザイ。 >>サンプルで確認する

<HTML>
<head>
<title>ポップアップヘルプ</title>
<style>
<!--
.help {
  margin-left:10px;
  width:300px;            /* ポップアップする枠の横幅 */
  padding:10px;
  background: #ffc;       /* 背景色 */
  border:2px solid #f33;  /* 枠の幅と色 */
  z-index:256;
  position:absolute;
  text-align:left;
  line-height:150%;
  font-size: 1em;         /* 文字の大きさ */
  font-weight: normal;
  color:#f33;             /* 文字色 */
}
.pop_txt {
 text-decoration:underline;
}
-->
</style>
<script language="JavaScript">
<!--
txt = new Array();
txt[1] = '<div class="help">ローカル環境でも作動するスクリプト言語。</div>';
txt[2] = '<div class="help">カッティングスタイルシートの略。レイアウトなどを指定します。</div>';
txt[3] = '<div class="help">画像の上にマウスが乗った時に表示することも。</div>';
txt[4] = '<div class="help">これをクリックしてもどこにも飛びません。</div>';
txt[5] = '<div class="help">メールアドレス欄なら、「タイプミスに気を付けて」とか「メアドは公開されません」など。</div>';

function PopUp(i) {
  ID.innerHTML = txt[i];
  // ヘルプの位置を調整
  ID.style.left = event.x + 20;  //横軸の値
  ID.style.top = event.y + 50;   //縦軸の値
  ID.style.visibility = "visible";
}

function HidePop() {
  ID.style.visibility = "hidden";
}
//-->
</script>
</head>

<body style="line-height:200%">
<span id="ID" style="visibility: hidden; position: absolute;"></span>
<h3>ポップアップヘルプのサンプルです。</h3>
<li><span class="pop_txt" onmouseover="PopUp(1)" onmouseout="HidePop()">JavaScript</span>と<span class="pop_txt" onmouseover="PopUp(2)" onmouseout="HidePop()">CSS</span>を組み合わせているので、色や枠も自由に変更できます。</li>
<li>画像の上にマウスカーソルを置くと<img src="http://www.zakka56.com/smp/icon1.gif" width="15" height="15" alt="?" onmouseover="PopUp(3)" onmouseout="HidePop()"></li>
<li><a href="#" onmouseover="PopUp(4)" onmouseout="HidePop()">リンク</a>先の情報を簡易表示とか。</li>
<li>フォームの入力項目用ヘルプとか。※ポップアップする位置がブラウザによって異なるので、入力欄に重なるかもしれません。</li><br>
<input type="text" onfocus="PopUp(5)" onblur="HidePop()">
</body>
</HTML>

Internet Explorer 6～	○
Firefox 1.5～	×
Opera 9～	○

このリンク集は各リンク先サイトと一切関係ありません。リンクはご自由にどうぞ。
アンダンテ | メール
雑貨ショップ | おもてなしWiki | 管理者ブログ | フィード一覧