「オリジナルテーマを作るための Bonesはスグに使えるレスポンシブテーマ！」でご紹介した、テーマbonesをちょこちょこいじって、オリジナルテーマを作ろうとしています。どこをどう変えたのかということを後でみたいと思うんですが、目確認するのはとても大変です。
そこで、ファイルやフォルダを比較して並列表示してくれるフリーソフト　DF　を使ってみました。

フリーソフトDFをダウンロードする

DF (Vecter)

このページからDFをダウンロードします。

ダウンロードページへ　をクリック

今すぐダウンロード　をクリック

df141.lzh　を任意の場所に保存します

保存した df141.lzh を解凍すると、df141というフォルダができます。おぼえやすいように　Program Files　など分かりやすい所にフォルダを移動しておくといいかと思います。

フォルダの内容を比較する

今回、bonesというテーマをコピーしてbones-whiteというテーマを作っています。元のbonesとbones-whiteがどのぐらい違ってきたかをフォルダごと比較したいと思います。

DF.exeをダブルクリックして起動します。

左上にある　フォルダ比較　ボタンをクリック

１番目選択　というポップアップが開くのでローカルにある　bones　フォルダを指定して　OK　をクリック。

２番目選択　というポップアップが開くのでローカルにある　bones-white　フォルダを指定して　OK　をクリック。

このようにフォルダの中で相違があるファイルやフォルダが色つきで表示されました。右下には色の説明と、相違フォルダ（ファイルも含む）が何個あるのかが表示されています。

library はフォルダなのでこの中も見たいのでダブルクリックします。

このように　css　と　images　という２つのフォルダの中が相違していることが分かります。さらに　css　をダブルクリックします。

するとcssの中にある　style.css　というファイルが相違していることが分かりました。

ファイルの比較をしてみる

先ほどの　style.css　をダブルクリックすると

このようにファイルが開きます。

フォルダから指定しない場合のファイルの比較方法はこんな感じです。

ファイル比較 ボタンをクリックします。

１番目選択　画面が開くので　bonesフォルダのheader.php　を指定して、　開く　をクリック

２番目選択　画面が開くので　bones-whiteフォルダのheader.php　を指定して、　開く　をクリックします。そうすると、

左右にそれぞれの　header.php　が開きます。赤で囲った部分に色が付いていて、このあたりが相違しているということが分かります。

このあたりをクリックすると

その行に移動します。内容が違う行だけに色が付いているのでとても分かりやすいです(^^)/

このあたりは実際には、bonesで、

こういう感じだったところを、bones-whiteで

このように色を変えたり、ロゴ画像を入れたりしている部分です(^^)。

横に並べるだけで無く、上下に並べることもできます。

オプション＞設定　をクリック

ウィンドウ　タブをクリック

ファイル比較画面を上下２分割で表示　にチェックを入れて、

OK をクリック。

この設定をしてから再度、比較ファイルを開き直すとこのように上下に表示されました。

相違部分のテキストも横に長くなった分、見やすくなりました。

まとめ：何かを元にして変更するときは元を取っておくといいかなと思います

GITとかを使っていれば別ですが、そうでないときに何かを元に自分なりの変更を加えていくときはファイルならファイルを、フォルダならフォルダをまるごと変更せずに取っておくといいと思います。変更するファイルやフォルダはそれをコピーして別の場所や名前にして変更していきます。

そうすれば変更中うまくいかなかったりとっても変になっちゃったときにこのDFを使って比較すればどこが違っていてどうなったのかがわかり、元のソースにちょっと戻したいときも部分的に戻したりできるので便利だと思います(^^)/