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

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

Posted at June 16,2005 11:59 PM
Tag:[Customize, JavaScript, label, MovableType, TrackbackURL, Usability, XHTML]

個別エントリーアーカイブに表示されたトラックバック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)ので修正しました。すいません。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

個別エントリーへのリンクタグに苦戦・・・ from 東北の巨匠::雑記
ここ1週間MT :: luvlog : 個別エントリーへのリンクタグを表示に悩ま... [続きを読む]

Tracked on June 17, 2005 6:46 AM

進化版 「トラックバックURLを1クリックで選択状態に」 from やむやむ
以前、「トラックバックをちょっとだけ楽チンに」 というエントリで トラックバッ... [続きを読む]

Tracked on June 17, 2005 11:36 AM

1クリックでトラックバックURL選択。(label 要素version) from TOY COZY MUSEUM 別館
"label要素"というタグを使用して、クリック&選択の範囲を任意に指定できる方法を「小粋空間」様が公開されていましたの... [続きを読む]

Tracked on June 17, 2005 10:40 PM

参考CGI/カスタマイズサイトなど from MetLog
以下のサイトを参考に、あるいは利用させていただきました。 MTカスタマイズ 小粋... [続きを読む]

Tracked on June 23, 2005 1:09 PM

ワンクリックでトラックバックURLを選択 from aquafish.jp
トラックバックする際、URLをコピペする作業は意外と煩わしい。URLをドラグ→右... [続きを読む]

Tracked on June 28, 2005 11:39 PM

参考CGI/カスタマイズサイトなど from MetLog
このブログ作成にあたり、以下のサイトを参考に、あるいは利用させていただきました。... [続きを読む]

Tracked on July 4, 2005 8:20 PM

[愚] このエントリーのトラックバックURLの from grumble
文字クリックで選択状態になるワザをさえらさんから伝授。 やむやむサマ「進化版 「... [続きを読む]

Tracked on July 25, 2005 9:52 AM

カスタマイズ覚書その2 from あそび
カスタマイズ覚書第2弾です。 ・BlogStatsを追加しました 先ほどのエント... [続きを読む]

Tracked on July 29, 2005 11:15 PM

引っ越し完了!?ロリポからSBへ? from Suzulog
この3日ほど睡眠不足であごの下にニキビが・・・今更中学生男子のような悩み事を抱えてしまったすずです。皆様こんにちは。いきなりのブログ... [続きを読む]

Tracked on January 11, 2006 12:48 PM

[sz] ちまっとしたMTネタ(? from M E T A B O L I S M
 いやね、なんか最近<blockquote>タグ(ちょうど前のエント... [続きを読む]

Tracked on January 21, 2006 6:28 AM

オリンピック from Being * chris
今日は、バレンタインデイでした。 私は、チョコなんて1個も買ってないんですが、 ... [続きを読む]

Tracked on February 14, 2006 11:26 PM

トラックバックURLの簡単コピー(IE用コピーボタン&1クリックフォーカス) from BABY-UNIVERSE★
ブログをはじめたばかりなので、トラックバックがそんなにあるわけでもなく、 誰もう... [続きを読む]

Tracked on February 19, 2006 2:26 AM

トラックバックURLをワンクリックで選択 from Ricordo
カスタマイズするときなど再三使うタグコピーで、ないようであるタグコピー漏れ カスタマイズ時のタグ漏れ [続きを読む]

Tracked on July 25, 2006 1:28 AM

トラックバックURLを1クリックで選択状態にする from 瑞了奇譚
トラックバック。あまり活用してませんが...(^_^; [続きを読む]

Tracked on January 18, 2008 8:31 PM

Trarckback URLの自動選択 from Noel Cafe
これは、お決まりのBlogカスタマイズですね。 今までまったくやっていませんでした。 他にやりたいことがあって、まず手始めにTrackback URLの... [続きを読む]

Tracked on March 21, 2009 8:59 PM
コメント

こんにちわ。^^

早速導入いたしました。
テキストエリアの幅の調整に多少時間が掛かりましたが、スタイルシートでなんとかやり遂げることができました。(^^;

いつもありがとうございます。

[1] Posted by こさじ : June 17, 2005 9:57 AM

(・Ω・)ノ コンニチワ 説明文をクリックしても選択状態になってたとは、気付きませんでした。
あと、accesskey 属性を付与することの意味も、ぜんぜん知らなかったです。お勉強させていただきました。
ありがとうございました。(シ_ _)シ  ハハァー

[2] Posted by さえら : June 17, 2005 11:14 AM

こんばんは。
早速導入させていただきました。有り難うございます。こういうプチなカスタマイズってアクセスする側からすると意外と大事ですね。

[3] Posted by toycozy : June 17, 2005 10:42 PM

>こさじさん
こんばんはー。
ご利用&ご連絡ありがとうございました。
すいませんが私のタイプミスで label タグの閉じタグのスペルが誤ってましたので、修正くださいますようよろしくお願い致します。

>さえらさん
こんばんは。
早々のご利用&トラックバックありがとうございます。
タイプミスすいませんでした。
その上のリンクも親切な配置ですね!

>toycozyさん
こんばんは。
ご利用&トラックバックありがとうございました。
だんだんカスタマイズ記事が枯渇してきたという噂も。(笑)

[4] Posted by yujiro : June 18, 2005 12:29 AM

何度も失礼します。^^;
ただいま、修正しましたので、安心してゆっくりおやすみください。zzz...

以前のカスタマイズの記事がどこだったか探すのが面倒で放置してたんですよねぇ。
そしたら、さらに進化した形で記事になってので、感謝感激です。
グットタイミングでした! ^^

[5] Posted by こさじ : June 18, 2005 1:13 AM

>こさじさん
こんばんは。
ご連絡ありがとうございました。
ではでは!

[6] Posted by yujiro : June 18, 2005 10:41 PM

またまたお世話になりました。
ここをクリックして選択状態にするって、面白いカスタマイズですよね。
いつもですが改めてすごいなーと思ってしまいました。
また遊び心のあるカスタマイズを作ってくださいませ。

[7] Posted by やむ : July 30, 2005 3:07 PM

>やむさん
こんばんは。
うまくできたようで良かったです。

はい、今後もどうぞお楽しみに。

[8] Posted by yujiro : July 30, 2005 11:52 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)