label 要素を用いてトラックバックURLを1クリックで選択状態にする
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）ので修正しました。すいません。
- 選択されたアーカイブリンクを強調表示する（モジュール化対応版）
- 選択されたアーカイブリンクを強調表示する
≫ 個別エントリーへのリンクタグに苦戦・・・ from 東北の巨匠：：雑記
ここ１週間MT :: luvlog : 個別エントリーへのリンクタグを表示に悩ま... [続きを読む]
≫ 進化版 「トラックバックURLを1クリックで選択状態に」 from やむやむ
以前、「トラックバックをちょっとだけ楽チンに」 というエントリで トラックバッ... [続きを読む]
≫ 1クリックでトラックバックURL選択。（label 要素version) from TOY COZY MUSEUM 別館
"label要素"というタグを使用して、クリック＆選択の範囲を任意に指定できる方法を「小粋空間」様が公開されていましたの... [続きを読む]
≫ 参考CGI/カスタマイズサイトなど from MetLog
以下のサイトを参考に、あるいは利用させていただきました。 MTカスタマイズ 小粋... [続きを読む]
≫ ワンクリックでトラックバックURLを選択 from aquafish.jp
トラックバックする際、URLをコピペする作業は意外と煩わしい。URLをドラグ→右... [続きを読む]
≫ 参考CGI/カスタマイズサイトなど from MetLog
このブログ作成にあたり、以下のサイトを参考に、あるいは利用させていただきました。... [続きを読む]
≫ [愚] このエントリーのトラックバックURLの from grumble
文字クリックで選択状態になるワザをさえらさんから伝授。 やむやむサマ「進化版 「... [続きを読む]
≫ カスタマイズ覚書その２ from あそび
カスタマイズ覚書第２弾です。 ・BlogStatsを追加しました 先ほどのエント... [続きを読む]
≫ 引っ越し完了！?ロリポからＳＢへ? from Suzulog
この３日ほど睡眠不足であごの下にニキビが･･･今更中学生男子のような悩み事を抱えてしまったすずです。皆様こんにちは。いきなりのブログ... [続きを読む]
≫ [sz] ちまっとしたMTネタ（？ from M E T A B O L I S M
いやね、なんか最近<blockquote>タグ（ちょうど前のエント... [続きを読む]
≫ オリンピック from Being * chris
今日は、バレンタインデイでした。 私は、チョコなんて１個も買ってないんですが、 ... [続きを読む]
≫ トラックバックURLの簡単コピー（IE用コピーボタン＆１クリックフォーカス） from BABY-UNIVERSE★
ブログをはじめたばかりなので、トラックバックがそんなにあるわけでもなく、 誰もう... [続きを読む]
≫ トラックバックURLをワンクリックで選択 from Ricordo
カスタマイズするときなど再三使うタグコピーで、ないようであるタグコピー漏れ カスタマイズ時のタグ漏れ [続きを読む]
≫ トラックバックURLを1クリックで選択状態にする from 瑞了奇譚
トラックバック。あまり活用してませんが...(^_^;
[続きを読む]
≫ Trarckback URLの自動選択 from Noel Cafe
これは、お決まりのBlogカスタマイズですね。 今までまったくやっていませんでした。 他にやりたいことがあって、まず手始めにTrackback URLの... [続きを読む]
こんにちわ。＾＾
早速導入いたしました。
テキストエリアの幅の調整に多少時間が掛かりましたが、スタイルシートでなんとかやり遂げることができました。（＾＾；
いつもありがとうございます。
(・Ω・)ノ コンニチワ 説明文をクリックしても選択状態になってたとは、気付きませんでした。
あと、accesskey 属性を付与することの意味も、ぜんぜん知らなかったです。お勉強させていただきました。
ありがとうございました。(シ_ _)シ ハハァー
こんばんは。
早速導入させていただきました。有り難うございます。こういうプチなカスタマイズってアクセスする側からすると意外と大事ですね。
＞こさじさん
こんばんはー。
ご利用＆ご連絡ありがとうございました。
すいませんが私のタイプミスで label タグの閉じタグのスペルが誤ってましたので、修正くださいますようよろしくお願い致します。
＞さえらさん
こんばんは。
早々のご利用＆トラックバックありがとうございます。
タイプミスすいませんでした。
その上のリンクも親切な配置ですね！
＞toycozyさん
こんばんは。
ご利用＆トラックバックありがとうございました。
だんだんカスタマイズ記事が枯渇してきたという噂も。（笑）
何度も失礼します。＾＾；
ただいま、修正しましたので、安心してゆっくりおやすみください。zzz...
以前のカスタマイズの記事がどこだったか探すのが面倒で放置してたんですよねぇ。
そしたら、さらに進化した形で記事になってので、感謝感激です。
グットタイミングでした！ ＾＾
＞こさじさん
こんばんは。
ご連絡ありがとうございました。
ではでは！
またまたお世話になりました。
ここをクリックして選択状態にするって、面白いカスタマイズですよね。
いつもですが改めてすごいなーと思ってしまいました。
また遊び心のあるカスタマイズを作ってくださいませ。
