チョットここの記事でテーマの不具合を回避するテストをさせてくださいねー。
追記:17.04.25
このエントリーの最後に解決方法を書いておきますので同じ問題で困ってる方は参考にしてください\(^o^)/
テーマを変更したら画像の下に一行余白ができるようになってしまいました。
※使っているテーマはこちらです。 なかなか使いやすくて今後はコレで行きたいと思ってます。
例えば
投稿画面では下のように見えているのに・・・
実際にプレビューや公開をすると・・・
公開された画面のキャプチャー画像 ↓
明らかに一行余白ができていますね。
上の画像と文字部分をテキストモードで見るとこんな感じです ↓
1 2 3 4 |
<p><img src="http://pm-pw.com/dougahosei/wp-content/uploads/testgear-r-06-tone-jump-300x228.jpg" alt="" width="300" height="228" />あああああ</p> <p> </p> <p><img src="http://pm-pw.com/dougahosei/wp-content/uploads/testgear-r-06-tone-jump-300x228.jpg" alt="" width="300" height="228" /><br /> あああああ</p> |
なにかおかしいでしょうかね?
いままではこれで上手くいってたのですが・・
ぐぐってみたところ 画像の下に余白ができる場合は以下のコードをCSSに書き込め!って多くの人たちが声を揃えて教えてくれているのでやってみたのですが全く変わりません。
1 2 3 |
img { vertical-align: bottom; } |
別の表示の問題の件でCSSに追記でちゃんと修正もされているし、試しに
1 2 3 |
img { vertical-align: top; } |
にした場合はちゃんと文字が上に移動したのでCSSの書き方が間違っているわけではないようです。
うーん・・・ 引き続き改善策を探します。
※ちなみにテーマはまっさらな状態でカラーの変更等意外、CSSをいじったのは斜めのラベルデザインを修正するというものだけです。 ※その後、コメントのテキストの修正、外部リンクの矢印を消すもCSSに追加
※すべてのプラグインを停止してみましたが改善されませんでした
※テーマを一旦削除して再アップロードもしました
※違うテーマなら問題なく表示されます
分かる方いましたらコメントいただけたらありがたいです。
:追記
公開された画面の画像と文字を選択状態にすると ↓ みたいになります。
文字の上側と画像の下側の余白部分が選択されてしまっているのがわかります。
同じテーマ(ストーク)を使用している別の方のサイトでも同じ現象を確認しました。
でも公式のデモサイトではこのような問題は起こってないようです。
公式さんにお問い合わせ中です。 解決できますように!
画像の下の余白の修正方法
多くのブログで言われているコレ ↓ と同じことなんですが・・・
1 2 3 |
img { vertical-align: bottom; } |
この記述の前に.entry-content というのを最初につけてその後ろもチョット違いますね ↓
1 2 3 |
.entry-content img{ margin-bottom: 0; } |
テーマによって少し違いがあるんですね。こういうのは初心者にはわからない~^^;
素人考えですがこの問題があるのがわかっているのなら最初からCSSにこれを記述して置いたらいいのじゃないの?って思うんですが・・・ 違うのかなぁ?
何はともあれ
テーマの販売元のオープンケージさんがすぐに問い合わせに答えてくれて解決して良かったです。
あと少しだけこうしたいな~ってとこが残ってるんですが、それはまた自力でやってみてダメだったら問い合わせるとして、安定感もあって、スマホでの使いやすさが上がって、対応も良いみたいなので他のサイトもこのテーマ(ストーク)に変更しようかと思いました。