@Mori2ndです。ブログのデザインをカスタマイズしたりすると、ちゃんと表示されているかどうか気になってくるものですね。
設定がうまくいってないとブラウザによっては表示が崩れてしまったりもあるので、そういった意味でも複数のブラウザでチェックしたほうがいいと思いました。
Firefoxはアドオンでいろいろな機能が追加できて、人気のあるブラウザ。
こちらを利用しているユーザーも多いでしょうし、何よりこのブラウザの機能を使ってやってみたかった事があるのです。
Webデザインのチェックに欠かせないアドオンを追加
まずはFirefoxをインストールしてから、こちらのアドオンを追加しました。
Firebug
Firebug :: Add-ons for Firefox
あなたはあらゆる Web ページの CSS、HTML、及び JavaScript をリアルタイムに編集、デバッグ、またはモニタすることが出来ます。
WebページのHTMLやCSSを確認できて、それをリアルタイムに編集できるアドオン。
幅や色を調整したり、ボーダーをつけてみたりとちょっとした確認には持ってこいです。
ここで調整した分を本番環境に反映して仕上げていってます。
気になるブログのデザイン確認にも使えて便利ですよ。
Google Chrome版もありますが、細かい動きが違うようでFirefoxのほうが使いやすい気がしました。
userAgentUpdater
userAgentUpdater :: Add-ons for Firefox
ユーザーエージェントを変更できるアドオン。
当ブログではWPtouchというプラグインを使っていて、iPhoneやAndroidなどスマホでみたときの表示確認用に入れました。
ユーザーエージェントの変更とFirebugを利用したら、WPtouchのカスタマイズがすこぶる捗りましたよ。
ちなみにサポートしているユーザーエージェントは以下になります。
Supported User-Agents :
- Internet Explorer 6/7/8/9/10
- Nokia/Symbian
- S60 3rd Edition
- S60 3rd Edition Feature Pack 1
- S60 3rd Edition Feature Pack 2
- S60 5th Edition
- Symbian^3
- Symbian S40
- iOS/iPhone 4
- Android 2.2
- Google Chrome 15.0
- Safari 5.0.5
- Opera 12.0
- Opera mini 9.80
Webデザインのチェックが目的なので、いまのところアドオンはこれくらいです。
要素の調査の3D表示が凄そう！
そしてもう一つやってみたかった事があるんです！
[Mac]Firefoxの要素の調査の3D表示が凄い。凄いからとりあえずピラミッド作ってみた。Mac限定だけどね。じゃなかった ※追記アリ。 | こんちくわのぶろぐ
こんちくわさんが記事にしていた、Firefoxの3D表示。この「要素の調査」で使える3D表示が凄そうで、しかもこの機能でピラミッドを作ったりしてるのを見て、やってみたくなりました(笑)
この記事の公開時にこんちくわさんとやり取りしてから、すこしたってしまいましたが、挑戦してみようと思ってます。うまくできるかな〜。
おわりに
これで、MacのなかにはSafari、Chrome、Firefoxとブラウザが3つ入りました。
それぞれいいところがあるので、長所を使い分けて活用していきたいですね！
