黒色ワナビーの住処

フリーゲーム・ブラウザゲームをやりながら筋トレで体を鍛えるブログ

半日間の悪戦苦闘の末にStinger3の子テーマの適用に成功した話

      2015/06/18

ども。くろわなです。

ブログのテーマをほぼ未改造のStinger3からroom9さん提供のStinger用カスタマイズ子テーマ『CANDY CRAZY』に変更しました。

見易さを維持しつつ、要所要所にパンチの効いた感じデザインになったと思うのですがいかがでしょうか?

この子テーマ、room9さんのこちらの記事からダウンロードすることが出来ます。適用方法もこちらに書かれています。

この記事では10分でStingerを自分色に変えられるとのことですが、残念ながら10分では終わりませんでした。

今日はその辺りの悪戦苦闘を記事にさせてもらおうかと思います。

最初に断って置きますが、使用したテーマ『CANDY CRAZY』に不備があったとか、そういう話ではありません。私、くろわなの事前確認の不徹底が招いた事態ですので悪しからず。

実際、きちんと自分の環境を調べた上で、事前の注意事項を抑えておけば、10分と言わずに5分程度で作業を終えることが出来るでしょう。

扱いやすく高品質なテーマを提供されているroom9のQtaroさん。見ていないとは思いますが、この場を借りて感謝の言葉を。ありがとうございます。

さて。話を戻しまして、こんな使いやすい子テーマすら満足に利用出来なかったマヌケの話に戻りますかね。

 

スポンサーリンク

 

『CANDY CRAZY』の導入とそれに伴う悪戦苦闘

基本的な導入方法とトラブルの始まり

『CANDY CRAZY』自体の導入方法については、上述したこちらの記事をご参照ください。

ここで注意しなければならないのが親テーマであるStinger3のバージョン。上記の紹介ページではstinger3ver20131216およびstinger3ver201310231用の『CANDY CRAZY』が提供されていますが、現時点でのStinger3の最新バージョンは20140124。私が使っているバージョンも、この最新バージョンでした。

この時点でキチンと対処法を調べておけば良かったのですが、アホな私は「ま、ちょっとくらいバージョンが違ってもどうにかなるだろ」と、そのままインストールを決行。案の定、親テーマが見つかりませんというエラーを吐いてインストール失敗。

この失敗段階で一旦引いておけば良かったのですが、ここでまた「CSSファイル内のバージョンのとこ書き換えればいけるんじゃね?」という勝手な思い込みで作業続行。

このバージョンを書き換えるという考え自体は正しかったものの、書き換え範囲をキチンと確認もせずに作業を続けたために、親テーマのCSSインポート部分のパスを書き換え損ねるというミスを犯すことに。

その結果、子テーマのインストール、適用には成功したものの、一部CSSが当たっておらず、レイアウトが崩れるという現象が発生。ここにきて流石にヤバイと思い始めます。

改善策の調査と参考にしたサイト

慌ててグーグル先生に対処法を聞く私。とてもみっともない。

子テーマのバージョン変更に関して、参考にしたのはこちらのサイト。

先の私の作業では、
@import url(“../stinger3ver20131023/style.css”);
部分の書き換えが抜けていたようだ。

早速その部分のバージョンを最新のものに書き換え再アップロード。

今度こそうまくいくはずと思い、祈るような思いでプレビューを開いて見る。残念ながらレイアウトは崩れたまま。

上記の記事で扱っているのがバージョン20131216から20131217への書き換えなので、
バージョン20140124では何か別の変更が必要なのだろうかとも考えましたが、その辺りの情報は調べても出てこない。

とりあえず私個人の環境要因なのかどうかを調べるためにローカル環境を用意して検証してみることに。

検証用ローカル環境の構築については、こちらの記事を参考にしました。

結果、まっさらなStingerVer20140124にCANDY CRAZYを適用すれば正常に表示されることを確認。

私の環境要因だとは判明したものの、どうすればいいのか途方にくれる。

原因(らしきもの)の判明と検証

とりあえず地道に要素が崩れている部分のCSSを調べていくことに。
するとWEB上に出力されているCSSの方では、依然としてインポートしようとしているCSSのバージョンが古いことが判明。

あれ、書き換えミスかなと思いレンタルサーバー側にアップされているCSSの方を確認してみると、こちらは正しいバージョンに書き換わっている。

サーバー上のファイルと表示・出力されているファイルの内容が違うってことは……。

あ、アレですか。

また私の前に立ちはだかるのか!キャッシュ系プラグイン!

というわけで、キャッシュ系プラグインが最重要容疑者として浮かび上がってきました。

現在私が使用しているキャッシュ系プラグインは、

・DB Cache Reloaded Fix
・MO Cache
・WP File Cache

の3種類。

以前、スマホページの表示トラブルの際にページキャッシュ系のプラグインは外したので大丈夫だと思っていたのですが、うーん。やはりキャッシュ系プラグインの利用はいろいろと難しいところがあるようです。

さて、上記3つのプラグインを順番に停止していったのですが……。

現象が改善しない!!

アイエエエエ!ミカイケツ!?ミカイケツナンデ!?

絶望に浸りつつ再度グーグル先生に土下座して頼み込む。
その結果見つけたのがこちらの記事

そういえば、うちのブログもCloudFlareを使っていたなぁ、と。

上記記事を参考にCloudFlareのキャッシュを削除。再度、プレビューで表示を確認するも……やはり直らず!なぜだ!どうしてこんなことになった!

結局わからない原因と強引な解決策

症状的にキャッシュが悪さしていることは間違いなさそうなのに、何を試しても現象が改善しない。

もう子テーマの適用は諦めようかなぁなんて考えも頭をよぎりました。

その時ふと思いつきます。

CANDY CRAZYのテーマ名自体を変えてやれば、最初にミスした時のCSSファイルのキャッシュが呼び出されることは無くなるから、うまくいくんじゃないか、と。

というわけでCANDY CRAZYのCSSが格納されているZIPファイルのリネームを実施。再アップロードしてテーマ適応。
(このとき各種キャッシュ系プラグインは停止した状態です)

結果は見事成功。長かったなぁ、俺の十分間。
(自業自得とも言う)

そんなこんなを経て、当ブログはデザインの刷新に成功しました。現在は各種プラグインも再可動させている状態です。

こちらの環境では問題なく表示出来ているようですが、皆さんの環境ではどうでしょうか。何か不具合などあればお知らせいただけると幸いです。ではでは。

 - ブログ運営 , ,