CopyURL+を活用する(Firefox) yozoの気が向いたと記2.0

2007年02月27日

CopyURL+を活用する(Firefox)

　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タグになっています。つまり、この２行のセットでカスタマイズしていたというわけですね。

user.jsに記入するときの書式は下の通りです。

user_pref('copyurlplus.menus.n.label', 'label');
user_pref('copyurlplus.menus.n.copy', 'action');

※nは上下２行のセットで必ず同じ数字にしてください。順に1,2,3,4･･･というように揃えておくといいでしょう。user.jsに追加記入するときは、２行セットごとに間に空行をいれて追加しても動作に問題はないと思います。

　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編集で追加するコード

下のコードについて詳しくはコチラ→引用に枠線を設定しましょう（CSS編集） | yozoの気が向いたと記2.0
/*枠線囲み*/
.type1
{
padding: 5px;
margin : 15px 20px 15px;
border: 1px #cc6600 dotted;
background:#ffffff;
}

このようにして、ここの記事CSS編集をしましょう | yozoの気が向いたと記2.0の一部を選択した場合は下のようになります。なお、この部分は、ドラッグして選択した部分がはっきりわかるようにyozoが着色しています。実際は文字だけになりますのでご注意ください。m(_ _)m

ブロックレベル要素
h1～h6(見出し)、div（範囲）、ｐ（段落）、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（範囲）、ｐ（段落）、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からのお願い

　この記事のやり方は、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（範囲）、ｐ（段落）、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（範囲）、ｐ（段落）、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

スレッドテーマ:Firefox:コンピュータ

メイン

≪New シャットダウンデー　3月24日はコンピュータなしデー | Top | はじめての方へ Old≫

トラックバックURL

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

yozoさん、こんばんは。早速、『引用』も『参考記事』も導入させていただきました。自分で、CSSカスタマイズした状態で、コピペできるって本当にすごいですね。タイトルリンクだけでも、十分活躍してくれる機能ですが、さらに手放せなくなりました。いつも情報ありがとうございます。m(_ _)m

Posted by yolip at 2007.02.27 22:05 | edit

yozoさん、こんばんは♪(o・ω・)ﾉ
(ノ゜ω゜)ノ*.オオォォォォォォォーこれは分かりやすい説明ですね。
記事タイトルの部分はそのまま使わせてもらっているのですが、
引用の部分はyozoさんとは記事の書き方が違うので
自分なりにカスタマイズしてみようと思います。
素敵な記事をありがとうございました。ペコリ(o_ _)ｏ))

追伸　気になる記事に登録したのですが、今日は１個だけなので
多分うさびが記事を投稿してくれないと思いますので前のうさびの気になる記事に
勝手ながら追記を入れさせていただきたいと思っています。
よろしくお願いします。ペコリ(o_ _)ｏ))

Posted by まゆび at 2007.02.28 17:22 | edit

こんにちはー。yozoちゃん♪
また良く分からないけど来ちゃった☆
ホントいつも思うけど、yozoちゃんの説明はとっても丁寧だよね。
分からない私が言うのもおかしいかも知れないけど、見てれば使いやすく記載されてるのは分かるよー!!!
なので、応援クリックに来ました☆
ぽち☆

Posted by enu at 2007.02.28 17:22 | edit

＞yolipさん、こんばんはー♪
早速ご利用くださって、ありがとーございまっす♪
ちょっとばかりお役にたててうれしいですよ。m(_ _)m　
　yozoも基本はやっぱりタイトルリンクなのですが、引用記事を書く際には、
絶大ですから、こっしょり『参照記事』も活用していますよ。(*^-^)

Posted by yolipさんへ at 2007.02.28 19:40 | edit

＞まゆびさん、こんばんはー♪

