4月2012

IllustratorとPhotoshopの練習

CSSに書かれた背景画像をゲットする方法

ボタンとか、画像を背景扱いにして、CSSに書くことって、よくあります。
でも、あとから、その画像ファイルを探すの結構たいへん。とくに、CSSがHTMLファイルと離れたところにあって、相対パスで書いてあって…うんぬんうんぬんとなると、「1つディレクトリ上がって、下がって…」とぐるぐる回っちゃって、ワケ分からなくなります。

まあ、キホンといえばキホンかもしれないですけど、見習は、かなーりニガテ。
でも、Firefoxのアドオン、Firebugを使えば、カンタンに行きました。って、見習、いままで何やってたんだか。とほほ。やっぱり、見習駆け出しさんねと思います。

ということで、背景画像を取り出す方法いってみます。

Firefoxで目的のページを見ます。

では、この「森のみどころMAP」の画像を保存してみます。

まず、森のみどころMAPを右クリックし、「要素を調査」を選択します。これでFirebugが開きます。

ただ、ここでFirfoxのバージョン10以降は、ちょっとメニューが違います。
というのはfirefox10からは、Fireugをいれなくても、開発者用のツールが備わっていて「要素を調査」ができるようになりました。でも、Firebugのほうの「要素を調査」のほうが、見習にとっては簡単にファイルの場所が探しやすいです。Firefox10では、右クリックして「要素を調査」を選ぶと、FireFoxのほうの機能を呼び出してしまうので、「Firebugで要素を調査」を選びます。これできっちりFirebugのほうの要素を調査が使えますぅ。

この状態で、該当するあたりのHTMLとかCSSが見れます。

firebugの右側にある、スタイルのところをクリックすると、「要素を調査」を選んだところの要素についてのCSSが見れるので、backgroundとかのところを探し、background-imageを見つけます。該当するCSSのところにマウスオーバーすると、その画像が見えるので、それを頼りに探します。

目的の画像を見つけたら、その場で右クリックし、「新しいタブで画像を開く」を選びます。

新タブ

新タブで画像ファイルが表示されたところ

するとFirefoxの新タブで、画像ファイルが開かれます。

上のURLのところを見ると、画像ファイルのURLも出てます。これを見ておけば、あとから同じところへファイルをFTPでアップロードするときにも、間違えないで済みます。

新タブに表示された画像の上で、右クリックし、「名前を付けて画像を保存」を選択します。

画像を保存ダイアログが出るので、名前を付けて保存します。

やった。でけた。

とりあえず、背景画像がゲットできました。これから加工の道のりが始まります。とほほ。がんばろ。

Firefoxが自動更新されてないみたいだけど…

なんか、Firefox、私のだけ、見た目違う!!
バージョンがちがう?あれれ?
でも、Firefoxって、自動で最新のに更新されてるんじゃ…。と思ってました。

さてさてと、バージョン見てみました。あれぇ、3.X(下がうんと古いのになってました)。ありゃ、やたらに古い。自動更新してないじゃん。

ということで、Firefoxのヘルプから「ダウンロードした更新を今すぐ適用」してみたのですが、ありゃりゃ、うまくいかないです。

あちこちのサイトみても、この場所にあるメニューって、「ソフトウェアの更新を確認」でしょ。そもそも。とりあえず、進んでみましたが、やっぱり、ダメ。

それに、なんか、へん。というか、いまのバージョンは、3.6.28なのに、3.6.23を「更新をインストールする準備ができました」っていったい…。

はてはてと思ってグーグル先生に聞いてみました。

☆どうやらユーザーの権限がポイント

ははーん。Firefoxは、インストールした領域に書き込む権限がないと、うんたらこんたら、うにゃうにゃうにゃと…あります。そういえば、Firefoxインストールしたのは、管理者権限あるユーザでログインしたとき!
どうやら、FireFoxは管理者権限がない人には、なかなかさせてくれないことがあるみたい…。更新機能も、そう。

ということで、管理者権限あるユーザーでログインしなおしです。

ヘルプから進んでいくと、おぉぉ、ちゃんと「ソフトウェアの更新を確認」になってます。

「ソフトウェアの更新を確認」を選ぶと、でたー!「ソフトウェアの更新 新しいバージョンが見つかりました」

うきうきと、「新しいバージョンを入手する」をクリックします。

互換性のないアドオンはどうしますかぁといったようなダイアログがでてくるので、はいはいとOKしていき、ダウンロードへと進みます。

「更新をインストールする準備ができました」とでるので、「Firefoxを再起動」をクリックします。このあと、UACの画面が出るのでOKをクリックします。

やったー。こんどは、更新できました。晴れてバージョン11です。

☆管理者権限持たないユーザーだからOKってわけじゃない?

でも、管理者権限ないユーザーだと、アップデートできなかったのね。と驚きです。
どうも、見習が使っていたのは、最初、Firefoxの3.6未満だったようです。Firefox 3.6から、管理者権限のないユーザーにもセキュリティアップデートの通知が表示されるようになったそうで、通知が出てば、「おぉ、アップデートしなきゃね、管理者でログインログイン」となったのですが…(たぶん)。
それ未満だったので、そういった通知もなく…。おっくれてるー、になってしまってたみたいです。

でも、古いブラウザって、セキュリティに難ありって言います。セキュリティのためと思っていたのですが、むしろあだになってってこと?

やっぱり、セキュリティって、ひとすじ縄では行かないのねと、身を引き締めた見習です。がんばるぞー。