カエレバの表示が崩れる・空白ができるときの対策　デザインを後からまとめて変更する方法【リザルト編】

calendar 2017年10月30日

カエレバのデザイン指定がバラバラだったことにより、表示が崩れてしまってしまっていたので、それに対処した方法です。

カエレバの表示が崩れる・空白ができるときの対策　デザインを後からまとめて変更する方法【トライ編】

別のブログで過去に書いた記事を、なんとなくスマホでダラダラ見ていたとき。あれ？なんだこれ？カエレバの表示がドバーッと長くなってる！？カエレバのレイアウトやデザインが崩れているのを発見。しかもボタンも表示されていません。このトラブルに対処した方法を...

この記事はその結果のみを完結版としてまとめたものです。

画像付きでわかりやすい解説が見たい場合は上のリンクから【トライ編】を読んでみてくださいね。

カエレバのデザイン一括修正

プラグイン「Search Regex」を入れる

プラグイン「Search Regex」を入れます。

WordPress.org

Search Regex

https://ja.wordpress.org/plugins/search-regex/

Search Regex は、検索のための完全な正規表現をサポートし、WordPressに強力な標準検索機能と置き換え機能を追加します。 …

有効化します。

Search Regexを開く

WordPressの管理画面　＞　ツール　＞　Search Regex

と進みSearch Regexの画面を表示。

置換する

次のように入力して置換を繰り返す。

Search pattern：
<div class="kaerebalink-box" style="text-align:left;padding-bottom:20px;font-size:small;/zoom: 1;overflow: hidden;">

Replace pattern：
<div class="cstmreba"><div class="kaerebalink-box">

Replace & Save を押す。

Search pattern：
<div class="kaerebalink-image" style="float:left;margin:0 15px 10px 0;">

Replace pattern：
<div class="kaerebalink-image">

Replace & Save を押す。

Search pattern：
<div class="kaerebalink-info" style="line-height:120%;/zoom: 1;overflow: hidden;">

Replace pattern：
<div class="kaerebalink-info">

Replace & Save を押す。

Search pattern：
<div class="kaerebalink-name" style="margin-bottom:10px;line-height:120%">

Replace pattern：
<div class="kaerebalink-name">

Replace & Save を押す。

Search pattern：
<div class="kaerebalink-powered-date" style="font-size:8pt;margin-top:5px;font-family:verdana;line-height:120%">

Replace pattern：
<div class="kaerebalink-powered-date">

Replace & Save を押す。

Search pattern：
<div class="kaerebalink-kakaku" style="color:#990000;font-weight:bold">

Replace pattern：
<div class="kaerebalink-kakaku">

Replace & Save を押す。

Search pattern：
<div class="kaerebalink-cart"style="margin:10px 0;background:url('http://img.yomereba.com/cart_button_m.gif');width:100px;height:25px">

Replace pattern：
<div class="kaerebalink-cart">

Replace & Save を押す。

Search pattern：
<div class="kaerebalink-detail" style="margin-bottom:5px;">

Replace pattern：
<div class="kaerebalink-detail">

Replace & Save を押す。

Search pattern：
<div class="kaerebalink-link1" style="margin-top:10px;%%toumeido%%">

Replace pattern：
<div class="kaerebalink-link1">

Replace & Save を押す。

Search pattern：
<div class="booklink-footer" style="clear: left"></div></div>

Replace pattern：
<div class="booklink-footer"></div></div></div>

Replace & Save を押す。

ここからは条件によって

ここからは条件によって、必要があれば置換して下さい。

amazonのリンクにチェックを入れている場合

「amazlet風-1」を指定した可能性がある場合

Search pattern：
<div class="shoplinkamazon" style="display:inline;margin-right:5px;background: url('%%iconFile1%%') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

「amazlet風-3」を指定した可能性がある場合

Search pattern：
<div class="shoplinkamazon" style="margin-right:5px;background: url('%%iconFile1%%') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

そして

Replace pattern：
<div class="shoplinkamazon">

Replace & Save を押す。

楽天のリンクにチェックを入れている場合

「amazlet風-1」を指定した可能性がある場合

Search pattern：
<div class="shoplinkrakuten" style="display:inline;margin-right:5px;background: url('%%iconFile1%%') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

「amazlet風-3」を指定した可能性がある場合

Search pattern：
<div class="shoplinkrakuten" style="margin-right:5px;background: url('%%iconFile1%%') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

そして

Replace pattern：
<div class="shoplinkrakuten">

Replace & Save を押す。

Yahoo!ショッピングのリンクにチェックを入れている場合

「amazlet風-1」を指定した可能性がある場合

Search pattern：
<div class="shoplinkyahoo" style="display:inline;margin-right:5px;background: url('%%iconFile1%%') 0 -150px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

「amazlet風-3」を指定した可能性がある場合

<div class="shoplinkyahoo" style="margin-right:5px;background: url('%%iconFile1%%') 0 -150px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

そして

Replace pattern：
<div class="shoplinkyahoo">

Replace & Save を押す。

7netのリンクにチェックを入れている場合

「amazlet風-1」を指定した可能性がある場合

Search pattern：
<div class="shoplinkseven" style="display:inline;margin-right:5px;background: url('%%iconFile1%%') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

「amazlet風-3」を指定した可能性がある場合

Search pattern：
<div class="shoplinkseven" style="margin-right:5px;background: url('%%iconFile1%%') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

そして

Replace pattern：
<div class="shoplinkseven">

Replace & Save を押す。

ベルメゾンのリンクにチェックを入れている場合

「amazlet風-1」を指定した可能性がある場合

Search pattern：
<div class="shoplinkbellemaison" style="display:inline;margin-right:5px;background: url('%%iconFile2%%') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

「amazlet風-3」を指定した可能性がある場合

Search pattern：
<div class="shoplinkbellemaison" style="margin-right:5px;background: url('%%iconFile2%%') 0 -50px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

そして

Replace pattern：
<div class="shoplinkbellemaison">

Replace & Save を押す。

セシールのリンクにチェックを入れている場合

「amazlet風-1」を指定した可能性がある場合

Search pattern：
<div class="shoplinkcecile" style="display:inline;margin-right:5px;background: url('%%iconFile2%%') 0 0px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

「amazlet風-3」を指定した可能性がある場合

Search pattern：
<div class="shoplinkcecile" style="margin-right:5px;background: url('%%iconFile2%%') 0 0 no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

そして

Replace pattern：
<div class="shoplinkcecile">

Replace & Save を押す。

価格コムのリンクにチェックを入れている場合

「amazlet風-1」を指定した可能性がある場合

Search pattern：
<div class="shoplinkkakakucom" style="display:inline;margin-right:5px;background: url('%%iconFile2%%') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">

「amazlet風-1」を指定した可能性がある場合

Search pattern：
<div class="shoplinkkakakucom" style="margin-right:5px;background: url('%%iconFile2%%') 0 -100px no-repeat;padding: 2px 0 2px 18px;white-space: nowrap;">