<< 投稿欄にNewの表示を パート2 3列スキンのメニューの配置について >>
 

スキンデバッグ講座:ソースの比較

はじめに


スキン編集を行っていると、うまくできないとか、何でだろうとかいろいろ分からないことが出てきますよね。そんな、トラブルの解決方法の秘密をちょっとだけあなただけに紹介する不定期な企画です。今回限りで終わるのかそれとも続くのか、ちょっと分からないけどやってみたいと思っています。
ちょっと難しく感じられる場合は、読み飛ばしてこんな方法もあるんだ位にとどめておいて下さい。
このテクニックを使おうって、思う日が来たらもう一度ご覧下さい。


ソースの比較

スキン編集を行っているとなんだか上手くできなくいことが多いですよね。今までよかったのに、何かを変えたら上手くできなくなることってありますよね。でも、なにを変えたのかが分からなくなることがあるようなので、簡単なチェック方法を教えちゃいますね。


本当は、変更箇所は1箇所だけやって、プレビューではなくちゃんと確認を行っておくと判断しやすいのですが、小さな違いは2~3日経ってからじゃないと分からない時もあってそんなときはどうしたらよいのか。
そんなときは、ソースの比較を行うとよいですよ。
編集前にバックアップを行って、問題のあるソースと比較を行います。
比較を行うと、変更箇所が分かるため問題となっている場所を特定し易くなります。

でも、ソースをひとつづつエディタで見ていったら大変ですよね。
そこで、登場するのがソースを比較するソフトです。



ソースの比較ソフト


私が利用しているソースの比較ソフトは、「ExamDiff 」です。英語のソフトだけど、操作はそれほど難しくないです。他にもファイルの内容を比較するソフトがあると思いますので、自分に合うソフトを探すと良いと思います。

ちなみに、、「ExamDiff 」は以下のアドレスから入手できます。
http://www.prestosoft.com/ps.asp?page=edp_examdiff



実例

実際にあったことです。この記事を読んでいて、「あ、私だっ」て思われた方がいらっしゃると思いますが、あのときに何を行って解決をしたのかその裏話なので当事者も、そして当事者でも無い方も興味がある方は読んで下さいね。

とある方から、エキサイトのノーブルリースのスキンのドラゴンで図1のように隙間が開いてどうしたらよいかとの問い合わせを頂きました。とっても丁重に好感の持てる質問のされ方だったので、頑張っちゃおうかと思っちゃいました(ぽっと結構単純です。)

a0031863_23542873.gif


図1 問題の隙間


この件もらったのはいいけど、どこに問題があるのか。
そして、どこから手を付ければよいのか考えました。
そして、まずHTML部分なのかCSSの部分なのかを調べました。

まず、当事者のサイトからソースを取り出してローカルで実際に同じ現象が起こることを確認します。

次に、ソースのCSS部分をデフォルトのCSSと差し替えます。
そして、同じ現象が現れるのか確認を行います。(今度この方法もお話したいですね。)

今回は、CSS部分をデフォルトに置き換えると正常になることが分かりました。
つまり、HTML部分ではなく、CSS部分に原因があることが分かります。

そこで、CSSがどのように変更されたのか調べることにしました。
デフォルトと問題の両者のCSSをファイルの比較ソフトで比較したところ、数箇所の変更部分を見つけることに成功しました。

そこで、デフォルトのCSSにひとつずつ変更を加えて現象を見ることにしました。
そして見つけたのが、.TXTFLDが抜けていることでした。
.TXTFLDをデフォルトと同じように設定を行うようにお願いをして、今回の問題を解消することに成功しました。

みなさんも、変更箇所を見つけられるときには、ファイルの比較をお勧めします。
今回のケースはデフォルトのソースを入手できたため、解決できましたが、実際はバックアップを行っていない限り難しいかもしれません。
しかし、個人でスキン編集を行って自分で問題を解決する場合は、スキンのバックアップをおこなっているとこのような手法を用いて、変更箇所を特定し、問題箇所を見つけることも可能になります。



最後に

いかがでしたでしょうか。ちょっと難しいですか?でも、こんな方法もあるってことを知るだけでも、ちょっと違いますよね。たまにはこんな記事もいかがでしょうか。ちょっと記事が長くなりましたが、皆さんのスキン編集のお役にたてると嬉しいです。


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-06-25 23:54 | │├デバッグ | Trackback | Comments(8)
トラックバックURL : http://potto.exblog.jp/tb/2048243
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Commented by celeste13 at 2005-06-26 06:32
ひゃぁ!
わ、私ですね、それ・・・その節は、ぽっとさんに大変お世話になりました。ありがとうございます。
なにぶん(相変わらず)技術ゼロなもので、トラブルの理由と対処法がわからず、失礼を承知でおすがりしてしまいましたが、本当に助かりました。
あれ以来、こちらをバイブルのように反芻し、少しずつスキン編集の範囲を広げつつあります。といっても今だExcite提供のスキンをいじくるだけですが。