＞(ノ゜ω゜)ノ*.オオォォォォォォォーこれは分かりやすい説明ですね。
(//∇//(//∇//(//∇//) ﾃﾚﾃﾚ　いやぁ～♪その気になって読んでくださったら、
同じことはたぶんできるだろうって思って書いてはいるのですが･･･(///o///)ゞﾃﾚﾃﾚ

＞引用の部分はyozoさんとは記事の書き方が違うので
＞自分なりにカスタマイズしてみようと思います。
(*^▽^*)ﾉﾊｰｲもちろん、CSS等まゆびさんのお好みで変更してくださいね。
タイトルリンクほどではないでしょうが、かなり役に立つと思いますよ。(^○^)

＞勝手ながら追記を入れさせていただきたいと思っています。
わぁ♪ブクマしてくださったのですね。しかも、うさびちゃんのブクマ記事に
追記までしてくださって、お手数かけます。ありがとーございまっす♪m(_ _)m

Posted by まゆびさんへ at 2007.02.28 20:51 | edit

＞enuちゃん、こんばんはー♪

＞また良く分からないけど来ちゃった☆
ヾ(＠⌒▽⌒＠)ﾉﾜｰｲ!いつも本当に応援ありがとーございまっす♪m(_ _)m

＞ホントいつも思うけど、yozoちゃんの説明はとっても丁寧だよね。
(∩。∩;)ゞﾃﾚﾃﾚ･･･いえいえ♪それほででもないのですが、enuちゃんに
そう言ってもらえると、とっても自信になりまっす。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ

＞なので、応援クリックに来ました☆ぽち☆
ヽ(▽^〃ヽ)ヽ(〃^▽^〃)ﾉ(ﾉ〃^▽)ﾉﾜｰｲﾜｰｲﾜｰｲ♪いつも応援クリックまで
ありがとーございまっす♪　(o*｡_｡)oﾍﾟｺｯ(o*｡_｡)oﾍﾟｺｯ(o*｡_｡)oﾍﾟｺｯ

Posted by enuちゃんへ at 2007.02.28 20:55 | edit

yozoさん、こちらにもおじゃましてます<(_ _*)>
うむぅ、これ難しいデスわたしには＾＾；

一通り導入作業をしまして、再起動後に右クリックしてみましたが
yozoさんのように、メニューに「タイトルリンク」とか「引用」って出ないんです＞＜
なぜかなぁ･･･どこでミスしてるのかしら；；

本当は、ハイパーリンクの上で右クリックコピーして、
それと同じハイパーリンクコードを生成できたらいいなと思っているのですが･･･
記事中で紹介されているmozdev.org - copyurlplus: customizeを見ますと・・・
%RLINK_HTMLIFIED%　あたりが関係していそうですよね。
自分でも色々試してみたのですが、やはりうまく行かずじまいっ！
ぐすん。くじけました･･･＿|￣|○ ∥

Posted by mio at 2007.03.25 18:55 | edit

＞mioさん、こんばんはー♪

＞うむぅ、これ難しいデスわたしには＾＾；
(≧▽≦;)ｱﾁｬｰ　yozoのレスが遅れている間に、再度チャレンジされたのですね。
プロファイルに追加したuser.jsファイルの問題だと思うのですが･･･
もしかしたらuser.jsの場所が違うとか、拡張子がuser.js.txtになっている･･･etc
失礼ながら、きっとささいなミスに違いないとは思いますが･･･(＞▽＜;; ｱｾｱｾ

＞%RLINK_HTMLIFIED%　あたりが関係していそうですよね。
yozoもタイトルリンクとは別に、mioさんと同じように記事内リンクをコピペできないかって思って試したことがありますが、yozoの設定が悪いのか？Firefox2.0に対応していないのか？はっきりわかりませんが、機能しませんでした。(o*｡_｡)oﾍﾟｺｯ

　とりあえず、mioさんの場合は、user.jsに書いた記述が反映されないことを解決しないと、
Copy URL+のカスタマイズが全くできないことになりますもんね。(^-^;
及ばずながらyozoも一緒に勉強しまっす♪くどいですが、念のため、user.jsをエディタで開いてくださいね。タイトルリンクの記述（２行）があればＯＫでっす。
次に、user.jsの保管場所の確認をしてくださいね。
お時間あるときにでも試してみてください。＼(*⌒0⌒)ｂがんばっ♪

Posted by mioさんへ at 2007.03.26 17:59 | edit

こちらにもおじゃまいたします<(_ _*)>
yozoさまのおかげさまさまで、問題が解決してめちゃ便利になって、万々歳のmioでございます。

＞Firefox2.0に対応していないのか？
なるほど、そういう可能性も考えられるのですね。ふむふむ。
これが出来たらさらにますます便利なのですけどねぇ～。
でもっ！「タイトルリンク」はブログ記事を書くには本当に便利で素晴らしいです。
感動の機能でした♪
よいものを教えてくださってありがとうございました！！

Posted by mio at 2007.04.01 00:00 | edit

＞mioさん、おはよーございまっす♪

＞こちらにもおじゃまいたします<(_ _*)>
ﾗｯｼｬｲ!o(^-^o)(o^-^)oｲﾗｯｼｬｲ o(^-^o)(o^-^)oﾗｯｼｬｲ!

＞yozoさまのおかげさまさまで、問題が解決して
＞めちゃ便利になって、万々歳のmioでございます。
ｵｵｵｵｫ……(ﾉﾟοﾟ)ﾉﾐ(ﾉ _ _)ﾉｺｹｯ!!　『yozoさま』ですか！(;^_^A ｱｾｱｾ･･･
でも、『おかげさまさま』ですね。(^ー^* )ﾌﾌ♪
ちょっとだけお役に立ててよかったでっす♪安心しました。(^○^)

＞なるほど、そういう可能性も考えられるのですね。ふむふむ。
英文の読み違いかもしれませんけど、とても便利になるハズなのにぃ～っと
色々やってみましたが、できなくて地団駄を踏みましたよ。(ﾟｍﾟ*)ﾌﾟｯ

＞でもっ！「タイトルリンク」はブログ記事を書くには本当に便利で素晴らしいです。
一度設定して使ってしまうと、病みつきになっちゃいますよね。(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
これで言及リンクを入れるときは、一瞬ですからやめられませんよ。（ΦωΦ）ふふふ･･･

Posted by mioさんへ at 2007.04.01 11:51 | edit

yozoの気が向いたと記2.0

BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪

スポンサーサイト