2008年 01月 17日
Firefox
Nikon D200 + Ai AF DC Nikkor 105mm F2D
f0018464_19262745.jpg
ここ数日、スキン編集にかかりっきりでした。^^



  
2日ほど前のこと。

このblogに遊びに来てくださった方から、私のスキンの表示がおかしいという指摘を受けた。
Firefoxというウェブブラウザから私のblogを見ると、背景が表示されず、幅もおかしいということだ。
今までウェブブラウザといえばInternet Explorerしか考えていなかったので、寝耳に水であった。

で、早速自分のPCにもFirefoxをインストールして、このblogを覗いてみた。

↓ これがその画像。
f0018464_1934494.jpg
何じゃこりゃ、という感じ。

ちょっとビックリしてしまった。
自分のblogがこんな悲惨な状態になっていたとは・・・。

まず背景が真っ白である。
そして、POSTの幅が100pxほど少なく、右のメニューは本来の3分の1以下の幅しかない。
さらに、中央寄せのはずのタイトルなどの文字が左寄せになっている。

で、これはちょっと笑えないな、ということで原因を探って修正していたのである。

背景画像に関しては、心当たりがあったのでそれを修正したら一発で直った。
それに関しては、先日の背景画像貼り付け法の記事に追記してある。
ただ、幅がおかしいという問題は、簡単に直るものではなかった。

元々、このスキンは偶然の産物であった。
以前、このblogで、excite提供スキンのTwo Colorsを編集したCSSを公開したが、
それを同じexcite提供スキンのHTMLベーシック2に適用したら良い感じになったので、
そこからさらに弄くって作ったスキンだったのである。
なので、至る所にバグの元のようなものがあって、それがFirefoxだと表面化してしまい、
あのような目茶苦茶なスキンになってしまったようだ。

元々無理があるスキンなので、色々と修正を加えてみたがなかなかうまくいかない。
で、これは新たに作り直した方が早いと判断し、Two Colorsをベースに一から作り直した。

よって、このスキンは以前と変わらないようで、実は全く新しいもの。
結構苦労したが、今回の件はスキン編集についての良い勉強になった。
自作スキンを使っている方、お気をつけ下さい。

↓ これが作り直したスキンをFirefox上で見た画像。 一応きちんと表示されている。
まだ微妙に違うところもあるのだが、ほとんどInternet Explorerと変わらない状態になった。
f0018464_19503627.jpg

そんなわけで、ここ数日皆さんの所に遊びに行けませんでした。
今週末にでも、ゆっくり伺わせて頂きますね。

by muto2100 | 2008-01-17 19:52 | スキン編集 | Comments(12)
Commented by parasa_k at 2008-01-17 21:18
こんばんは。
いつも前向きで、素敵ですね!
私は自分のPCはIE7を使っているのですが、IE6と7とでも見え方違うんですよ。
左寄せ右寄せ、余白とマージン、この辺りの指示が若干違うようです。
自宅でごにょごにょ触って、会社で見てびっくり!
お仕事させて貰う時には、IE6、IE7、Firefox、の3つで確認するようにと指示されますので、
泣かされることもしばしば・・・
日々の進歩に規格が追いつかないのでしょうけれど、ちょこっと考えて貰いたいものです・・・

相変わらず、IE7ではロゴ画像が転送できないんですよ~

Commented by gohda_takeshi at 2008-01-17 21:39
mutoさんは凄いなぁ・・・(◎-◎)私なんてチンプンカンプンですよ~。
ブラウザーって沢山ありますよね~Firefoxという名前も初めて聞き
ました。

mutoさんはこういう系統のお仕事なのですか?
Commented by とぉ at 2008-01-18 00:10 x
いつもながらの探究心というか、とことん拘りを持ち深く追求する姿勢には
感動させられます。素晴らしいです。

私は実はIT系のメディア会社に勤めておりますので、Web制作については
日常茶飯事で触れる機会があるはずなのですが、生憎管理系の部署なので
こういうクリエイティヴティは全く持ち合わせておりません…。
たまに制作部の人間に、教えてもらったりするんですけどね。

額縁、昨日UPの写真につけてみました。なかなかイイ感じにできました。
ありがとうございます。
今後、「これだ!」って写真には額で飾ろうと思います。