私が応援しているサッカーは今シーズンオフ・夏休みのため、スキン変更してヴァカンス気分を出してますが、あの時のような失敗をしないよう、元のソースのバックアップを取って、比較しながら作業するということだけは、少なくとも学習しました。

改めて、感謝しております。

いつもお邪魔して勉強させていただいていますが、これからもどうぞよろしくお願いします。
Commented by potto37 at 2005-06-26 11:23
celeste13さん、こんにちは^^
スキン編集を行っていると、だれでも上手く出来ないときがあって、その解消方法って、意外とだれも教えてくれないですよね。
だから、私がその秘密を書いちゃおうかと思って記事を書かさせて頂きました。

バイブルなんてそんなそんな。
でも、喜んで頂けるとすごく嬉しいです。
こちらこそ、これからもよろしくお願いします。

サッカーがシーズオフなんですね。
選手はヴァカンスでリゾートなどに出かけてるのでしょうね。
なんだか、私も遊びに行きたくなっちゃいました。
Commented by kicchi.0417 at 2005-06-26 15:10
ぽっとさん、こんにちは。お久しぶりでございます。
このところちょっとスキンはいじっていないのでご無沙汰になっておりましたが、投稿記事はいつも参考に拝見しております。
そしてその丁寧でわかりやすい説明に感心するばかりです。以前は私も何度も助けていただきました。本当に感謝しております。
これからもまたお世話になると思いますので、お師匠さま・・・どうぞよろしくお願いいたします。
Commented by potto37 at 2005-06-26 19:43
きっち☆彡さん、こんにちは^^
いつも遊びに来ていただいてありがとうございます。
わかりやすいと言われると嬉しいです。
喜んで頂けると、私も嬉しいのでお手伝いさせてもらってます。
お師匠さまなって、そんなそんな。
こちらこそ、これからもよろしくお願いします。

なんだか、こうやってコメントもらえると照れるけど、嬉しいです^^
Commented by oh-aqua1 at 2005-08-05 22:23
久しぶりにお邪魔しました。
スキンがお花の優しい感じでイイデスね!
CSS編集を少しトライしようと思ったのですがなかなか・・思うよういいかず。(>_<)
①ヘッダーがセンターに設置できず左寄りになってしまいます。
②サイドバーの設置方法がリストにありますか?
是非参考にさせて下さいませ。
アドバイス頂けますでしょうか。<m(__)m>


Commented by potto37 at 2005-08-06 09:23
oh-aqua1さん、こんにちは。

①ヘッダ部分
たぶん、サイトのトップのバナーのことだと思いましたのでこの様に変更して下さい。
構造を見直す必要があると思いますが、手っ取り早い方法として以下の方法があります。

DIV#TOP {
BACKGROUND-IMAGE : URL(http://pds.exblog.jp/pds/1/200508/04/96/amis.jpg);
BACKGROUND-REPEAT : NO-REPEAT;
WIDTH : 744PX;
PADDING-TOP : 1PX;
PADDING-BOTTOM : 60PX;

background-position:center center ;/*追加*/
}

DIV#LEFT_SUB {
WIDTH : 500PX;
/*MARGIN : 0PX 37PX 0PX;/* 削除*/
MARGIN : 0 0 0 16px;/*変更*/
}


②サイドバー
サイドバーにつきましては、後日記事にしようと考えています。
夏休み特別企画の記事を書くので、後になりますが・・・

http://potto.exblog.jp/i24

あくまでも参考程度です。あとはご自分で調整をお願いします。
Commented by oh-aqua1 at 2005-08-07 00:33
星空の流星群のスキンが素敵ですね!
「トップのバナー」の編集が思うようにいかずももやもやでしたが・・
早速アドバイスを頂き有難うございました。(^^♪
構造の見直ししてみま~す。
尚、サイドバーの記事を参考にさせて頂きます。

これからすこしづつ参考にさせて頂き編集の極意を学ばさせて下さいませ。



Commented by potto37 at 2005-08-07 19:23
oh-aqua1さん、コメントありがとうございます。
極意なんて、そんなそんな。
トップのバナー思うようにできるといいですね。
<< 投稿欄にNewの表示を パート2 3列スキンのメニューの配置について >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。