fc2ブログ
2007年04月06日

リンク先のファイルの種類を表示するuserContent.cssの設定(Firefox)

 リンクは安易にクリックしないほうが安全です。特にリンク先がファイルの場合、リンクされたファイルの種類によっては開かない方がいい場合もありますね。
 例えば「☆★☆.exe」ファイルはWindowsの実行ファイル(EXEファイル)です。そんなファイルへのリンクを安易にクリックするのはセキュリティ上、問題がありますね。また、「☆★☆.pdf」ファイル(PDFファイル)へのリンクの場合は、表示されるのが極端に遅くなるので必要なとき以外は避けたいと思う人も多いと思います。

※Adobe Readerを起動して、[編集]-[環境設定]-[インターネット]-[Web ブラウザオプション]-[PDFをブラウザに表示]のチェックを外せば、PDFがブラウザ上には表示されず自分のパソコンにダウンロードされてから表示されます。

 Firefoxではリンク先のファイルの種類を表示させることができるのです。そんな表示をさせるようにuserContent.cssにコードを追加してみましょう。

 下のコードをuserContent.cssの好きな場所に追加して上書き保存し、Firefoxを再起動するだけです。userContent.cssの保管場所はこの記事の追記にあります。
 拡張子に表示させたいファイルの拡張子を記述します。そして、このファイルへのリンクの場合に表示させる文字は、[表示させたい文字]の部分に記述しましょう。 あとは文字のサイズ等は自分の好みに合わせてCSSで設定してください。

a[href$=".拡張子"]:after
{
content:"[表示させたい文字]";
font-size:x-small; /*文字のサイズ*/
font-weight:normal; /*文字の太さ*/
color:#ff3300; /*文字の色*/
margin:auto 0.3em; /*リンク文字との間隔 autoはブラウザの自動調整*/
}

 下のコードはリンク先のファイルがEXEファイルの場合は[EXE危険]、PDFファイルの場合には[PDF重い]、と表示させる設定です。


070406userContent.jpg

userContent.cssの追加の例

a[href$=".exe"]:after
{
content:"[EXE危険]";
font-size:x-small;
font-weight:normal;
color:#ff3300;
margin:auto 0.3em;
}

a[href$=".pdf"]:after
{
content:"[PDF重い]";
font-size:x-small;
font-weight:normal;
color:#ff3300;
margin:auto 0.3em;
}


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


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


userContent.cssの保管場所はコチラ
【リンク先のファイルの種類を表示するuserContent.cssの設定(Firefox)の続きを開く】
スポンサーサイト



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

2007年03月30日

拡張機能xpiファイルのインストールの方法(Firefox)

2007/04/07 インストールがキャンセルされる場合を追記しました。

 色々なサイトで紹介されているFirefoxの拡張機能(Extension)をインストールするときに困ったことありませんか?

 通常はインストールボタンをクリックすると、インストールするかどうか確認されるので、[今すぐインストール]をクリックするだけです。そして、Firefoxを終了して、もう一度Firefoxを立ち上げれば拡張機能が使用できますね。[これをFirefoxの再起動といいます]

 ところが、インストールボタンをクリックすると、インストールがキャンセルされることもあるようです。そんなときは、インストールボタンを右クリックして、[名前をつけてリンク先を保存する]を選択して『CopyURLplus-1.3.2_JP2.xpi』のように、末尾(拡張子)がxpiとなったファイルをダウンロードします。このxpiファイルはダブルクリックしても「このファイルを開けません。」とメッセージがでるだけで、インストールできないのです。こうなってしまって、ダウンロードした拡張機能(Extension)のインストールをあきらめたことありませんか?そして、この気味の悪いxpiファイルを削除してしまったとか・・・?(yozoは経験者です。(* v v)。 ハズカシ)

 実はこのxpiファイルは、Firefoxのウインドウにドラッグ&ドロップするだけで、インストールできます。ドラッグ&ドロップすると、インストールボタンをクリックしたのと同様にインストールするかどうか確認されますから、[今すぐインストール]を選択してインストールし、Firefoxを再起動するだけなんです。

 また、拡張機能(Extension)のダウンロードと表示されている場合もあります。この場合も同様にxpiファイルをダウンロードして、Firefoxのウインドウにドラッグ&ドロップするだけで、インストールできます。Firefoxを再起動するのを忘れないようにしましょう。

 このxpiファイルのxpiはX(Cross) Platform Installの省略でMozilla.orgが追加機能をインストールするために開発したものです。


 これでFirefoxの拡張機能(Extension)のインストールは簡単にできますね。あっという間にインストールできるし、あっという間にアンインストールできるのが本当にすばらしいと思います。


