--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
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タグになっています。つまり、この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編集で追加するコード
下のコードについて詳しくはコチラ→引用に枠線を設定しましょう(CSS編集) | yozoの気が向いたと記2.0
/*枠線囲み*/
.type1
{
padding: 5px;
margin : 15px 20px 15px;
border: 1px #cc6600 dotted;
background:#ffffff;
}

blockquote-2.gif

このようにして、ここの記事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からのお願い
 この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、自己責任で行ってください。そして、必ず設定等のバックアップを取っておくようにしてください。
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m


↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

 さらに、%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
人気blogランキング

スポンサーサイト

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

メイン

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

トラックバックURL


コメント

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

コメント

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

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

コメント

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

コメント

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

コメント

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

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

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

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

コメント

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

>また良く分からないけど来ちゃった☆
ヾ(@⌒▽⌒@)ノワーイ!いつも本当に応援ありがとーございまっす♪m(_ _)m

>ホントいつも思うけど、yozoちゃんの説明はとっても丁寧だよね。
(∩。∩;)ゞテレテレ・・・いえいえ♪それほででもないのですが、enuちゃんに
そう言ってもらえると、とっても自信になりまっす。(゚-゚*)(。。*)ウンウン

>なので、応援クリックに来ました☆ぽち☆
ヽ(▽^〃ヽ)ヽ(〃^▽^〃)ノ(ノ〃^▽)ノ ワーイワーイワーイ♪いつも応援クリックまで
ありがとーございまっす♪ (o*。_。)oペコッ(o*。_。)oペコッ(o*。_。)oペコッ

コメント

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

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

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

コメント

>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をエディタで開いてくださいね。タイトルリンクの記述(2行)があればOKでっす。
次に、user.jsの保管場所の確認をしてくださいね。
お時間あるときにでも試してみてください。\(*⌒0⌒)bがんばっ♪

コメント

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

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

コメント

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

>こちらにもおじゃまいたします<(_ _*)>
ラッシャイ!o(^-^o)(o^-^)oイラッシャイ o(^-^o)(o^-^)oラッシャイ!

>yozoさまのおかげさまさまで、問題が解決して
>めちゃ便利になって、万々歳のmioでございます。
オオオオォ……(ノ゚ο゚)ノミ(ノ _ _)ノコケッ!! 『yozoさま』ですか!(;^_^A アセアセ・・・
でも、『おかげさまさま』ですね。(^ー^* )フフ♪
ちょっとだけお役に立ててよかったでっす♪安心しました。(^○^)

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

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

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。