ド素人がファイルベースでのテーマカスタマイズになんて手を出すべきではないのですが、私は当ブログなどを運営するにあてって、テーマファイルをちょこちょこいじってレイアウトを若干変更したりしています。元々知識はないのでかなり行き当たりばったり的な感じです。だから時にこんなことをしてしまうんですよね。
https://jetstream.buzz/archives/50788 当ブログのテーマ
当ブログの WordPress で構築していてテーマはmono-lab さんが販売している「CUBIC」というシンプルなテーマを使わせていただいています。
mono-lab さんのテーマの良いところは見た目はシンプルだけど内部オプションがいろいろ用意されている点やテーマがレスポンシブに対応している点などです。テーマの更新も WordPress の更新に合わせて年に 2 ～ 3 回くらい行ってくれています。つまりはまだまだサポートが続けられているという安心感も良い点です。
ただ、例えばデフォルトのサイドバー（ウィジェット）の幅が 300px 以下でレクタングル AdSense が使いづらかったり、ヘッダーに無用なスペースがあったりと若干の不満点はあったりします。そのため私は CSS や記事ファイル（single.php）などをちょこちょこっといじって好みの仕様に変更しているわけです。
本来やってはいけない元ファイルのカスタマイズ運用
通常テーマファイルをカスタマイズする場合は子テーマを作成して行うのがセオリーです。最悪、子テーマを使わずに CSS（style.css）や functions.php をいじる場合でもなるべく元ファイルはいじらずにスニペット系のプラグインを利用するのが無難で、元ファイルをいじることは最終手段です。テーマの更新時に上書き（初期化）されてしまうので都度対策するはめになりますからね。
私も一応スニペット系プラグインを使って最低限のカスタマイズは行ってはいるのですが、そもそもの CSS の読み込みが、通常の CSS（style.css）→ スニペットプラグイン →レスポンシブ用 CSS（responsive.css）という順になっている模様で、スニペットで記述した CSS が responsive.css で上書きされてしまって意味がなくなってしまう状態。また一時は子テーマ運用も試みたものの、何かが上手くいかずにレイアウトが崩れてしまいました。
ということで危険ではあるものの、現在はテーマの元ファイルをいじって運用しています。危険は承知の上で。
ただやっぱりテーマの更新が配信されると頭を悩ませるんですよね。特に CSS なんてどこをいじったのか忘れてしまうもんで、カスタマイズ箇所を探すのが本当に大変。まぁ本来はカスタマイズ箇所をちゃんとマーキングしておけばいいんですけど。それすらやっていない。。。自業自得ではあります。
つい先日もテーマの更新が配信されたのですが、更新してしまうとカスタマイズ箇所が初期化されてしまうのでずっと保留にしていました。
Web で diff!
そんな時に出会ったのが無料の WEB ツール「Web で diff!」です。テーマを更新するにあたって差分さえわかれば、テーマを更新したのちに差分の箇所を変更したり追加したり、もしくは削除するだけで済むはず。なのでそういったコードを比較するようなソフトやサービスはないものかと思ってググってみたら見つけました。（Diff はプロの方にとっては当たり前なのかもしれないけど私は何ぶんド素人なもんで今回初めて知りました）
「Web で diff!」は、EN-PC SERVICE というところが無料で公開している WEB ツールです。
使い方は簡単で、比較する 2 つのファイルのコードを “変更前” “変更後” とそれぞれ貼り付けて “diff” ボタンをクリックするだけ。
すると “追加” “変更” “削除” の 3 つの箇所を自動判別して表示してくれます。
恥ずかしい話、こんな便利な WEB ツールがあったなんて知りませんでした。考えてみたらこういったツールやソフトがあってもおかしくはないんですが、常に行き当たりばったりな感じでカスタマイズしてしまっていたのでこういったサービスを探す前に無理やり解決させてしまっていたわけです。ほんと横着ってだめですね。
ちなみに無料の Diff サービスはもちろん「Web で diff!」以外にも多数あります。「Web で diff!」はその中でも手軽でわかりやすいし、何より差がある行を示してくれる点はかなりありがたいと感じました。
同じように行き当たりばったりでテーマのカスタマイズなどをやってしまっている方は是非「Web で diff!」を使ってみることをオススメします。私はこれでかなり楽になりました。
EN-PC SERVICE：Web で diff!
