入力欄についての注意点をツールチップで表示
コメントやメールフォーム等の入力欄についての注意点をツールチップで表示してくれる便利なライブラリをみつけたので懲りずにいつものごとく導入してみました。
導入イメージはこんな感じ↓
この手のライブラリを導入したことがあるなら導入はたいして難しくもないと思うのですが簡単に説明してみます。
導入方法
1.)ライブラリのダウンロード
Tooltip for formsの「Download script」からzipファイルをダウンロードして解凍
2.)吹き出し画像の作成
「images」フォルダに元から入っている画像はちょっと使いにくいグリーンなのでサイトデザインに合わせて作り替えます。
白背景用のグレー(#CCCCCC)画像でよかったらここに置いておきます。
ご自由にお使いください。
3.)CSSファイルのカスタマイズ
「css」フォルダに入っているform-field-tooltip.cssを書き換えます。
#DHTMLgoodies_formTooltipDiv→ツールチップの内容
.DHTMLgoodies_formTooltip_closeMessage→ツールチップ内の閉じるメッセージ
4.)javascriptファイルのカスタマイズ
「js」ファイル内のform-field-tooltip.jsを書き換えます。
書き換え項目は…
53行目 this.imagePath→アップロードするimagesフォルダのパス
54行目 this.arrowImageFile→吹き出し画像のファイル名(変えた場合のみ)
55行目 this.arrowImageFileRight→吹き出し画像のファイル名(変えた場合のみ)
57行目 this.tooltipBgColor→作り替えた吹き出し画像の色
58行目 this.closeMessage→「close」を日本語にする場合のみ
59行目 this.disableTooltipMessage→「Don’t show this message again」を日本語にする場合のみ
71行目 this.pageBgColor→ページの背景色
この他にもツールチップのサイズや表示場所なんかも指定できますのでお好みで。
*「close」メッセージを日本語にする場合blogと同じ文字コードで保存します。
5.)ファイルのアップロード
「images」「css」「js」フォルダをサーバーにアップロードします。
*CSSファイルはアップロードせずにお使いのCSSファイルに追記してもいいと思います。
6.)テンプレートの書き換え
<head>～</head>内に以下を追記
</body>直前に以下を追記
-
<script type=“text/javascript”>
-
var tooltipObj = new DHTMLgoodies_formTooltip();
-
tooltipObj.setTooltipPosition(‘right’);
-
tooltipObj.setPageBgColor(‘ページの背景色’);
-
tooltipObj.setCloseMessage(‘Exit’);
-
tooltipObj.initFormFieldTooltip();
-
</script>
7.)ツールチップテキストを追加
<input>または<textarea>内にtooltipText属性を追加します。
-
tooltipText="ツールチップテキストの内容"
コメントフォームとトラックバックURLのところに入力内容や注意点などを表示させるようにしてみました。
入力欄をクリックするとぴょこんとツールチップが表示されるのでこれは便利でわかりやすいです。
吹き出し＋角丸のデザインもかわいいですしこれはいいかも!
[via]
フォームの入力内容にツールチップ表示をするJavaScriptライブラリ「Tooltip for forms」:phpspot開発日誌
ユニークな、でもユーザビリティUpにはとてもいいツールですね。私も早速設置させていただきました。
＞tomoshunさん
こんばんは :-)
最初から注意文を全部表示した方がユーザビリティ的にはいいんでしょうかね?
でもデザインがかわいいので気に入っています。
おそらく、全部が全部表示してしまうと、使う側にとっては「どれが一番言いたいの？」ということになるのではないでしょうか？それよりかは、このtoolみたいにクリックしたときにポップアップした方がかえって良いのではないでしょうか。
あと、私が特に意識しているのが「続きを読む」ですね。クリックすると個別ページにジャンプしますがあれって個人的にはあんまり好きじゃあなくていろいろ探して今のデザインにしてます。
記事だけいろいろ読み流したいときに便利なのかな、と思って流用しています。でも、現状の私のサイトは個別ページへのリンクがわかりにくいという欠点があるのでそこをうまく改善させられるとな、と思います。
長文失礼しました。
＞tomoshunさん
注意点を全部表示するとなんだか堅苦しい印象を与えそうですし、確かに分かりにくいかもしれませんね。
見た目もごちゃごちゃしそう…
でも注意点は入力欄をクリックしないと表示されないから、例えばメールアドレス入れたくない人は任意入力のコメントフォームに気が付きにくいかもって思ったり…
まぁそういう点は最初から表示すればいいですね :P
「続きを読む」に関してはいろんな意見がありますね。
以前はその場で表示したりもしましたがどっちの方がいいのかな…
個人的にTOPから見るというより個別記事から読むことが多いのでどっちでもいいやって感じなのです…
次から次へコメント書きたくなりますねｗ
注意点に関しては、必要最低限のこと(e-mailが任意とか)はあらかじめ見せておいて、そのほかに必要なことは…、っていう形が最善なのかもしれませんね。
私のサイトの場合は、RSSリーダーをみんながみんな使うわけではなくて、未だにインデックスからたどってくる方もいらっしゃって、50:50くらいな割合なのでこのような措置をとってました。個人的にはRSSリーダー経由で、記事を深く読む場合は個別ページに、という流れなのですが、インデックスから来る方も考えると…、という発想で現状に至ってます。でも、lomoさんの考えもありますよね。というより、lomoさんのサイトはリーダー経由が多そうなイメージがあるので、こういう形でいいかと思いますけどね。
＞tomoshunさん
コメンターにお知らせしたいことやコメンターが知りたいであろうことをわかりやすく伝えて、気持ちよく楽しくコミュニケーションしたいです。
こういうツールをうまく利用するのも一つの手かもしれないですね。
「続きを読む」については何となく今の形に落ち着いたのですが確かにTOPからこられる方もいらっしゃるはず。
TOPに関しては表示する記事数とか概要か全文か?とかいろいろ考える余地がありますね。
fdsfsdf