Twenty Seventeen 文字と画像が被る 問題への対処

WordPress Twenty Seventeen
文章の一部に画像が重なる問題への対処
子テーマの style.css を変更
 
記事や固定ページの作成で、文章の下に画像を挿入した場合、画像が文章の下部に重なってしまう。
文字と画像が被る
 
以下に、この現象が発生するケースと、対処方法を記録。

スポンサー リンク

 
下図の、テスト – 1 は メディアファイルへのリンクがない場合で、このケースでは文字と画像が被らないが、テスト – 2 のように メディアファイルへのリンクを設定すると、文字と画像が被る
 
メディアファイルへのリンクを設定して置けば、下図のように画像をクリックすると拡大表示されるので、この機能は使いたい。
文字と画像が被る
 
そこで、子テーマの style.css に、文字と画像が被らないようにマージンを設定して、強制的に画像位置を下げた。
 
2px のマージンを取った場合の間隔。(1px だと被る)
文字と画像が被る
 
5px のマージンを取った場合の間隔。(3px が最適と思われる)
文字と画像が被る
 
css を変更した時の注意点 = ブラウザのキャッシュをクリアすること。
キャッシュをクリアしないと変更した css が適用されないので、変更の都度キャッシュをクリアする。下図は、Chrome の『詳細設定』画面。
 
『キャッシュされた画像とファイル』にチェックを入れ、消去する。
文字と画像が被る
 
 

 

※:追加の問題点
文字の下の段に貼り付ける画像を、左寄せ or 右寄せ した場合、スマホで見ると文字と画像が重なる。
 

 

以上。
(2017.11.11)

 

 

スポンサー リンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です