こんにちは、くるくるテンパ(@kurukrutenpa)です！
この記事では、ブログ“超”初心者の僕が何とかブログを形にするまでのながれを解説しています。
今回はブログのデザインがいつの間にか完全に崩壊していた、、、という経験を記事にしています。
実際に崩れていた時の画像を下にあげます。
画像にはありませんがヘッダーメニューも文字として並んでいるだけのひどい有様でした。
✓発覚時の状況
・ブログを始めて半年くらい
・Wordpressにログインして記事を確認(プレビュー等)する分にはデザイン崩れは起こらず、問題なく表示
・プラグインの全てを停止しても変化なし
・全てのページで同じような状態
結論としては”Googleアドセンス申請時に貼り付けた審査用コード”を申請後に結果が出ても放置していたことが原因でした。
Googleアドセンスに申請したけど不合格で、しばらく放置している！
そんな人は1度チェックすることをおススメします！
突然ブログ画面が文字と画像が乱雑に並んだ状態に、、、
kurukurutenpa blog
メニュー１
・●▽□
・□✖〇
メニュー２
メニュー３
・
・
・
画像が並ぶ(カルーセル設定している画像)
※注意：配置やメニュー名を変えることがあるのでこのように表記、文字化けはしてないです
箇条書きのようにメニューや本文が並び、その間に配置していた画像が大きさもバラバラに並んでいる。
そういった状態でした。
残念ながら修正した後、その状態が再現できなっかたため画像は無いです。
それっぽく表現したのが上の枠内のような見え方です。
ボックスや吹き出し、見出しなどのデザインが完全に抜け落ちた状態でした。
状況確認・原因考察
今回のデザイン崩れ発覚の経緯は
久々に記事を書いて、そのことをtwitter投稿して携帯から見え方を確認しようとしてデザイン崩れをみつける
最初はモバイル端末だけかと思ったがPCもタブレットで確認しても崩れている
問題なくデザインが反映されるのはWordPressにログインして確認した時だけ。
半年近く放置していたため、特に仕様の変更はしていない
以上からネットで調べ
・WordpressまたはCocconのアップデートによる不具合
・プラグインの影響
・半年以上前から問題は起きていて当時にした何かが問題となっている？
とあたりをつけました。
原因候補の吟味
候補1：アップデートによる不具合
WordPressの更新は自動で行われているようです。
アップデートによる不具合なら他にも多くの人が同じ状態になっているはず、、
ということで
「Wordpress」
「Coccon」
「アップデート」
「不具合」
「デザイン崩れ」
これらのキーワードで検索をしてみましたが、あまり似たような案件のヒットはなし
この検索でわかったことは「プラグインによる問題がしばしばあるみたい」ということでした。
候補2：プラグインの影響
次に行ったのがプラグインの無効化
一括で無効にして1つずつ有効にして確認しましたが、変化はなくデザインは崩れたままでした。
候補３：半年前にした何か
ここからは先は何がいけなかったか、プログラミング素人の私にはもうお手上げ状態です。
追加したスタイルシートのコードを消してみたり、
コクーン設定を確認してしみたり、、
バックアップの復元を試そうとしてみたり、
いろいろ試していると”子テーマ”から”親テーマ”に戻すと何とかみれる状態に戻りました。
その時の画像↓
ここから子テーマが原因とし、子テーマを再インストールするもダメ
子テーマ関係で関係のありそうな所はスタイルシートとCoccon設定
追加したスタイルシートのコードはコピーして消去済み、Coccon設定一つ一つ確認すると”アクセス解析・認証”に答えがありました
以前にGoogleアドセンスの申請時に貼ったコードが何やら変化して？悪さをしていたようでした。
これをすべて消したら元通りになりました。
まとめ
今回このブログで起きたデザイン崩れの原因は”Googleアドセンス申請時の申請コードの消去忘れ”でした。
以前にコードを貼りつけてから結果が出ても消去せず、半年近く放置していたためアップデートや仕様の変更、その際コードが変化した？など細かい原因は定かではないです。
現在Googleアドセンスには合格しておらず、再度申請の為に申請コードを貼りなおしましたが今のところデザイン崩れの問題はありません。
・Wordpress上で確認する分には問題なし
・全ページでデザイン崩れ(見出し、ボックス、吹き出しなどが反映されない状態)
・プラグイン全停止でも変わらず
・親テーマに戻すと最低限のデザインは復活する
・以前にGoogleアドセンスの申請コードを貼りつけて放置している
これらの項目にあてはまる人はバックアップによる復元の前に、ぜひ申請コードをチェックしてみてください。
バックアップの復元も試しましたが、なかなか面倒ですしね。
それではこの記事は、これで終了です！
質問などありましたらお問い合わせフォーム、またはtwitterからご連絡ください。
最後までお読みいただき、ありがとうございました！！
コメント