ヨメレバ・カエレバのデザインが崩れる時の対処法

いまやブロガーにとって必須ツールのひとつとなっている『ヨメレバ』と『カエレバ』。

わかったブログのかん吉さんが開発したブックマークレットです。

ワーク・シフト ― 孤独と貧困から自由になる働き方の未来図〈2025〉 リンダ・グラットン プレジデント社 2012-07-28 売り上げランキング : 579 Amazon 楽天ブックス 7net by ヨメレバ

↑こんな感じでうまい具合に表示されてくれると良いのですが、私のブログではうまく表示できず、デザインが崩れてしまっていました。
具体的には･･･

↓こんな感じ。

なんか線がいろいろ入ってる＆文字と画像がズレてる･･･。

制作者のかん吉さんに問い合わせたり、自分で調べたりして、原因を探ってみると、WordPressのTwentyElevenのCSSに原因がありそうだということがわかりました。
（当ブログのテンプレートはTwentyElevenを元にしてつくっています）

 

原因はCSSのテーブル設定

さて、かん吉さんに質問したり、いろいろいじったりする中で、CSSの中でも『テーブル』（table）の設定関係に問題があるということが判明。
テーブルとは表のような枠組みのことです。

問題のあった箇所は以下の３ヶ所です。

 html, body, div, span, applet, object, iframe,
 h1, h6, p, blockquote, pre, a, abbr, acronym, address,
 big, cite, code, del, dfn, em, font, ins, kbd, q, s,
 samp, small, strike, strong, sub, sup, tt, var, dl,
 dt, dd, ol, ul, li, fieldset, form, label, legend, table,
 caption, tbody, tfoot, thead, tr, th, td {
 border: 0;
 font-family:
 inherit;
 font-size: 100%;
 font-style: inherit;
 font-weight: inherit;
 margin: 0;
 outline: 0;
 padding: 0;
 vertical-align: baseline; }

と

.entry-content table,
.comment-content table {
	margin: 0 0 1.625em;
	width: 100%;
        border-bottom: 10px solid #ddd;
}

と

.entry-content td,
.comment-content td {
	border-top: 1px solid #ddd;
	padding: 6px 10px 6px 0;
}

 

うまく表示されるようCSSを手直しする

まずはひとつ目の問題箇所は『vertical-align: baseline; 』という部分。
これは「セルの下の方に寄せて文字を表示しろ」という設定です。

画像と文字の位置がズレていたのはこのため。
この指示はいらないので、下のように削ってしまいました。

 html, body, div, span, applet, object, iframe,
 h1, h6, p, blockquote, pre, a, abbr, acronym, address,
 big, cite, code, del, dfn, em, font, ins, kbd, q, s,
 samp, small, strike, strong, sub, sup, tt, var, dl,
 dt, dd, ol, ul, li, fieldset, form, label, legend, table,
 caption, tbody, tfoot, thead, tr, th, td {
 border: 0;
 font-family:
 inherit;
 font-size: 100%;
 font-style: inherit;
 font-weight: inherit;
 margin: 0;
 outline: 0;
 padding: 0;
 }

 

二つ目の問題箇所は『width: 100%;』と『border-bottom: 10px solid #ddd;』の２ヶ所。
画像に合わせてセルの幅を変えられるように『width: 100%;』ではなく『width: auto;』に変更。

『border-bottom: 10px solid #ddd;』は線を表示させるためのコードなので削除。

.entry-content table,
.comment-content table {
	margin: 0 0 1.625em;
	width: auto;
}

 

最後の部分は『border-top: 1px solid #ddd;』を削除。これも線を表示させるためのコードです。

.entry-content td,
.comment-content td {
	padding: 6px 10px 6px 0;
}

 

結果

以上のように、ヨメレバに合わせてテーブル関係の設定を調整しました。

その結果･･･

心を動かす音の心理学 ― 行動を支配する音楽の力 齋藤 寛 ヤマハミュージックメディア 2011-05-24 売り上げランキング : 32637 Amazon 楽天ブックス 7net by ヨメレバ

↑こんな感じでうまく表示できるようになりました！

サイトの中で表を使う、という人は、もう少し設定を工夫しなければいけませんが、私のようにたぶん表は使わないという人、表よりもヨメレバやカエレバをうまく表示できるようにしたい、という人はこのやり方が使えると思います。

※CSSの設定変更の際はバックアップをとった上、自己責任でお願いします。

 

追記：プラグインにも注意！

プラグインがヨメレバ・カエレバのデザインに影響を与えている場合もあるようです。

私の場合は、ヨメレバのコードの途中になぞの改行コード（<br／>）が入ってしまっていました。
いろいろ試して原因を探ってみると『brBRbr』という自動で改行を入れるプラグインの影響ではないかということがわかりました。

そして、このプラグインを外してみたら問題なくできるようになりました。

CSSをいじってもうまくいかない場合は、プラグインに原因があるかもしれません。