別のブログで過去に書いた記事を、なんとなくスマホでダラダラ見ていたとき。
あれ？なんだこれ？カエレバの表示がドバーッと長くなってる！？
カエレバのレイアウトやデザインが崩れているのを発見。しかもボタンも表示されていません。
このトラブルに対処した方法をご紹介しますね。
スポンサーリンク
カエレバの表示が崩れたときの直し方
このページは、なぜそのようなことが起こったか、どのようにして修正したかを考えながら進めた内容をまとめた記事です。やり方だけが知りたい方はこちらの記事をご覧ください。
WordPressに謎の空白
WordPressブログでアフィリエイト収入をあげようとしたとき、もはやカエレバは必須と言えるくらい効果が高いものですよね。
私もカエレバからの収入がGoogle AdSenseにかなり近いほどになっています。
ぶっちゃけamazonアソシエイトのリンクを直接埋め込むのより、カエレバでもしもアフィリエイトを経由してamazonから、という流れのほうが断然売れてます。
そんなカエレバを埋め込んだブログを、なんとなくスマホで見ていたら謎の空白を見つけたんです。
商品画像の下にドバーッと謎の空白。
まるまる3画面ちかい空白ができちゃってます。
2回スワイプしてもまだ次の文章がでてこないくらい。
うわあ恥ずかしいっ//
それ以上に、このまま最後までボタンも何も表示されていないので広告としての意味が全くありません。
原因は何なんでしょう？
症状が出るページと出ないページがある
この現象、スマホで表示したときだけこんな風にびろーんします。
しかしPCで表示するとどちらも正常。
さらにいろんな記事をランダムに開いてみると、このびろーんと長い空白が出るページと出ないページがあります。
症状が出ているページを分析してみると、ある一定期間の間に書いた記事に挿入したカエレバ広告がびろーんしているようです。
こういうときはまず検証。
chromeの機能、デベロッパーツールを開きます。
びろーんになるカエレバの枠の中を右クリックして「検証」をクリック。
びろーんになるカエレバは
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">
とスタイルの指定があります。
一方まともに表示されるカエレバの方はというと。
<div class="kaerebalink-box">
htmlの中では何もスタイルが指定されてなくて、別のcssから指定されているようです。
どうやらここが問題みたい。
カエレバのデザイン設定
少し考えてみたら原因がわかりました。
カエレバはCSSで表示をカスタマイズできるので、色んなサイトでカエレバ用のCSSテンプレが公開されてたりします。
びろーんになるほうのカエレバは、
最初からスタイルが指定されている＝デザインが決まっている
ようになっている。
つまり最初からデザイン固定のやつってことですね。
カエレバはこのように数種類のテンプレデザインを選べるようになっています。
独自にデザインをカスタマイズする場合は、amazlet風-2(CSSカスタマイズ用)を選ばないといけないんですが、何か過去の自分に宇宙から謎のパワーとかが働いたときに、別のデザインにしてしまっていたようです。
さて、原因が自分じゃなくて宇宙からの謎のパワーのせいだとわかったので早急に修正します。
大量の記事をどう修正する？
まず、びろーんになってるカエレバが挿入してある記事はいくつあるのか。
怖いけれど真実を知っておきましょう。
WordPressの管理画面 ＞ 投稿一覧 と進み、右上の投稿の検索に次のように入力して検索。
<div class="kaerebalink-box" style="text-align:left;
これでカエレバのデザインを「amazlet風-1」「amazlet風-3」「amazlet風-4」のどれかにした記事が絞り込めます。
お、おおう…。
手動で1記事ずつやっていく気が全くしません。
そんな根気があるなら今ごろ司法試験に合格して弁護士になってます。
てことで一括で修正していく方法を考えます。
「Search Regex」プラグイン
修正のためにWordPressプラグイン「Search Regex」をインストールします。
このプラグインは、とにかくすべての記事の中から特定の文字列を検索して置換してくれるという神プラグインです。
初心者がWordPressを初めて長く続けていくと、必ずこのプラグインにお世話になるのではないかってくらい便利なもので、WordPressの母と読んでも過言ではないくらいです。
プラグインのインストール方法なんかは省きますね。
インストールしたら有効化して、
WordPressの管理画面 ＞ ツール ＞ Search Regex
と進みます。
説明は英語ですが、なんとなく感覚でいけそうなUIです。
念のためGoogleで翻訳すると
置換は、[置換と保存]をクリックするとデータベースにのみ保存されます。そうしないと、結果のプレビューが表示されます。
注：発生したいかなる損害に対しても責任は負いません。変更を行う前に、データベースをバックアップすることを強くお勧めします。
ってことらしいです。
さあここから、何を何に置換すればいいか考えます。
カエレバのスタイルを比較する
ここで、「amazlet風-1」「amazlet風-3」「amazlet風-4」と、「amazlet風-2（CSSカスタマイズ用）」とはどこが違うのかを比べます。
ここで登場するのが「テキスト比較ツール difff《ﾃﾞｭﾌﾌ》」です。
名前がなんだかちょっとアレなこのツールですが、機能はシンプルながらズバリ求めていることをしてくれるすばらしいwebツールなんです。
difffを開いたら、最初に書いてあるテキストは消して、カエレバで何でもいいので商品を選び、左側に「amazlet風-1」、右側に「amazlet風-2（CSSカスタマイズ用）」のリンクをコピペ。
「比較する」を押します。
すると左右のテキストで違う部分が青く出てきますね。
上の画像が「amazlet風-1」、下の画像が「amazlet風-2（CSSカスタマイズ用）」。
これで比べると、
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;"><div class="kaerebalink-image"style="float:left;margin:0 15px 10px 0;">
を
<div class="cstmreba"><div class="kaerebalink-box"><div class="kaerebalink-image">
に置換すればいいんですね。
Source ： post content
Search pattern ： 【書き換える古いほう】
Replace pattern ： 【書き換える新しいほう】
このように入力したら Replace＆Save を押します。
これで全ての記事の該当箇所が書き換えられました。
この作業を、「amazlet風-1」「amazlet風-3」「amazlet風-4」について、それぞれ「amazlet風-2（CSSカスタマイズ用）」と違う部分について実行すればいいんですね。
ということで、ズバリやり方だけをまとめましたのでこちらをご参照下さい。
この方法で、カエレバの表示が崩れて謎の空白が出来ている問題を解消しました。
少しでも誰かの参考になれば、まぐれヒット。
コメント
コメントはありません。