Commented by hapihapitime at 2008-01-19 01:44
こんばんは
こんな場面、解明できるのですか?
プロですね。
CSSやらHTML見ても、なにがなんだか意味不明です。
私にはmotoさんの指示なしでは無理です(^^ゞ
こういうの理解できるとカッコイイですね?
Commented by ヒロ at 2008-01-19 14:55 x
実は私も以前はFirefoxを常用していたのですが、
エキブロを始めてから、IEに戻ったのですよ。
見え方がほかのブログサービスと比べると、結構違ってて
やりずらかったので。
ここまでしっかりと作り直すmutoさんはすごいですね。
Commented by asty-flower at 2008-01-19 15:47
こんにちは^^
Firefoxでの修正、素晴らしいの一言です!!
私も友達の家でFirefoxから自分のblogを見て少し変わっているのに
驚きました(^_^;)
でも、ここまで完璧に修正はできませんでしたよ?!
素晴らしい~~!!
Commented by muto2100 at 2008-01-19 19:44
parasa_kさん、こんにちは。
確か、 parasaさん、こういうの詳しいんですよね。
私はいつも手探りです。(苦笑)
今回も、なんだそれ~っ、ていう感じでしたからね。^^
苦労しましたが、少しスキンに詳しくなりました。
どうにもならなくなったら、教えを請いに伺います。(笑)

IE6とIE7でも違うんですか?
ちょっとうんざりですね。
同じウェブブラウザは統一して欲しいものです。
Commented by muto2100 at 2008-01-19 19:47
gohda_takeshiさん、こんにちは。
>>mutoさんは凄いなぁ・・・(◎-◎)私なんてチンプンカンプンですよ~。
いえいえ、私もチンプンカンプンです。^^
でも、今回のリメイクで全体像みたいなものは何となく掴めましたね。
とてもblogで紹介できるレベルじゃないですけど。
本屋で、スキン編集の本でも買って読んでみようかな、と思っています。

>>mutoさんはこういう系統のお仕事なのですか?
サービス関係の仕事です。
こういう系統は、全く分かりません。^^
Commented by muto2100 at 2008-01-19 19:50
とぉさん、こんにちは。
>>いつもながらの探究心というか、とことん拘りを持ち深く追求する姿勢には感動させられます。
いえいえ。
Firefoxでは見られないと言うのは流石にまずいですからね。
結構必死になって弄くりました。
まだ甘い部分もあるのですが、とりあえず普通に見られるようになってホッとしています。^^

額縁、良い感じですよね。
何と言っても個性が出せるのが良いですよね。
フォトコンで入選した際には是非お使い下さい。^^
Commented by muto2100 at 2008-01-19 19:53
hapihapitimeさん、こんにちは。
>>こんな場面、解明できるのですか?
出来ません。
何だかよく分からないけど、弄くってみたらうまくいった、くらいのレベルです。
こうやるとうまくいく、ということは分かっても、なぜうまくいくのかが分からないのです。(苦笑)
なので、今回みたいなバグが出ると大変です。^^

>>こういうの理解できるとカッコイイですね?
本当ですよね。
折角なので、ちょっと勉強してみようかな、と思っています。^^
Commented by muto2100 at 2008-01-19 19:56
ヒロさん、こんにちは。
>>見え方がほかのブログサービスと比べると、結構違っててやりずらかったので。
やはりそうでしたか。
実は、Firefoxの方でも見えるように作り替えたのですが、
どうしても修正できない細かい部分が幾つかあるんですよね。
簡単に言うと、Firefoxで普通に見えるようにすると、IEの方がおかしくなり、
また、逆の場合もあったりしました。
こういう部分は統一して欲しいものですね。

>>ここまでしっかりと作り直すmutoさんはすごいですね。
いえいえ。
細かいところは微調整できませんでした。
今の私にはこれが精一杯ですね。
Commented by muto2100 at 2008-01-19 19:58
asty-flowerさん、こんにちは。
>>私も友達の家でFirefoxから自分のblogを見て少し変わっているのに驚きました(^_^;)
おぉ、そうでしたか。
私の周りはFirefoxを使っている人がいなかったので、
こんなことになっているとは全く気付きませんでした。
Firefoxを使っていた人には申し訳ない気持ちでいっぱいです。

これからは、スキン編集の際はFirefoxの方も確認しながら作業します。
今回は良い勉強になりました。


<< Digital Camera ...      背景に画像を貼り付ける方法(2) >>