WordPress 珍道中 その11(テーブルがズレる)

テーブルで、写真と文字がずれる。

Twenty SeventeenからTwenty Twelveへ変更して、困った事、それは商品紹介のテーブルの体裁が崩れてしまう事です。商品紹介なら自分で作らないでカエレバでしょ、そういう声もあると思います。僕が今提携しているASPはA8、バリューコマースの2社、プラスAmazonです。(僕のブログの場合、バリューコマースでは、楽天のすべての商品へのリンクが出来ない)最初は定番のカエレバを使って、商品広告を制作していましたが、ASPとの提携先に制限があるので辞めました。ASPもしも、を使っている人はいいかもしれませんが、僕はもうこれ以上ASPを増やしたくないので。そこで自分でテーブルを使って、画像と文字を入れリンク先を制作していますが、これがTwenty Twelveへ変更したら、体裁が崩れちゃうんです。

こんな感じ▼

仕方ない、またgoogle先生で検索して、皆さんに教えて頂こうと探していると、ドンピシャな記事を発見。まなびラプソディさん、ありがとうございました。

CSSの記述に問題がある。

さて、記事を読んでいると、どうもテーブルに関するCSSの記述に問題がある様です。デフォルトでは、『vertical-align: baseline; 』という(セルの下の方に寄せて文字を表示)の指定になっている様で、そこを変更すれば直るみたいです。変更というより削除ですね。試しに baselineの部分をmiddleにしてみましたが、写真と文字は揃うのですが、他のテーブルの文字に影響がでたので、やはりダメです。

リンク先の記事では3ヶ所、変更していますが、僕は1ヶ所だけです。

CSSは外観 → テーマの編集でテーマを開き

割と上の方、グリーンの記述の下のブラックの記述部分。(60行目)なので、場所はすぐ判ると思います。

この矢印の部分、baselineを試しにmiddleに変えてみましたが、ダメ。

vertical-align:baseline;を一行削除します。(ドキドキ)

すると、

成功です。これでズレが無くなりました。

よかった、ありがとう。でもね、なぜかバリューコマースのテキストリンクを貼付けると、文字の色がロールオーバーした色のままで、元の色に戻らない。困った。

今は、強引になんとかしているけど、困ります。この件に関しての記事は見つかりませんでした。