TopMovable Typeユーザビリティ > 2005年6月
2005年6月16日

label 要素を用いてトラックバックURLを1クリックで選択状態にする

個別エントリーアーカイブに表示されたトラックバックURLを、ドラッグせずに1クリックで選択する方法は既にスタンダードなカスタマイズとして確立していますが、label 要素を加えてさらに取得しやすくしてみました。label 要素は、それで括られた説明文をクリックした時やアクセスキーを押した時、本来の部分をクリックした時と同じ動作をさせる働きをもっています。

デフォルトテンプレートにおけるトラックバックURL表示のHTMLタグは下記のようになっています。

<h2 id="trackbacks">トラックバック</h2>
<p class="techstuff">このエントリーのトラックバックURL:<br />
<$MTEntryTrackbackLink$></p>

このタグでは下のような表示になり、トラックバックURLをコピーする場合、マウスでドラッグする必要があります。

トラックバック
このエントリーのトラックバックURL:
http://www.koikikukan.com/cgi-bin/blog/koikikukan/mt-tb.cgi/1216

このタグに対してURL表示部分を input 要素に変更し、さらに onfocus イベントを加えて1クリックでURL全体が選択できるようにします。

<h2 id="trackbacks">トラックバック</h2>
<p class="techstuff">このエントリーのトラックバックURL:<br />
<input tabindex="1" accesskey="x" name="tb_url" value="<$MTEntryTrackbackLink$>" readonly="readonly" onfocus="this.select()" /></p>

ここまでが従来のカスタマイズで、テキストエリアのURLを1クリックで選択状態にすることができます。ここでは省略していますがIEのみ有効なコピーボタンをつけるというカスタマイズもあります。

トラックバック
このエントリーのトラックバックURL:

input 要素には name 属性が必要です。また tabindex 属性と accesskey 属性の付与が推奨されています。

ここからさらに input 要素に任意の id 属性を追加し、その id 属性を指定する label 要素で説明文「このエントリーのトラックバックURL:」を括ります。

<h2 id="trackbacks">トラックバック</h2>
<p class="techstuff"><label for="tb_url">このエントリーのトラックバックURL:</label><br />
<input tabindex="1" accesskey="x" name="tb_url" id="tb_url" value="<$MTEntryTrackbackLink$>" readonly="readonly" onfocus="this.select()" /></p>

これで「このエントリーのトラックバックURL:」の部分をクリックしても選択状態にできるようになります。

トラックバック

URLの周囲に他の説明文を加えている場合はそこに label 属性を付与することでさらにマウスでURLを狙う精度を低くすることができます。

label 要素に accesskey 属性を付与することで、ALT キー+「accesskey属性で指定した値」で選択することもできます。Movable Type ではデフォルトテンプレート・メインページの検索部分にこのテクニックを用いていますので、そちらも参考にされると良いと思います。

2005.06.17 追記
typo がありました(誤:lable→正:label)ので修正しました。すいません。

Comments [8] | Trackbacks [15]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3