拡張機能(Extension)について
  • インストールの方法(3通り)
    1. インストールボタンをクリックしてFirefoxを再起動する。
    2. インストールボタンをクリックしてもダウンロードがキャンセルされてしまう場合は、インストールボタンを右クリックして[名前をつけてリンク先を保存する]を選択し、xpiファイルをダウンロードする。そのxpiファイルを、Firefoxのウインドウにドラッグ&ドロップしてFirefoxを再起動する。
    3. ダウンロードしたxpiファイルを、Firefoxのウインドウにドラッグ&ドロップしてFirefoxを再起動する。
  • アンインストールの方法
    Firefoxのメニューの[ツール]-[アドオン]で、アンインストールしたい拡張機能(Extension)を選択して[削除]する。

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

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

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

2007年03月09日

FirefoxのタブをIEで開くIE Tabを導入する(Firefox)

 Firefoxについて色々な機能を勉強中なのですが、Copy URL+について記事をあげて、さぁ、次は何を・・・と思う間もなく、お友達の果報は寝て待て(-_☆)の管理人Pavlobaさんの記事がUPされていました。お邪魔してみると、FirefoxのタブをIEで開くという信じがたいものがあるとのこと!ヽ(*'0'*)ツ ワァオォ!!それではと早速、インストールしてみました。

インストールの方法
  あっという間にインストールできるし、あっという間にアンインストールできるので気軽に試すことができますよ♪(*^-^)

 インストールはコチラ→IE Tab | Firefox Add-ons | Mozilla Corporation
 このページを開いて、[Install now]ボタンをクリックするとインストール完了です。その後、Firefoxのウインドウを閉じて一旦終了させてから、再度、Firefoxを起動するようにしてください。(これがFirefoxの再起動です。)

 また、[Install now]ボタンを右クリックしてie_tab-1.3.1.20070126-fx+fl+mz+zm-windows.xpiをダウンロードした場合は、そのファイルをFirefoxのウインドウにドラッグ&ドロップすると、インストールするかどうか確認されます。そこで[今すぐインストール]を選択してインストールし、Firefoxを再起動してください。


