Jetstream BLOG

HTC Jetstreamに惚れて

メニュー

サイトの更新やカスタマイズで役立つWEB比較ツール「Webでdiff!」が便利でした

ド素人がファイルベースでのテーマカスタマイズになんて手を出すべきではないのですが、私は当ブログなどを運営するにあてって、テーマファイルをちょこちょこいじってレイアウトを若干変更したりしています。元々知識はないのでかなり行き当たりばったり的な感じです。だから時にこんなことをしてしまうんですよね。

当ブログのテーマ

当ブログの WordPress で構築していてテーマは mono-lab さんが販売している「CUBIC」というシンプルなテーマを使わせていただいています。

mono-lab:HYBRID THEME

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 ツールです。

EN-PC SERVICE:Web で diff!

使い方は簡単で、比較する 2 つのファイルのコードを “変更前” “変更後” とそれぞれ貼り付けて “diff” ボタンをクリックするだけ。

すると “追加” “変更” “削除” の 3 つの箇所を自動判別して表示してくれます。

恥ずかしい話、こんな便利な WEB ツールがあったなんて知りませんでした。考えてみたらこういったツールやソフトがあってもおかしくはないんですが、常に行き当たりばったりな感じでカスタマイズしてしまっていたのでこういったサービスを探す前に無理やり解決させてしまっていたわけです。ほんと横着ってだめですね。

ちなみに無料の Diff サービスはもちろん「Web で diff!」以外にも多数あります。「Web で diff!」はその中でも手軽でわかりやすいし、何より差がある行を示してくれる点はかなりありがたいと感じました。

同じように行き当たりばったりでテーマのカスタマイズなどをやってしまっている方は是非「Web で diff!」を使ってみることをオススメします。私はこれでかなり楽になりました。

EN-PC SERVICE:Web で diff!


関連記事

コメントをお待ちしております

follow us in feedly

姉妹ブログ紹介


google-help-heroes-by-jetstream

Google 公式の一般ユーザー向けヘルプ動画制作プロダクト「Google Help Heroes」用に提供している動画をテキスト化したサイト『Google Help Heroes by Jetstream』も作成しています。こちらも是非よろしくお願いいたします。

日別エントリー

2017年5月
« 4月  
 123456
78910111213
14151617181920
21222324252627
28293031 
ページ上部へ戻る