2005年01月26日

Blogカスタマイズ57〜トラックバックURLをクリックで「全て選択」を出来るように設定〜

Blogカスタマイズ56のテキストエリア(textarea)の延長がこれにあたると思うのですが、
調べてみたら、「パンパでガウチョ」さんのところでご紹介されていました。感謝致します♪

私の場合は、CSSの trackback_url に background-color を設定しているのですが、
何故か「全て選択」を設定するとデザインが崩れてしまうので、ちょっと小細工をして設定してあります。
大抵の場合は、基本の方で大丈夫だと思われますので、そちらを参考にして下さい。


★トラックバックURLをクリックで「全て選択」を出来るように設定

●基本

「Blogの設定/管理」→「デザインの設定」→「スタンダード」→「CUSTOM」→「HTMLの編集」→「個別記事」
(下記のタグは「この記事へのトラックバックURL」の文字の後ろあたりです)

変更前
<div class="trackback-url"><$ArticleTrackBackUrl$></div>
      ↓
変更後
<input type="text" name="trackback_url" size="50" value="<$ArticleTrackBackUrl$>" readonly="readonly" class="trackback-url" onfocus="this.select()" />

※文字色や背景色、枠線色などはCSSの .trackback-url で設定することが出来ます。

color…文字色
font-size…文字の大きさ
font-weight文字の太さ
margin…外側との余白
padding…内側の余白
border…枠線
background…背景



●私用の改造方法

HTMLの変更

変更前
<div class="trackback-url"><$ArticleTrackBackUrl$></div>
      ↓
変更後 (下の段はIE用のトラックバックURLコピーボタンのタグです)
<div class="main2"><input type="text" name="trackback_url" size="63" value="<$ArticleTrackBackUrl$>" readonly="readonly" class="trackback-url" onfocus="this.select()" />
<p class="trackback-url"><input type="button" value="トラックバックURLをコピー(IEのみ)" onClick="JavaScript:window.clipboardData.setData('text','<$ArticleTrackBackUrl$>')"></p></div>

CSSの追加

.main2{
padding:0px 0px 5px 40px;
background-color:#c5dc60;
}

※余白と背景色のみを .trackback-url からコピーし、.trackback-url の方の background-color を削除しました。



 ■【堀江貴文・ホリエモンもオススメ!】 パソコン教室!397時間動画パソコン教室DVD4枚組!
   ホームページ作成、オフィス(ワード、エクセル、パワーポイント、アクセス)2003/2007、Photoshop、Illustrator、Dreamweaverなど
   29ジャンルが自宅で学べます!
 ■離婚大全集〜圧倒的有利に離婚する方法〜
   離婚経験者の専門家が、27冊の書籍やテレビでは語れない裏ワザがここに。
 ■運動なし!代謝を高めて無理なくやせるDLダイエットサポート 太らない身体が目標!
 ■【15秒筋トレ】自宅でお金をかけない肉体改造! 目標はゴリマッチョ?細マッチョ?
 ■1,353人のメガネ使用者がわずか3日で視力が1.0に!!見える!驚異の視力回復法 自宅で簡単に視力アップ!
 ■【ホリエモンブログ】で紹介されました!【せどり】でリッチ☆に!最強せどりツール【せどリッチforCD】
 ■ダウンロード販売と人と人をつなぐコミュニティ・コマースのインフォカート
 ■引っ越しを考えている方必見!すごいっ!
  ・全国賃貸情報【アパマンショップ】

  ・引越し一括見積もりサイトの決定版!【引越大手比較.com】

 ■ロリポップサーバーのドメインが65種類 → 85種類に!!初心者でも安心なサービスがあります♪

 ■ ダイエット商品人気ランキング
  この夏はみんなのオススメダイエットにチャレンジ!
 ■ラブコスメティックすごいっ!
  人に言えない身体の悩みをすっきり解決しましょう♪

よろしければ人気blogランキングにご協力を!

この記事へのトラックバックURL

  迷惑トラックバック対策のため、トラックバックはこちらでチェックした後、アップさせて頂いておりますので、ご了承下さい。

(Cookieに投稿者情報を記憶します)
 
コメントをプレビューする
ご利用のブラウザの設定ではご利用になれません。