※IE Tabをアンインストールしたいときは、Firefoxのメニューの[ツール]-[アドオン]でIE Tabを選択して[削除]すればOKです。

  1. まずは、yozoの気が向いたと記2.0のトップページをFirefoxで開きました。
    記事サイズにするために、ウィンドウサイズを縮小しています。
    ietab-ff.gif
  2. トップページのリンクを右クリックして[リンクをIEに切り替て開く]を選択します。
    初めてIEに切り替るときは表示までに時間がかかります。
    ietab-ie.gif
  3. Pavlobaさんの仰るように本当にIEでタブが開かれました。(ノ´▽`)ノオオオオッ♪
  • 上の2つの画像にあるように、IE Tab をインストールすると一番下のステータスバー(右下)にアイコンが表示されるようになります。このアイコンをクリックするとFirefoxとIEの表示の切り替えができます。
    (アイコンを右クリックしてIE表示させたいサイトの登録も簡単にできます。)
  • 表示されたページで右クリックすると[ページをIEに切り替えて表示]というメニューがあるので、これでもIEに切り替えできます。
  • ページ内のリンクで右クリックすると[リンクをIEに切り替えて開く]というメニューがあるので、これを選択すると別タブでリンク先がIEで開かれます。

 このIE Tabの使い方については、えむもじらの管理人levelさんの記事Firefox のタブの中で IE を起動する IE Tab - えむもじらを参考にさせていただきました。levelさん、ありがとーございまっす♪ m(_ _)m

 参考までに、ちょっと調べてみました。『Firefoxのタブで2つ、IE Tabで2つ』というように4つのWebページを開いたとき、Windowsのタスクマネージャによると、使用メモリは約300MBでした。また、同じ4つのページを『Firefoxのタブで2つ、IEを立ち上げてIEのタブで2つ』と表示させたときの使用メモリは約350MBでした。(この数値は比較した環境で、ブラウザ以外のソフトウェアも動いているため、いずれの場合も使用メモリーが大きくなっています。)簡単に結論づけるわけではありませんが、少なくともyozoんちではFirefoxとIEを別ウィンドウで使用するよりも、FirefoxでIE Tabを使った方が動作が軽いみたいです。


 IE Tabをインストールしてからは、自分のサイトやブログをFirefoxとIEで表示をチェックするのがとても楽になりました。また、巡回先のサイトやブログもその都度切り替えして見やすい方のブラウザを選択できるところがとても気に入っています。
 ただし、あくまでFirefoxが母体ですから、IE Tabの表示のときには、Firefoxの拡張機能(CopyURL+など)が使用できないのは当たり前なのですが、ちょっぴり残念です。

 最後にこれはyozoの個人的な活用法なのですが、IE Tabだと下のように、FirefoxのタブとIEのタブのそれぞれでBlogPetにログインできます。つまり、Firefoxでうさも、IEでうさみちゃんという使い分けができるので重宝(?)してます。同じブログサービスで複数アカウントをもっている場合も両立できます。
(だから何?って言われたらそれまでなんですけどね。(;^_^A アセアセ・・・)

blogpet2login.gif
yozoblogはうさもの飼い主としてのyozoです。
yozoblog2はうさみちゃんの飼い主としてのyozoです。

 ※IE Tabをアンインストールしたいときは、Firefoxのメニューの[ツール]-[アドオン]でIE Tabを選択して[削除]すればOKです。

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


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

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

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ランキング

【CopyURL+を活用する(Firefox)の続きを開く】

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

2007年02月20日

CopyURL+を導入する(Firefox)

 2007年02月15日のここの記事Firefoxを使用するにあたって | yozoの気が向いたと記2.0で書いたように、2007年02月20日現在yozoにとってのメインブラウザになっているのですが、これは、お友達の果報は寝て待て(-_☆)の管理人PavlobaさんのおすすめのCopy URL+というFirefoxの拡張機能が決め手となったのです。

 Copy URL+というのは、下の図のようにコンテキストメニュー(平たく言えば、右クリックのメニューのことです。Mac OSの場合はcontrol + クリック。)からページタイトルやアドレス、文字などの情報をコピーすることができるようになるFirefox用の拡張機能のことです。


contextmenu.gif

 Firefoxのカスタマイズのために追加した3つのファイル(user.jsuserChrome.cssuserContent.css)のうち、user.jpを使います。
この3つのファイルの追加の方法はコチラ→Firefoxを使用するにあたって | yozoの気が向いたと記2.0


  1. まずは、Copy URL+をインストールします。
    電網探題様の記事電網探題: Copy URL +で、Copy URL + 1.3.2 日本語版 第二版 [1.0]-[2.0.0.*]を右クリックして、[名前を付けてリンク先を保存]して、自分のパソコンにダウンロードします。
     次に、ダウンロードしたCopyURLplus-1.3.2_JP2.xpiを、Firefoxのウインドウに、ドラッグ&ドロップすると、インストールするかどうか確認されるので、[今すぐインストール]をクリックし、Firefoxを再起動してください。
    ※アンインストールするには、Firefoxのメニューの[ツール]-[アドオン]で[削除]を選択してください。
  2. user.jsに記述すると、user.jsがあるフォルダにあるprefs.jsにも自動的に記述されますので、万が一に備えて、user.jsの編集を始める前に、prefs.jsファイルのバックアップをしておきましょう。
     この2つのファイルを保管しているフォルダを開くには、まず、[スタート]-[ファイル名を指定して実行]で%APPDATA%と入力して、[OK]をクリックします。画面の中の「Mozilla」→「Firefox」→「Profiles」→「任意の文字列.Default」フォルダの中にあります。
    Mozilla
    └ Firefox
        └ Profiles
            └ 任意の文字列.Default
                ├ prefs.js
                └ user.js
  3. user.jsを開いて、次のように記入して、上書き保存してください。
    user_pref('copyurlplus.menus.1.label', 'タイトルリンク');
    user_pref('copyurlplus.menus.1.copy', '<a href="%URL%">%TITLE%</a>');

    ※user.js の文字コードは UTF-8にしておきましょう。
    charset.gif
    この画像は、Windowsのメモ帳で、[名前をつけて保存する]を選択したときのものです。
  4. Firefoxを再起動して、お好みのWebページを開いて、ウインドウ内で、「右クリック」-[Copy URL+]-[タイトルリンク]を選択します。
  5. タイトルリンクをコピペしたい部分で、[Ctrl]+[v]([編集]-[貼り付け])としてHTMLコードを貼り付けします。
     2007年02月15日のここの記事Firefoxを使用するにあたって | yozoの気が向いたと記2.0の場合は下のようなHTMLコードが貼り付けされます。
    <a href="http://yozoblog2.blog63.fc2.com/blog-entry-492.html">Firefoxを使用するにあたって | yozoの気が向いたと記2.0</a>

 どうですか?あっという間に、記事タイトルとリンクのHTMLコードが生成されましたね。yozoは記事にリンクをはるときには、これをフル活用しています。(^○^)
 この記事は導入編ですから、ここまでの内容にしていますが、Copy URL+の配布元の記事mozdev.org - copyurlplus: customizeをはじめ、多くの方が色々なカスタマイズをされています。Web検索でも、たくさんヒットすると思いますので探してみてくださいね。
 なお、近いうちに、ここのブログでも、活用編ということで、yozoが使っている簡単なカスタマイズについて記事にしたいと思っています。



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

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

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

メイン Old≫