まぐれヒットと秋の空

WordPressでブログを書きながら気付いたことや困ったことや乗り越えたことなど

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

calendar

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

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

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

スポンサーリンク

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

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

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

有効化します。

Search Regexを開く

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

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

置換する

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

Search pattern:
<div class="kaerebalink-boxstyle="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;">

そして

Replace pattern:
<div class="shoplinkkakakucom">

Replace & Save を押す。

デザインをバラバラにしてしまったとき

大量の記事に埋め込んだカエレバのデザインをバラバラにしてしまったときにおすすめです。

少しでも誰かの参考になれば、まぐれヒット。

 

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)