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

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;を一行削除します。（ドキドキ）

すると、

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

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

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

素敵な見出しにしたい。

他の方のブログを見ていると、皆さん、素敵な見出しの装飾をされていて、きっとブログのテーマ独自の仕様か、プラグインで実行しているのか？どちらかだろうと思っていましたが、CSSで簡単に出来るんですね。しかも、見出しの装飾については、数多くのサイトがあり、それぞれ子テーマへのCSSの記述の仕方が違います。僕が選んで子テーマに記述したCSSは以下の通りです。

/*見出しの装飾 */
h2 {
border-left: 5px solid #21759b;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;}

単純にこれをコピペしましたが、これでは、ブログ全体に装飾がついてしまいます。

何とか、記事のページだけに反映する事は出来ないのか？

そこで、色々と調べていると、自分の知識不足を改めて、痛感させられました。

見出しの装飾を記事だけに。

記事だけにCSSの記述を反映させるには、頭に

.entry-content

この記述をする事。（なるほど、だんだん判ってきた）
今まで、何も判らずに、単にCSSのコピペで、用が済んでいた僕ですが、仕組みが判ってくると、おもしろく感じるものです。

この事が判ったので、さっそくCSSに.entry-contentをつけ加えます。

/*見出しの装飾 */
.entry-content h2 {
border-left: 5px solid #21759b;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;}

あとは、確認です。

文字を入力して、段落→見出し2を選択

すると、ビジュアルでは、見出し2の文字の大きさ、太さで表示されていますが、装飾はされていません。

“変更をプレビュー”をクリックしてみると、ちゃんと装飾されています。

どうやら、ビジュアルでは装飾は表示されない様ですが、特に困らないので、これで良しとします。

初歩的な内容で申し訳ありませんが、手探りで始めた人にとっては、参考になればと思います。

▼学生の内に。そろそろ、業界標準プロツールのフォトショップ、イラストレーター、始めてみませんか。