2007年02月20日の記事CopyURL+を導入する(Firefox) | yozoの気が向いたと記2.0で、Firefoxの拡張機能Copy URL+の導入までを記事にしました。今回はyozo自身が愛用しているCopy URL+のカスタマイズについて書きたいと思います。
Copy URL+のカスタマイズ例「タイトルリンク」の場合、user.jsへの記述は下のようになっていました。
user_pref('copyurlplus.menus.1.label', 'タイトルリンク');
user_pref('copyurlplus.menus.1.copy', '<a href="%URL%">%TITLE%</a>');
上はlabelとして、'タイトルリンク'となっています。これはメニューのときに表示される文字です。下はcopyで、'<a href="%URL%">%TITLE%</a>'となっています。これはコピーされるHTMLタグになっています。つまり、この2行のセットでカスタマイズしていたというわけですね。
user.jsに記入するときの書式は下の通りです。
user_pref('copyurlplus.menus.n.label', 'label');
user_pref('copyurlplus.menus.n.copy', 'action');
※nは上下2行のセットで必ず同じ数字にしてください。順に1,2,3,4・・・というように揃えておくといいでしょう。user.jsに追加記入するときは、2行セットごとに間に空行をいれて追加しても動作に問題はないと思います。
Copy URL+の配布元の記事mozdev.org - copyurlplus: customizeによると、カスタマイズに使用できる主な独自変数(みたいなもの?)は下の通りです。
- %URL%
表示しているページのURL - %TITLE%
表示しているページのタイトル - %SEL%
ドラッグして選択した文字(ただし、文中のリンクは含みません。) - %LOCAL_TIME%
自分のパソコンの時刻
今度は、%SEL%を活用して、ドラッグして選択した文字を引用するタグを生成してみましょう。下のようにuser.jsに記入してください。※¥nは改行を意味します。
user_pref('copyurlplus.menus.2.label', '引用');
user_pref('copyurlplus.menus.2.copy', '<blockquote cite="%URL%" title="%TITLE%" class="type1">%SEL%¥n<span style="font-size:10px;"><a href="%URL%">%TITLE%</a>より一部引用しました。</span></blockquote>');
引用タグの余白や囲み線等の設定は、下のようなCSSコードと追加しました。
このようにして、ここの記事CSS編集をしましょう | yozoの気が向いたと記2.0の一部を選択した場合は下のようになります。なお、この部分は、ドラッグして選択した部分がはっきりわかるようにyozoが着色しています。実際は文字だけになりますのでご注意ください。m(_ _)m
ブロックレベル要素
h1?h6(見出し)、div(範囲)、p(段落)、blockquote(引用)、table(テーブル)、ol(番号付きリスト)、ul(番号なしリスト)、form(フォーム)など一つのまとまった単位になっている要素のことです。
CSS編集をしましょう | yozoの気が向いたと記2.0より一部引用しました。
CopyURL+からの貼り付けコード
<blockquote cite="http://yozoblog2.blog63.fc2.com/blog-entry-436.html" title="CSS編集をしましょう | yozoの気が向いたと記2.0" class="type1">
ブロックレベル要素
h1?h6(見出し)、div(範囲)、p(段落)、blockquote(引用)、table(テーブル)、ol(番号付きリスト)、ul(番号なしリスト)、form(フォーム)など一つのまとまった単位になっている要素のことです。<span style="font-size:10px;"><a href="http://yozoblog2.blog63.fc2.com/blog-entry-436.html">CSS編集をしましょう | yozoの気が向いたと記2.0</a>より一部引用しました。</span></blockquote>
色々工夫するとより便利に使えそうですね。参考として下の追記にて、%LOCAL_TIME%を使って日時を表示させ、枠線にもタイトルを設定する場合のことも紹介しておきました。興味のある方はどうぞご覧になってくださいね。(^○^)
この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
また、言うまでもないことですが、この記事を参考にされるのでしたら、
自己責任で行ってください。そして、必ず設定等のバックアップを取っておくようにしてください。 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m

さらに、%LOCAL_TIME%を使って日時を表示させるとともに、枠線にもタイトルを設定してみました。※¥nは改行を意味します。
user_pref('copyurlplus.menus.3.label', '参考記事');
user_pref('copyurlplus.menus.3.copy', '<blockquote cite="%URL%" title="%TITLE%" class="type1"><div class="boxtitle6">参考記事</div>%SEL%¥n<span style="font-size:10px;"><a href="%URL%">%TITLE%</a>より一部引用しました。(%LOCAL_TIME%)</span></blockquote>');
引用タグの余白や囲み線等の設定は、下のようなCSSコードと追加しました。
CSS編集で追加するコード
下のコードについて詳しくはコチラ→枠線(border)の上にボックスを配置しましょう。(CSS編集) | yozoの気が向いたと記2.0/*全角6字boxtitle*/
.boxtitle6
{
position: relative; /*相対配置*/
top: -1.3em; /* ボックスの高さ調節 */
width:6em; /* ボックスのサイズ*/
margin: 0px auto; /* センタリング*/
padding: 0.1em; /* テキストと枠線の間の余白 */
font-size: 12px; /* 文字サイズ */
text-align:center; /* ボックス内の文字のセンタリング*/
color: #ffffff; /* 文字色*/
background: #ff9900; /* 背景色 */
border: #666666 1px solid; /* 枠線のスタイル */
}
同様にして、ここの記事CSS編集をしましょう | yozoの気が向いたと記2.0の一部を選択した場合は下のようになります。なお、この部分は、ドラッグして選択した部分がはっきりわかるようにyozoが着色しています。実際は文字だけになりますのでご注意ください。m(_ _)m
参考記事
ブロックレベル要素
h1?h6(見出し)、div(範囲)、p(段落)、blockquote(引用)、table(テーブル)、ol(番号付きリスト)、ul(番号なしリスト)、form(フォーム)など一つのまとまった単位になっている要素のことです。
CSS編集をしましょう | yozoの気が向いたと記2.0より一部引用しました。(2007年2月22日 18:08:37)
CopyURL+からの貼り付けコード
<blockquote cite="http://yozoblog2.blog63.fc2.com/blog-entry-436.html" title="CSS編集をしましょう | yozoの気が向いたと記2.0" class="type1"><div class="boxtitle6">参考記事</div>
ブロックレベル要素
h1?h6(見出し)、div(範囲)、p(段落)、blockquote(引用)、table(テーブル)、ol(番号付きリスト)、ul(番号なしリスト)、form(フォーム)など一つのまとまった単位になっている要素のことです。 <span style="font-size:10px;"><a href="http://yozoblog2.blog63.fc2.com/blog-entry-436.html">CSS編集をしましょう | yozoの気が向いたと記2.0</a>より一部引用しました。(2007年2月22日 18:08:37)</span></blockquote>
↓ ぽちっと応援お願いします♪ m(_ _)m

【CopyURL+を活用する(Firefox)の続きを閉じる】